Dynamic OG Images for Shopify Without Installing an App

Shopify's default social sharing images are an afterthought. Product images get cropped to an awkward rectangle. Collection pages often show nothing at all. Blog posts reuse the featured image, which was never designed for the 1200×630 OG format. The usual fix is a $20–$30/month Shopify app. But there is a faster, cheaper approach: a URL-based API that plugs directly into your Liquid templates. No app install, no monthly fee for most stores, and full control over what your links look like when shared on social media.

Why Shopify's Default OG Images Are Bad

Every time someone shares a link to your Shopify store on Facebook, Twitter, LinkedIn, Slack, or iMessage, the platform fetches an Open Graph image to display as a preview. This image is the single biggest factor in whether someone clicks through or keeps scrolling. And by default, Shopify handles it poorly.

Product pages: cropped and inconsistent

Shopify sets the og:image meta tag to the product's featured image. The problem is that product photos are almost never 1200×630 pixels. They are square, portrait, or some other aspect ratio optimized for your product gallery. When Facebook or Twitter crops that image to fit the OG preview format, you get awkward framing—cut-off products, wasted whitespace, or zoomed-in shots that lose context.

Worse, there is no branding. The preview shows a cropped product photo with no store name, no price, no context. A customer scrolling through their feed sees a random product image with no reason to click. Compare that to a clean, branded preview that shows the product name, price, and your store identity—the difference in click-through rate is significant.

Collection pages: often blank

Shopify collection pages use the collection image as the og:image. If you have not uploaded a specific collection image—and most store owners have not for every collection—the OG image falls back to nothing, or to a generic store logo. When someone shares your "Summer Sale" collection on social media, the link preview shows an empty gray box or a tiny logo. That is not a compelling reason to click.

Blog posts: wrong format

Shopify blog posts use the article's featured image as the OG image. While this is better than nothing, the featured image was chosen for the blog layout, not for social sharing. It is typically wider than 1200×630 or does not include the post title. The result is a preview that shows a generic image with no indication of what the post is about. A properly formatted OG image with the post title, author name, and your brand colors would convert dramatically better.

The real cost of bad OG images

Bad social previews are not just an aesthetic problem. They cost you traffic and revenue. A study by Buffer found that posts with optimized images receive 150% more retweets on Twitter and significantly higher engagement on Facebook. When your Shopify links look broken or unprofessional in social feeds, you are leaving clicks—and sales—on the table.

The API Approach: OGPeek in Liquid Templates

Instead of installing a Shopify app that adds weight to your store, injects scripts, and charges $20–$30 per month, you can use OGPeek's URL-based API directly in your Shopify theme's Liquid templates. The approach is simple:

1. Edit your theme's theme.liquid file (or the relevant section/snippet)
2. Replace Shopify's default og:image meta tag with an OGPeek API URL
3. Use Liquid template variables to inject dynamic content (product title, price, collection name, etc.)
4. Every page on your store now generates a custom, branded OG image on the fly

The OGPeek API works via a simple GET request. You construct a URL with query parameters—title, subtitle, template, theme, brand color—and the API returns a 1200×630 PNG image. No API key needed for the free tier. No server-side code. No build step. Just a URL in a meta tag.

Here is what the base API URL looks like:

https://todd-agent-prod.web.app/api/v1/og
  ?title=Your+Page+Title
  &subtitle=Your+subtitle+here
  &template=gradient
  &theme=midnight
  &brandColor=%23F59E0B

That URL returns a professional OG image instantly. Now the question is how to wire it into Shopify's Liquid templating system so the title and subtitle change dynamically for every page.

Code Example: Adding to theme.liquid

The theme.liquid file is the master layout file for your entire Shopify store. Every page—products, collections, blog posts, and static pages—renders through this template. By adding the OGPeek meta tag here, you set a baseline OG image for every page on your site.

Open your Shopify theme editor (Online Store → Themes → Edit code) and find theme.liquid. Look for the existing og:image meta tag inside the <head> section. Replace it with the following:

<!-- Dynamic OG Image via OGPeek API -->
{% capture og_title %}{{ page_title | url_encode }}{% endcapture %}
{% capture og_subtitle %}{{ shop.name | url_encode }}{% endcapture %}

<meta property="og:image"
  content="https://todd-agent-prod.web.app/api/v1/og
    ?title={{ og_title }}
    &subtitle={{ og_subtitle }}
    &template=gradient
    &theme=midnight
    &brandColor=%2395BF47" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

