---
layout: page
title: Generate Automatic Open Graph Images for your Shopify Store
nav_title: Shopify
permalink: /guides/og-images/shopify/
parent: OG Images
grand_parent: Guides
nav_order: 1
description: >-
  Add automatic Open Graph images to every Shopify product, collection, article, and storefront page with Liquid and HTML/CSS to Image.
---
# Generate Automatic Open Graph Images for your Shopify Store
{: .no_toc }
{: .fs-9 }

Use Shopify Liquid to point every product, collection, article, and storefront page at its matching HCTI social card.
{: .fs-6 .fw-300 }

<hr>

## Before you begin

Create an [OG Image Config](/getting-started/og-images/) 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.

{% raw %}
```liquid
{% 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 }}">
```
{% endraw %}

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:

{% raw %}
```liquid
{% 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 %}
```
{% endraw %}

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:

```html
<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

1. Open a published product, collection, and article page.
2. Use **View Source** and confirm that each page has the expected HCTI URL with its own path.
3. Confirm there is not an older `og:image` later in the `<head>`.
4. Test the public page in the [Social Card Previewer](https://htmlcsstoimage.com/tools/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](https://shopify.dev/docs/storefronts/themes/seo/metadata), the [`request` Liquid object](https://shopify.dev/docs/api/liquid/objects/request), and [editing theme code](https://help.shopify.com/en/manual/online-store/themes/theme-code).

[Back to OG Image Configs](/getting-started/og-images/)