Back to docs

Shopify Setup

Install the Instant OG app, enable the theme extension, and remove conflicting og:image tags so your store gets beautiful social previews.

1. Install the app

Install Instant OG from the Shopify App Store. Once installed, open the app from your Shopify admin sidebar to run through the setup wizard — choose templates for each page type, pick a color scheme, and activate billing.

2. Enable the theme extension

The app includes a theme extension that injects og:image meta tags into your store's <head>. You need to enable it manually:

  1. Go to Online Store → Themes in your Shopify admin
  2. Click Customize on your active theme
  3. In the theme editor, click the App embeds icon in the left sidebar (puzzle piece icon)
  4. Toggle on Instant OG Image
  5. Click Save

3. Remove conflicting og:image tags

Most Shopify themes include their own og:image meta tags. Social platforms use the first og:image they find in the HTML, and theme tags appear before app extension tags. If you don't remove or disable the theme's tags, social platforms will use the theme's image instead of Instant OG's.

This step is required

Skipping this step means social platforms will ignore Instant OG's images and show the theme's default images instead. Instant OG includes a script that removes theme tags in browsers, but social crawlers don't execute JavaScript.

Option A: Wrap in a condition (recommended)

This approach keeps the theme's og:image as a fallback if Instant OG is ever disabled.

  1. Go to Online Store → Themes → Actions → Edit code
  2. Open theme.liquid (or whichever file contains your theme's <head> section — some themes use a snippet like snippets/social-meta-tags.liquid)
  3. Search for og:image
  4. Wrap the og:image meta tags (including og:image:secure_url, og:image:width, og:image:height) in a Liquid condition:
{% unless shop.metafields.instantog.theme %}
  <meta property="og:image" content="{{ page_image | image_url }}" />
  <meta property="og:image:secure_url" content="{{ page_image | image_url }}" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{% endunless %}

The shop.metafields.instantog.theme metafield is set by the Instant OG app during setup. When it exists, the theme's og:image tags are skipped and only Instant OG's tags are rendered.

Option B: Delete the tags

If you don't need a fallback, simply delete the og:image lines from your theme. Instant OG will always provide the og:image tags via the theme extension.

Common theme locations

Different themes store og:image tags in different files. Here are the most common locations:

  • layout/theme.liquid — directly in the <head>
  • snippets/social-meta-tags.liquid
  • snippets/meta-tags.liquid
  • sections/head.liquid

Use your browser's View Source (not Inspect Element) to search for og:image and confirm the tags are gone after editing.

4. Verify it works

After enabling the extension and removing conflicting tags:

  1. Visit a product page on your store
  2. View the page source and search for og:image
  3. You should see a single og:image tag pointing to https://instantog.com/api/og?shop=...
  4. Copy that URL and open it in your browser — you should see a PNG image
  5. Test with a social preview tool (Facebook Sharing Debugger, Twitter Card Validator, or opengraph.xyz) to confirm the image appears

5. Configure templates

Back in the Instant OG app in your Shopify admin, you can customize which template is used for each page type — products, collections, blog posts, pages, and the homepage. You can also change the color scheme and accent color at any time. Changes take effect on the next image generation (cached images are served until they expire).

Troubleshooting

Image not showing on social platforms

  • Conflicting tags — View source and check there's only one og:image tag. If the theme's tag appears first, follow step 3 above.
  • Store password — Dev stores have a password that blocks the OG image API from generating images via HTML scraping. Instant OG uses the Shopify Admin API instead, so this shouldn't be an issue. If images still don't load, ensure the app has the required permissions.
  • Cached previews — Social platforms cache OG images aggressively. Use Facebook's Sharing Debugger and click "Scrape Again" to refresh.

Wrong price displayed

The price shown in OG images comes from the Shopify Admin API's priceRange.minVariantPrice field. If the price looks wrong, check the product's variant prices in your Shopify admin. If images are cached with an old price, they will update on the next cache cycle.

Need help?

If you run into issues, reach out at support@outergods.com and we'll help you get set up.