This gives every page a branded OG image with the page title and your shop name. The url_encode filter ensures special characters in titles (ampersands, quotes, etc.) are properly escaped for the URL. The brand color %2395BF47 is Shopify green—replace it with your own brand hex color.

This is the baseline. Now let's override it with richer content for specific page types.

Code Example: Product Pages

Product pages are the most important pages on your store for social sharing. When a customer shares a product link, the OG image should show the product name and price—the two pieces of information most likely to drive a click.

In your theme, find the section or template that handles product pages. In Shopify 2.0 themes (Dawn and similar), this is typically sections/main-product.liquid or the product template. Add this code inside a {% content_for_header %} block, or use Shopify's {% section %} approach to inject meta tags. Alternatively, add conditional logic in theme.liquid:

{% if template contains 'product' %}
  {% capture product_og_title %}{{ product.title | url_encode }}{% endcapture %}
  {% capture product_og_subtitle %}{{ product.price | money_without_trailing_zeros | url_encode }}{% endcapture %}

  <meta property="og:image"
    content="https://todd-agent-prod.web.app/api/v1/og
      ?title={{ product_og_title }}
      &subtitle={{ product_og_subtitle }}
      &template=gradient
      &theme=midnight
      &brandColor=%2395BF47" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{% endif %}

When someone shares a product page, the OG image will show something like "Premium Leather Wallet" as the title and "$49" as the subtitle, rendered in a clean, branded layout. This is dramatically more effective than a cropped product photo with no context.

You can also include additional context in the subtitle. For example, if you want to show the product type or vendor alongside the price:

{% capture product_og_subtitle %}{{ product.price | money_without_trailing_zeros }} — {{ product.vendor | url_encode }}{% endcapture %}

This would render a subtitle like "$49 — Your Brand Name", giving the social preview both price and brand context.

Code Example: Collection Pages

Collection pages are frequently shared in marketing campaigns, social ads, and influencer collaborations. Yet they are the pages most likely to have no OG image at all in a default Shopify setup. The fix is straightforward.

{% if template contains 'collection' %}
  {% capture collection_og_title %}{{ collection.title | url_encode }}{% endcapture %}
  {% capture collection_count %}{{ collection.products_count }} products{% endcapture %}
  {% capture collection_og_subtitle %}{{ collection_count | url_encode }}{% endcapture %}

  <meta property="og:image"
    content="https://todd-agent-prod.web.app/api/v1/og
      ?title={{ collection_og_title }}
      &subtitle={{ collection_og_subtitle }}
      &template=gradient
      &theme=midnight
      &brandColor=%2395BF47" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{% endif %}

Now when someone shares your "Summer Sale" collection, the social preview shows a clean image with "Summer Sale" as the title and "42 products" as the subtitle. That is immensely more clickable than a blank preview or a tiny store logo.

For collections with descriptions, you could use the collection description as the subtitle instead:

{% capture collection_og_subtitle %}{{ collection.description | strip_html | truncate: 60 | url_encode }}{% endcapture %}

The strip_html filter removes any HTML tags from the description, and truncate: 60 keeps the subtitle concise enough to render cleanly in the OG image.

Code Example: Blog Posts

If you run a blog on your Shopify store—for SEO, content marketing, or brand storytelling—proper OG images for blog posts are critical. Blog content gets shared more than product pages, and the OG image determines whether that share drives traffic back to your store.

{% if template contains 'article' %}
  {% capture article_og_title %}{{ article.title | url_encode }}{% endcapture %}
  {% capture article_og_subtitle %}{{ article.author }} · {{ article.published_at | date: '%B %d, %Y' }}{% endcapture %}
  {% capture article_og_subtitle_encoded %}{{ article_og_subtitle | url_encode }}{% endcapture %}

  <meta property="og:image"
    content="https://todd-agent-prod.web.app/api/v1/og
      ?title={{ article_og_title }}
      &subtitle={{ article_og_subtitle_encoded }}
      &template=gradient
      &theme=midnight
      &brandColor=%2395BF47" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
{% endif %}

This generates an OG image with the blog post title as the headline and the author name plus publish date as the subtitle. For example: "10 Styling Tips for Fall" with "Sarah Chen · March 15, 2026" below it. Much more compelling than a generic featured image that may not even relate to the post content.

Putting It All Together

Here is the complete conditional block you can add to your theme.liquid file, replacing the default og:image meta tag. This handles products, collections, blog posts, and all other pages with a single block of Liquid code:

