Dynamic OG Images for Shopify

Why Shopify Stores Need Dynamic OG Images

When customers share your products on social media, a compelling preview image can make the difference between a click and a scroll-past. Our API generates professional images automatically from your product data.

Liquid Template Integration

Add dynamic OG images to your Shopify theme by editing the theme.liquid file:

{%- comment -%} Dynamic OG Images {%- endcomment -%}
{%- if template contains 'product' -%}
  {%- assign og_title = product.title | url_encode -%}
  {%- assign og_subtitle = product.price | money | url_encode -%}
  {%- assign og_image = 'https://ogimageapi.io/api/generate?title=' 
    | append: og_title 
    | append: '&subtitle=' 
    | append: og_subtitle 
    | append: '&theme=dark' -%}
  
  <meta property="og:title" content="{{ product.title }}">
  <meta property="og:description" content="{{ product.description | strip_html | truncate: 200 }}">
  <meta property="og:image" content="{{ og_image }}">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ og_image }}">

{%- elsif template contains 'collection' -%}
  {%- assign og_title = collection.title | url_encode -%}
  {%- assign og_subtitle = collection.products_count | append: ' products' | url_encode -%}
  {%- assign og_image = 'https://ogimageapi.io/api/generate?title=' 
    | append: og_title 
    | append: '&subtitle=' 
    | append: og_subtitle 
    | append: '&theme=dark' -%}
  
  <meta property="og:title" content="{{ collection.title }}">
  <meta property="og:image" content="{{ og_image }}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ og_image }}">
{%- endif -%}

Include Product Details

Make your social images more informative:

{%- assign og_title = product.title | url_encode -%}
{%- assign price_text = product.price | money -%}
{%- if product.compare_at_price > product.price -%}
  {%- assign discount = product.compare_at_price | minus: product.price 
    | times: 100 | divided_by: product.compare_at_price -%}
  {%- assign og_subtitle = price_text | append: ' • ' | append: discount | append: '% OFF' | url_encode -%}
{%- else -%}
  {%- assign og_subtitle = price_text | url_encode -%}
{%- endif -%}

What Data to Include

• Product name — Clear identification
• Price — Key purchase decision factor
• Discount percentage — Creates urgency
• Brand name — Builds trust
• Rating — Social proof