Generate Automatic Open Graph Images for your Shopify Store

Use Shopify Liquid to point every product, collection, article, and storefront page at its matching HCTI social card.

Before you begin

Create an OG Image Config with your public storefront origin, such as https://shop.example.com. Choose:

Page Screenshot to capture each storefront page or a dedicated element such as #social-card.
Template Values to render a consistent design using Shopify’s existing Open Graph metadata or Liquid values.

Copy the domain ID shown after you save the config.

Add the image tags to your theme

In Shopify admin, go to Online Store → Themes, open the theme menu, and select Edit code. Duplicate the theme first so you have a backup.

Most Online Store 2.0 themes generate social metadata in a snippet included by layout/theme.liquid. In Shopify’s Dawn theme, the current file is snippets/meta-tags.liquid. Search your theme for og:image and twitter:image to find the equivalent file.

Replace the theme’s existing social-image output with this Liquid. Do not leave a second competing og:image block.

{% assign hcti_og_image = 'https://hcti.io/v1/og/YOUR_DOMAIN_ID' | append: request.path %}

<meta property="og:image" content="{{ hcti_og_image }}">
<meta property="og:image:secure_url" content="{{ hcti_og_image }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ hcti_og_image }}">

Replace YOUR_DOMAIN_ID, save the file, and publish the theme. Shopify’s request.path supplies the current storefront path, so /products/red-shirt automatically maps to the same path in the HCTI URL.

Use Shopify data in a template

In Template Values mode, the simplest setup is to map metadata already generated by the theme:

HCTI template variable	Shopify metadata source
`headline`	Title metadata or `og:title`
`summary`	Description metadata or `og:description`
`site_name`	`og:site_name`
`canonical_url`	`og:url`

You can also expose Liquid values directly. Add tags next to the image metadata for the page types that need them:

{% if request.page_type == 'product' %}
  <meta property="html:tv:headline" content="{{ product.title | escape }}">
  <meta property="html:tv:price" content="{{ product.price | money | escape }}">
  <meta property="html:tv:vendor" content="{{ product.vendor | escape }}">
  {% assign hcti_content_version = product.metafields.custom.og_content_version.value %}
  {% if hcti_content_version != blank %}
    <meta property="hcti:content_version" content="{{ hcti_content_version }}">
  {% endif %}
{% elsif request.page_type == 'article' %}
  <meta property="html:tv:headline" content="{{ article.title | escape }}">
  <meta property="html:tv:author" content="{{ article.author | escape }}">
  <meta property="hcti:content_version" content="{{ article.updated_at | date: '%s' }}">
{% endif %}

The html:tv: names must match variables in the selected HCTI template. Explicit values take precedence over dashboard mappings. The article’s update timestamp gives edited content a new image identity. For products, the example uses an optional integer metafield named custom.og_content_version; increment it when the card-visible product content changes, or remove that block and rely on the config’s refresh interval.

Capture a storefront element

For Page Screenshot mode, add a page-level selector when the theme contains a dedicated card element:

<meta property="hcti:selector" content="#social-card">

The element must be present on the public storefront page. If it is only for rendering, use theme CSS to position it without preventing the browser from laying it out; an element with display: none cannot be captured.

Verify the storefront output

Open a published product, collection, and article page.
Use View Source and confirm that each page has the expected HCTI URL with its own path.
Confirm there is not an older og:image later in the <head>.
Test the public page in the Social Card Previewer.

Theme updates can replace edited theme code. Keep the change in your version-controlled custom theme or reapply it after an upstream theme update.

See Shopify’s documentation for SEO metadata in themes, the request Liquid object, and editing theme code.

Back to OG Image Configs