<!-- Dynamic OG Images via OGPeek API -->
{% if template contains 'product' %}
  {% capture og_title %}{{ product.title | url_encode }}{% endcapture %}
  {% capture og_sub %}{{ product.price | money_without_trailing_zeros | url_encode }}{% endcapture %}
{% elsif template contains 'collection' %}
  {% capture og_title %}{{ collection.title | url_encode }}{% endcapture %}
  {% capture og_sub %}{{ collection.products_count }} products{% endcapture %}
{% elsif template contains 'article' %}
  {% capture og_title %}{{ article.title | url_encode }}{% endcapture %}
  {% capture og_sub %}{{ article.author | url_encode }}{% endcapture %}
{% else %}
  {% capture og_title %}{{ page_title | url_encode }}{% endcapture %}
  {% capture og_sub %}{{ shop.name | url_encode }}{% endcapture %}
{% endif %}

<meta property="og:image"
  content="https://todd-agent-prod.web.app/api/v1/og
    ?title={{ og_title }}
    &subtitle={{ og_sub | url_encode }}
    &template=gradient
    &theme=midnight
    &brandColor=%2395BF47" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Copy this into your theme.liquid file inside the <head> section, replace %2395BF47 with your brand's hex color (URL-encoded), and you are done. Every page on your Shopify store now has a dynamic, branded OG image.

Free Tier Covers Most Shopify Stores

One of the most common objections to adding an API-based solution is cost. OGPeek's free tier provides 50 images per day with no signup, no credit card, and no expiration. For most Shopify stores, this is more than enough.

Here is why: social platform crawlers cache OG images aggressively. When someone shares your product link on Facebook for the first time, Facebook fetches the OG image and caches it for days or weeks. The second, third, and hundredth time that link is shared, Facebook serves the cached version. It does not hit the OGPeek API again.

This means the actual number of API calls is roughly equal to the number of unique pages on your store that get shared, not the number of times they are shared. A store with 200 products, 15 collections, and 30 blog posts has 245 unique pages. Even if all of them get shared on the same day—unlikely for most stores—that is well within the 50/day free tier, because the images are cached after the first request.

For stores with thousands of products or very high social sharing volume (large-scale influencer campaigns, viral moments), the $9/month Starter plan covers 10,000 images per month. That is enough for enterprise-level Shopify stores. Compare that to $20–$30/month for a Shopify app that does the same thing with more overhead and less control.

OGPeek API vs Shopify OG Image Apps

There are several Shopify apps in the App Store that handle OG images and social sharing optimization. The two most popular are SEO Manager and Plug In SEO. Here is how the API approach compares.

The critical difference is that SEO apps do not generate OG images. They help you edit meta tags and optimize SEO settings, but the og:image still points to your existing product photos or uploaded images. You are paying $20–$30 per month for meta tag management without solving the actual OG image problem.

OGPeek generates a new, purpose-built image for every page. The image is formatted specifically for the 1200×630 OG standard, includes your page title and relevant context (price, product count, author), and uses your brand color. No Shopify app currently does this.

Advanced: Customizing Templates and Themes

OGPeek offers 7 professionally designed templates, each available in 5 themes. For a Shopify store, the best combinations are typically:

• gradient + midnight: Dark background with a gradient accent. Professional and modern. Works well for fashion, tech, and lifestyle brands.
• gradient + ocean: Deep blue tones. Great for trust-oriented brands, health and wellness (non-medical), and premium goods.
• gradient + sunset: Warm orange and pink tones. Excellent for food, beauty, and lifestyle brands.
• minimal + light: Clean white background with subtle accents. Perfect for minimalist brands, home goods, and stationery.
• bold + midnight: High-contrast dark theme with large typography. Ideal for bold, statement-making brands.

Experiment with different template and theme combinations by modifying the template and theme parameters in the API URL. You can test any combination instantly by loading the URL in your browser—no account or API key needed.

