How to Add Custom OG Images to Your Shopify Store
Shopify generates OG tags automatically, but it uses your product images at their original dimensions, which are rarely ideal for social sharing. Taking control of the OG image in your theme takes a few lines of Liquid and gives you consistent, properly sized social cards across your entire store. Here is how to do it.
theme.liquid is where OG tags live
In your Shopify theme, open `layout/theme.liquid` in the theme code editor. Shopify's default themes already output OG tags, often through a snippet like `{% render 'meta-tags' %}` or directly in the layout file. Find the `og:image` output and modify the logic to prefer a custom metafield or file over the automatically selected product image. Any changes here apply across the entire store, so test on a development theme before pushing to production.
Use product.featured_media and img_url for sizing
Shopify's `product.featured_media` object gives you access to the product's primary image. To get a correctly sized OG image, use the Liquid `img_url` filter with a size parameter: `{{ product.featured_media | img_url: '1200x630', crop: 'center' }}`. This generates a Shopify CDN URL for the image at the specified dimensions with center cropping. It is better than the raw image URL since it serves a properly sized file instead of a full-resolution product photo that may be several megabytes.
Metafields for custom OG images per product
For products where the featured image does not work well as a social card, use Shopify metafields to store a custom OG image URL. Create a metafield definition under "Products" in your Shopify admin with namespace `custom` and key `og_image` of type "File." In your theme Liquid, check for the metafield first: `{% if product.metafields.custom.og_image %} {{ product.metafields.custom.og_image | img_url: '1200x630' }} {% else %} {{ product.featured_media | img_url: '1200x630', crop: 'center' }} {% endif %}`. Generate the OG image with OGImagen, upload it as a Shopify file, and reference it in the metafield.
Online Store 2.0 themes and section schema
Online Store 2.0 themes support app blocks and section settings that let merchants configure SEO options without editing Liquid directly. If you are building or customizing an OS 2.0 theme, add an SEO section with an image picker setting for the OG image. Merchants can then select or upload the OG image from the theme customizer without touching code. This is the most maintainable approach for stores managed by non-developers. Reference the setting value in your OG tag output as `{{ section.settings.og_image | img_url: '1200x630' }}`.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Shopify store