How to Set an Open Graph Image in Shopify

To set Shopify’s default Open Graph image, open Shopify admin and go to Online Store > Preferences. In Social sharing image and SEO, add or change the image, then save. Shopify uses this image as the store-level fallback when a page does not provide another suitable image. Product, collection, and blog-post pages in Shopify’s free themes normally use their featured image instead.

The setting is often called the “social sharing image” in Shopify, while the HTML metadata that social networks read is usually og:image. If a custom theme hard-codes an image or uses a theme setting, that code can take priority over the preference image. This guide covers the admin setting, page-level behavior, custom Liquid, verification, caching, troubleshooting, and an API option for generating or checking preview images.

Set the store-wide social sharing image

1. Sign in to Shopify admin.
2. Open Online Store > Preferences.
3. Find Social sharing image and SEO.
4. Select Add image or Change image.
5. Choose the image from your device.
6. Save the preference.

This image is a fallback. It does not automatically override an image that a product, collection, article, theme setting, or theme template already supplies. Use a representative brand image that still makes sense when shared for pages without a featured image, such as the homepage or an About page.

What the setting controls

Shopify’s free themes generally use a page’s featured image for product pages, collection pages, and blog posts. Pages without a featured image, including many homepages and standard Pages, use the store social sharing image. The exact result depends on the active theme and its metadata implementation.

Page or source	Typical image used	What to check
Product	Product featured image	Confirm the product has a featured image.
Collection	Collection image, when provided	Check the collection’s media and rendered metadata.
Blog post	Article featured image	Confirm the article image is published.
Homepage or About page	Store social sharing image fallback	Inspect the final og:image tag.
Custom theme template	Theme code or theme setting	Search for og:image and image settings.

Understand Shopify’s image precedence

When several possible images exist, Shopify’s documented precedence is:

1. Images hard-coded in theme files.
2. Images uploaded in theme settings, such as Social media, Social sharing, or Checkout settings.
3. The image in Online Store > Preferences, used as the default fallback.

This order explains why changing the Preferences image may appear to have no effect. A theme can emit its own image before Shopify reaches the fallback. Some themes also require an image in Theme settings > Social media or Theme settings > Checkout > Logo.

Do not assume that every URL will use the same image. A product page can correctly show its product image while the homepage uses the store fallback. A custom article template can intentionally select a different image again.

Inspect the rendered Open Graph tags

Before editing code, inspect what visitors and crawlers actually receive:

1. Open the public Shopify URL in a browser.
2. View the page source, or open developer tools and inspect the document head.
3. Search for property="og:image".
4. Record the complete image URL and check whether it is absolute, publicly reachable, and the image you expect.
5. Also inspect og:title, og:description, and og:url for duplicate or conflicting tags.

If the page contains multiple og:image tags, crawlers may use the first one or apply platform-specific behavior. Remove accidental duplicates only after confirming that the theme is not deliberately providing page-specific metadata.

Use Liquid in a custom theme

If the current theme does not use the admin image, search the theme code for og:image. Shopify commonly places social metadata in a snippet included from the layout. Back up or duplicate the theme before editing, and preserve existing product, collection, and article logic.

Shopify’s Liquid documentation demonstrates using the global page_image object for the og:image value. An illustrative pattern is:

<meta property="og:image" content="http:{{ page_image | img_url: '1200x1200' }}">

Treat that line as a pattern to adapt to the active theme, not a guaranteed copy-and-paste solution for every current theme. Modern themes may use different image filters, protocol handling, responsive image helpers, or a dedicated social-image snippet. Preserve page-specific branches such as product featured images when the theme intentionally sets them.

A safer custom-theme workflow

1. Duplicate the live theme.
2. Search all theme files for og:image, page_image, and social-image settings.
3. Identify which snippet is included in layout/theme.liquid.
4. Trace the variables used for products, collections, articles, and generic pages.
5. Change only the fallback branch to use page_image or the intended theme setting.
6. Preview the duplicate theme and inspect the generated HTML for several page types.
7. Publish only after the previews and source metadata are correct.

Verify previews on social platforms

Social networks cache metadata independently of Shopify. A correct HTML tag can therefore produce an old preview for a while.

• Use Twitter’s Card Validator to inspect the card generated from the URL.
• Use Facebook’s Sharing Debugger to scrape the URL again and review warnings.
• Use LinkedIn’s Post Inspector to request a fresh inspection.
• Paste the exact canonical URL, including whether it uses a trailing slash, query string, or redirect.

Facebook can retain an image for several days before checking for updates; its debugger can trigger a new scrape. This social-card cache is separate from a search engine’s image cache. If a search result remains outdated, resubmit the sitemap through the relevant search-console workflow rather than expecting a social debugger to refresh it.

