How to Add Custom Social Preview Images to Shopify Pages on the Horizon Theme (No App Needed)

How to Add Custom Social Preview Images to Shopify Pages on the Horizon Theme (No App Needed)
|sutha kathir

How to Add Custom Social Preview Images to Shopify Pages (Facebook, LinkedIn & More)

Have you ever shared one of your Shopify pages on Facebook or LinkedIn, only to see your store logo appear as the preview image instead of something relevant to that page? You're not alone — and there's a clean, no-app fix for it.

In this guide, I'll walk you through exactly how to wire up a custom social preview image per page using a Shopify page metafield and a small tweak to your theme's meta-tags.liquid snippet. Once set up, you simply upload an image when you create or edit a page, and that image is automatically used whenever someone shares that URL on social media.

Why Does This Happen?

Social platforms like Facebook, LinkedIn, and X (Twitter) use a standard called Open Graph (OG) — a set of <meta> tags inside your page's <head> that tell the platform what title, description, and image to show in the link preview card.

By default, Shopify themes populate the OG image using a variable called page_image. This works well for products (which have product photos) and articles (which have a featured image), but for pages (About Us, Services, Contact, etc.) there is no built-in featured image — so page_image is empty, and the social platform either picks your logo or something random from the page.

The fix is to give each page its own dedicated social image via a metafield, and teach your theme to use it.

What You'll Need

  • Access to your Shopify admin (Settings → Custom data)
  • Access to your theme code (Online Store → Themes → Edit code)
  • A basic understanding of Liquid (Shopify's templating language) — but don't worry, I'll give you the exact code
  • A social preview image for each page (recommended size: 1200 × 630 px, under 8 MB, JPG or PNG)

Step 1 — Create the Page Metafield Definition

First you need to tell Shopify to allow an image field on pages.

  1. In your Shopify admin, go to Settings → Custom data → Pages.
  2. Click Add definition.
  3. Fill in the fields:
    • Name: Social Image
    • Namespace and key: custom.social_image
    • Type: File → Image
    • Description (optional): Image shown when this page is shared on social media
  4. Click Save.

That's it — Shopify will now show a "Social Image" upload field on every page in your admin.

Step 2 — Edit Your Theme's meta-tags.liquid Snippet

Now you need to tell your theme to use this metafield image as the OG image when it's available.

  1. In your Shopify admin, go to Online Store → Themes → your active theme → Edit code.
  2. In the left panel, open the Snippets folder and click meta-tags.liquid.
  3. Find the existing OG image block. It will look something like this:
{%- if page_image -%}
  <meta
    property="og:image"
    content="http:{{ page_image | image_url }}"
  >
  <meta
    property="og:image:secure_url"
    content="https:{{ page_image | image_url }}"
  >
  <meta
    property="og:image:width"
    content="{{ page_image.width }}"
  >
  <meta
    property="og:image:height"
    content="{{ page_image.height }}"
  >
{%- endif -%}

Replace that entire block with the following:

{% comment %} Custom: use custom.social_image metafield for pages if set {% endcomment %}
{%- liquid
  assign og_image = page_image
  if request.page_type == 'page' and page.metafields.custom.social_image != blank
    assign og_image = page.metafields.custom.social_image.value
  endif
-%}

{%- if og_image -%}
  <meta
    property="og:image"
    content="http:{{ og_image | image_url }}"
  >
  <meta
    property="og:image:secure_url"
    content="https:{{ og_image | image_url }}"
  >
  <meta
    property="og:image:width"
    content="{{ og_image.width }}"
  >
  <meta
    property="og:image:height"
    content="{{ og_image.height }}"
  >
{%- endif -%}

Click Save.

What This Code Does

  • Line 3: Sets og_image to the default page_image — so products, articles, and collections are completely unaffected.
  • Lines 4–6: On page templates only, if custom.social_image has been uploaded, it overrides og_image with the metafield value.
  • Lines 9–23: Outputs all four standard OG image tags using og_image — the URL (HTTP and HTTPS), plus the width and height so platforms render the card correctly.

The logic is: metafield wins if set, otherwise falls back to the existing behaviour. Nothing breaks if you don't upload an image.

Step 3 — Upload a Social Image to Your Pages

Now the fun part — connecting the image to your pages.

  1. Go to Online Store → Pages and open any page.
  2. Scroll down to the Metafields section (below the content editor).
  3. You'll see the Social Image field you created. Click it and upload your 1200 × 630 px image.
  4. Click Save.

Repeat for any page where you want a specific social preview image. Pages without an uploaded image will continue to use the theme's default behaviour.

Step 4 — Test It

Facebook and LinkedIn cache OG data aggressively, so use their debugger tools to force a fresh read after you save:

You should see your uploaded image appear in the preview. If you still see the old image, hit "Scrape Again" a second time — it can take a moment for the cache to clear.

Tips for Great Social Preview Images

  • Size: 1200 × 630 px is the sweet spot — it renders well on Facebook, LinkedIn, X, and iMessage link previews.
  • Text: Keep any text large and centred — a significant portion of the image gets cropped on mobile previews.
  • Branding: Include your logo and brand colours so the card is instantly recognisable in a feed.
  • File size: Aim for under 1 MB for fast loading. Shopify will serve the image through its CDN, but smaller is always better.
  • Format: JPG works well for photos. PNG if you need transparency or sharp text edges.

Why a Metafield Instead of an App?

There are apps on the Shopify App Store that manage OG images, but this approach has real advantages:

  • No monthly fee — it's built into your theme.
  • No extra HTTP requests — the meta tag is rendered server-side with zero JavaScript.
  • Full control — the image lives inside Shopify's native file system, served through the same fast CDN as everything else.
  • Easy to maintain — any team member can update it from the standard page editor without touching code.

Troubleshooting

The metafields section doesn't appear on my page editor.
Make sure you saved the definition in Settings → Custom data → Pages. It can take a page refresh to appear.

The image still isn't showing in Facebook Sharing Debugger.
Check that you saved both the page (with the metafield image) and the theme code change. Also make sure the metafield namespace and key are exactly custom.social_image — it's case-sensitive.

I don't see a meta-tags.liquid file in my theme.
Some themes handle meta tags differently. Search your theme's layout/theme.liquid for og:image — the block will be there directly, and you can apply the same pattern.

My theme uses a different metafield name.
Change page.metafields.custom.social_image in the Liquid code to match your own namespace and key (e.g. page.metafields.seo.og_image).

Wrapping Up

With about five minutes of setup — creating one metafield definition and editing a single snippet — every page on your Shopify store can now have its own polished social preview image. No app subscriptions, no workarounds, just clean Liquid using Shopify's native metafield system.

If your theme doesn't have a meta-tags.liquid snippet, the same principle applies wherever your theme outputs its og:image meta tags — the Liquid logic is identical.

Have questions or a variation that worked for your theme? Drop a comment below.