Your brand color is set with the brandColor parameter. URL-encode the hex value (replace # with %23). For example, if your brand color is #E11D48 (rose), use brandColor=%23E11D48.

Testing Your OG Images

After implementing the Liquid code, test your OG images before announcing the change:

1. Direct URL test: Copy the OGPeek API URL from your page source and open it in a new browser tab. You should see the rendered OG image with your page title and subtitle.
2. Facebook Sharing Debugger: Go to developers.facebook.com/tools/debug, enter your Shopify page URL, and click "Debug." The tool will show the OG image that Facebook will display when your link is shared.
3. Twitter Card Validator: Go to cards-dev.twitter.com/validator and enter your page URL. Verify the summary_large_image card renders with the correct OGPeek-generated image.
4. LinkedIn Post Inspector: Go to linkedin.com/post-inspector and test your URL. LinkedIn is particularly strict about OG image dimensions, which is why the 1200×630 format from OGPeek is important.

Test at least one product page, one collection page, one blog post, and your homepage. Verify that the title and subtitle render correctly for each page type and that special characters (ampersands, apostrophes, quotes) display properly.

Common Issues and Fixes

Old OG images still showing

Social platforms cache OG images aggressively. After changing your meta tags, Facebook may still show the old product photo for days. Use the Facebook Sharing Debugger and click "Scrape Again" to force Facebook to re-fetch your OG data. Twitter caches for about 7 days and does not have a manual refresh option.

Double og:image tags

Make sure you remove the old og:image meta tag from your theme before adding the OGPeek one. Shopify themes typically include an og:image tag in theme.liquid or in a snippet like social-meta-tags.liquid. If two og:image tags exist, the social platform may use either one—and it will probably choose the wrong one. Search your theme files for og:image and ensure only the OGPeek version remains.

Liquid variables not rendering

If the OG image shows literal Liquid syntax (like {{ product.title }}) instead of the actual product name, the meta tag is being output outside of a Liquid rendering context. Make sure the code is inside the <head> section of theme.liquid, not in an HTML comment or a JavaScript string.

URL encoding issues

Always use the | url_encode Liquid filter on any dynamic text going into the API URL. Without it, characters like &, +, and # in product titles will break the URL. The filter converts these to their URL-safe equivalents (%26, %2B, %23).

FAQ

How do I change the OG image on Shopify without an app?

Edit your theme.liquid file and replace the default og:image meta tag with an OGPeek API URL that includes Liquid template variables. The API generates a 1200×630 PNG image on the fly based on the query parameters you provide (title, subtitle, template, theme, brand color). No app install, no Shopify permissions, and no JavaScript required. The entire integration is a single meta tag with dynamic Liquid variables.

Does Shopify automatically generate OG images?

Shopify sets the og:image meta tag to the featured image of the page, product, or blog post. However, these images are not optimized for social sharing. Product images are often square or portrait and get cropped awkwardly in the 1200×630 OG image format. Collection pages may have no image at all. Blog posts use the featured image, which may not contain the post title or any context about the content. Using an API like OGPeek generates properly formatted images with your page title, relevant metadata, and branding.

Is the OGPeek free tier enough for a Shopify store?

Yes, for most stores. The free tier provides 50 images per day with aggressive caching. Social platform crawlers cache OG images after the first fetch, so each unique page only triggers one API call. A store with 500 products, 20 collections, and 50 blog posts has 570 unique pages. With caching, the free tier handles this comfortably. Stores with thousands of products or stores running large-scale social media campaigns may need the $9/month Starter plan for 10,000 images per month.

Will adding an OG image API slow down my Shopify store?

No. The OGPeek API URL is placed in a <meta> tag in the HTML <head>, not rendered visually on the page. The image is only fetched when a social platform crawler (Facebook, Twitter, LinkedIn, Slack) requests it to generate a link preview. Your customers never load the OG image during normal browsing—browsers do not fetch OG images, only social crawlers do. There is zero impact on page load speed, Largest Contentful Paint, or any other Core Web Vital metric.

Conclusion

Shopify's default OG images are not built for social sharing. Product photos get cropped, collection pages have empty previews, and blog posts reuse images that were never designed for the 1200×630 OG format. The traditional fix—a $20–$30/month SEO app—does not even solve the problem, because those apps manage meta tags without generating actual OG images.

The API approach is faster, cheaper, and more effective. A few lines of Liquid code in your theme.liquid file give every page on your store a dynamic, branded OG image. Product pages show the product name and price. Collection pages show the collection name and product count. Blog posts show the title and author. All formatted at 1200×630, all branded with your colors, all generated in under 500 milliseconds.

The free tier covers most Shopify stores entirely. If you outgrow it, the paid plan is $9/month—less than half the cost of the cheapest Shopify SEO app, and it actually generates images instead of just editing meta tags.

Five minutes of Liquid editing. Zero app installs. Zero Shopify permissions. Better social previews on every page of your store.

Read more: How to add OG images to any website, OG images for WordPress without a plugin, Free OG image generator API guide, or see the complete OG image API guide.