Image and URL requirements that prevent failures

• Use an image URL that crawlers can fetch without a login, session cookie, or expiring token.
• Use HTTPS and confirm that redirects do not require JavaScript.
• Keep the image on a stable CDN or Shopify-hosted asset instead of a temporary local URL.
• Check that the server returns an image content type and a successful response.
• Keep important artwork away from the edges because platforms crop previews differently.
• Upload a new filename when a platform refuses to refresh an old asset; this changes the URL and can help distinguish the new resource.

Shopify’s cited guidance does not establish a universal required dimension. Choose a practical landscape composition, then validate it in each target debugger and in the social network’s composer.

Common problems and fixes

Symptom	Likely cause	Fix
The Preferences image is ignored	A theme setting or hard-coded image has higher precedence.	Check Theme settings, then search theme files for og:image.
Product shares show the wrong image	The product featured image or product template supplies another image.	Inspect the product’s featured media and the product template metadata.
The field is blank or the image is unavailable	The theme expects an image in Social media or Checkout settings.	Check Theme settings > Social media or Theme settings > Checkout > Logo.
Facebook or LinkedIn still shows the old image	The platform cached previous metadata.	Run the URL through the platform debugger or inspector and request a rescrape.
No preview appears	The image URL is private, blocked, invalid, or redirects unexpectedly.	Open the image URL in an unauthenticated browser and inspect its response.
Different platforms show different images	Platforms apply different cache and parsing rules, or tags are duplicated.	Inspect source order, remove unintended duplicates, and test each platform.
Theme edit breaks metadata	Liquid syntax, filters, or variable assumptions do not match the theme.	Restore the duplicate, validate syntax, and make a smaller change based on the existing snippet.

Performance, reliability, and maintenance

Open Graph metadata is fetched when a crawler requests the page, so reliability depends on both the HTML response and the image response. Keep the metadata in the initial document head rather than relying on client-side JavaScript to insert it. A stable hosted image avoids failures caused by expiring URLs.

Theme code should select an image with a small number of predictable branches. Excessive Liquid logic makes it easier to emit duplicate tags or a missing fallback. After theme updates, recheck the homepage, a product, a collection, a blog post, and a regular Page because snippets and variable names can change.

There is no separate Shopify charge for using the built-in social sharing image setting. If you choose an app for automated or more customized previews, review its current pricing and permissions in the Shopify App Store. PreviewBuilder: Link Image is one listed option for customizing preview images and Open Graph metadata; evaluate it after trying Shopify’s built-in setting and theme route.

Or skip the browser setup

If you need a dependable screenshot of a Shopify page for QA, documentation, a social workflow, or an image generated after checking the rendered page, ScreenshotNeo provides a website screenshot API. It can capture a clean PNG, JPEG, WebP, or PDF from one request. Before capture, it accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.

Only clean shots are billed. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo documentation for authentication and the full option list. A basic capture looks like this:

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-store.myshopify.com -o shopify-page.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://your-store.myshopify.com"},
    timeout=90,
)
r.raise_for_status()
open("shopify-page.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://your-store.myshopify.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shopify-page.webp', Buffer.from(await res.arrayBuffer()));

For Open Graph workflows, useful options include full-page capture with lazy images loaded, a CSS selector for one element, dark mode, device presets or a custom viewport, retina scale, custom CSS and JavaScript, clicks before capture, hidden selectors, waits for a selector or network idle, blocked ads and trackers, custom headers and cookies, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTL, signed links for public <img> tags, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and a usage API. PDF output supports paper size, margins, landscape mode, and page ranges.

ScreenshotNeo offers 1,000 shots per month free with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to try a capture.

FAQ

Does Shopify’s social sharing image override a product image?

Usually not in Shopify’s free themes. Product featured images commonly take precedence, while the Preferences image is the fallback when no other image is available.

Why does the admin image look correct but the shared card does not?

Inspect the rendered og:image. A theme setting, hard-coded tag, duplicate metadata, or a social platform cache can explain the mismatch.

Can I set a different image for each Shopify Page?

Yes, but the method depends on the theme. A theme can use page-specific Liquid logic or a theme setting. Test the generated metadata for each template after making the change.

Will changing the image update old social posts?

No guarantee. Platforms cache previews separately. Use the relevant debugger or inspector to request a fresh scrape; existing posts may retain their stored preview.

Should I use an app instead of editing Liquid?

Start with Preferences and Theme settings. Use a custom theme change when you need code-level control, and consider a preview app when you need automated or broader customization without maintaining Liquid.