# Shopify OG Image App: How to Choose and Set One Up

> How a Shopify OG image app replaces your theme's default share image, when you need one, what to check before installing, and the setup mistakes to avoid.

Updated 2026-10-12

Canonical: https://yuhuapps.com/learn/shopify-og-image-app

A Shopify og:image app replaces your theme's default share image with a designed one (several photos, your logo, price or discount text) for every product, collection and article. Before you install one, look at what your theme already shares: it's often fine for stores with colourful lifestyle photos. An app is worth it when your featured photos are white packshots or size charts, when collections have no image, or when you want sale pricing visible in shared links.

## What an og:image actually controls

When someone pastes your product link into WhatsApp, Facebook, LinkedIn, Slack or iMessage, the platform fetches the page and reads the Open Graph tags in its `<head>`. The `og:image` tag sets the picture in the preview card. `og:title` and `og:description` set the text under it.

X has its own `twitter:` tags. If `twitter:title`, `twitter:description` or `twitter:image` are missing, X falls back to the matching `og:` tags. You still need `twitter:card` set to `summary_large_image` to get the large image card instead of the small one.

For a lot of shoppers, that card is the first thing they see of your store. A customer forwards your link to a family group chat, a creator drops it into a story, a shopper pins it. You don't get to approve any of those previews, so the tag has to be right before the link goes out.

## What Shopify does without any app

Most Shopify themes, including Dawn and the other free Online Store 2.0 themes, already output Open Graph tags through a snippet (usually `snippets/meta-tags.liquid`). The logic is roughly:

| Page type | Default og:image |
| --- | --- |
| Product | The product's featured (first) image |
| Collection | The collection image, if you set one |
| Blog article | The article's featured image |
| Homepage, pages, anything without an image | The store-wide social sharing image |

Where you set that store-wide image depends on your store and theme. In most current themes it's in the theme editor under **Online Store > Themes > Customize > Theme settings > Social media**. In some stores it's still under **Online Store > Preferences**. Check both if you can't find it. If it was never set, pages without their own image may share with no picture at all, or the platform grabs something from the page (sometimes your logo at a tiny size).

So you already have an og:image. The real question is whether it looks good once it's shared.

## When the theme default is fine (and when it isn't)

If your product photos are lifestyle shots with colour and context, your catalogue is small enough to hand-pick each featured image, and most of your traffic comes from search and ads instead of shared links, the theme default will probably serve you well. A furniture brand with 20 products and styled room photos often has no reason to add an app.

It starts costing you in a few specific situations. A white mug shot on white looks like an empty grey box in a dark-mode WhatsApp chat. Apparel stores often put the size chart early in the gallery, and that's what ends up in the preview. Collections with no image set all share the same generic fallback, so a "Summer dresses" link looks the same as "Gift cards". And when you run a sale, a plain photo doesn't say "30% off" in a group chat. Bundles have the same problem, since one photo can't show a three-piece set.

The typical store that gets real value from an og:image app is something like a candle shop with 400 products shot on white that sells mostly through Instagram DMs and WhatsApp.

## What to check before installing an og:image app

Apps in this category differ a lot in how they touch your theme and what happens to images over time. These are the things to ask each vendor.

### How it adds the tags

The cleanest method is a **theme app embed**. You switch it on once in **Online Store > Themes > Customize > App embeds**, and the app injects its tags from there. Some apps also edit theme files, for example to deal with your theme's own tags. That isn't automatically a problem, but you should know exactly what gets changed and how to undo it.

### How it handles your theme's existing tags

This is the most common failure. Your theme already outputs `og:image`. If an app adds a second one without dealing with the first, the page ends up with two, and which one gets shown can differ between platforms.

A good app either hides the theme's copies or tells you exactly what to remove. To check any page yourself, view the source (Ctrl+U on Windows, Cmd+Option+U on Mac) and search for `og:image`. You want one main image tag, plus its `og:image:secure_url`, `og:image:width` and `og:image:height` companions if present.

### Coverage

Products are the obvious target, but collections, blog articles and regular pages get shared too. A "Black Friday picks" collection or a gift-guide article often travels further than any single product. Check which page types the app covers and what it uses when an item has no image at all.

### Keeping images current

If a share image shows a price or a "Sale" badge, it's wrong as soon as the price changes and the image doesn't. Ask:

- Under which conditions is an existing image re-rendered? Photo changes, price changes, or only when you click a button?
- When you change the design itself (new logo, new layout), are existing images redone, or do you need to run a regenerate?
- Can you schedule a sale look with an end date, so the discount badge doesn't outlive the sale?

### Per-product control

Automated designs handle most of a catalogue. For the rest (a hero product, a product whose best photo is the fourth one, a launch with a custom graphic) you want to pick the photos yourself or upload your own image for that one item without affecting anything else.

### Pricing model

Most og:image apps charge by catalogue size. Compare your current product count with each tier and allow for a year of growth. Then ask the vendor directly: if I go over my plan's limit, do existing images stay live, or does anything stop being served? The answer matters more than the price difference between tiers.

## Image specs that work across platforms

Each platform sizes and crops differently, so design for the overlap:

- **Facebook** recommends 1200×630 (about 1.91:1) for link previews. Square images may show as a square card or get cropped depending on placement. Images under about 600 px wide show as small thumbnails. The file size limit is 8 MB.
- **X** large cards (`summary_large_image`) display at about 2:1. Images must be under 5 MB.
- **LinkedIn** shows a wide card similar to Facebook's.
- **WhatsApp** usually shows a small thumbnail in chats. It generally needs an og:image at least around 300 px on each side, and it's much more reliable when the file is under roughly 300 KB. Large files are a common reason for a blank WhatsApp preview.
- **iMessage, Slack, Discord and Telegram** each have their own card shape, mostly wide or square.

Because one image serves all of them, the practical rules are:

1. Keep the important content (product, logo, price) **in the centre**, away from edges a wide or square crop might cut.
2. Use **at least 1200 px** on the long side so cards look sharp on high-density screens.
3. Use **JPG for photos** to keep the file small. Use PNG only where you really need transparency.
4. Make text **large**. As a rough guide, text smaller than about 5% of the image height is hard to read in a chat thumbnail.
5. Use an **absolute HTTPS URL** in the tag. Shopify's CDN URLs (`cdn.shopify.com`) work fine.

A 1200×1200 square with centred content is a reasonable compromise when you can't serve a different image per platform. Square-friendly platforms show it whole, and wide ones may trim the top and bottom, which centred content survives.

## Design choices that actually help

**Show the product, not just the brand.** A logo-only card for every product makes them all look identical in a chat. Let the product fill most of the frame and keep the logo small in a corner at reduced opacity.

**Use several photos for sets and variants.** A two- or three-photo layout shows colourways or bundle contents at a glance. Four photos is about the limit before each one gets too small in a thumbnail.

**Add price and discount text only if it stays accurate.** "$34" on a share card helps in a WhatsApp group comparing gift ideas. It hurts if it shows last month's price. Know how the image gets updated before you put a price on it.

**Hide badges that have nothing to say.** A "0% OFF" badge on a full-price product looks broken. Badges should only appear when there's a real discount.

**Avoid near-duplicate photos.** If your first three images are the same product on white at slightly different angles, a multi-photo layout just repeats itself. Pick shots that differ in colour or context.

## Setting it up: a practical order

1. **Audit what you have.** Run a product, a collection, a blog article and your homepage through a preview checker or the Facebook Sharing Debugger (developers.facebook.com/tools/debug). Note which show no image, the wrong image or a weak one.
2. **Set the store-wide fallback image** in Shopify (theme editor Social media settings, or Online Store > Preferences), even if you plan to use an app. It covers any page type the app doesn't.
3. **Fix collection images.** Give every collection you promote its own image in **Products > Collections**. Themes and many apps use it.
4. **Install the app and turn on its app embed** in the theme editor. A lot of "not working" reports come down to the embed being off.
5. **Check the page source for duplicate og:image tags** on a product page.
6. **Design on your worst product,** the one with the dullest packshot. If it looks good there, it'll look good everywhere.
7. **Test on real platforms.** Send a link to yourself on WhatsApp and paste one into a LinkedIn draft. Debuggers are useful, but the real apps are what customers see.
8. **Force a refresh where the old card is cached.** In the Facebook Sharing Debugger, click **Scrape Again**. LinkedIn's Post Inspector (linkedin.com/post-inspector) does the same for LinkedIn.

## Mistakes to avoid

The most common one is expecting old shares to update. Platforms cache previews, so a link sent in a WhatsApp chat last week keeps its old card. New shares pick up the new image once the platform fetches the page again, and no app can change a card that's already sitting in someone's chat.

Merchants also tend to test only the homepage. It almost always uses the fallback image, while the real problems are on product and collection pages. Test those.

Two og:image tags on a page cause most "it works on Facebook but not WhatsApp" complaints. The same thing happens when you run two share-image apps at once, or keep an old SEO app that also writes Open Graph tags. Pick one source.

App embeds are turned on per theme. If you switch themes, turn the embed on in the new theme's editor before you publish it.

Plan when a sale design comes off, not just when it goes on. A "40% OFF" card that keeps circulating after the sale ends creates awkward customer emails.

Finally, platforms can't fetch pages behind a storefront password. If your store is still locked, previews stay empty no matter what tags you have.

## How Yuhu — Social Media Share Image helps

Social Media Share Image by Yuhu Apps (listed in the Shopify App Store as "Yuhu ‑Social Media Share Image") generates a 1200×1200 og:image for products, collections, blog articles and, once you switch it on, pages. You turn on a theme app embed with no coding, and the app hides your theme's duplicate og:image tags (you can undo that with "Remove theme changes"). You can combine 1 to 4 product photos, add a logo, price or discount overlays, or override the image for a single product. Existing images aren't redone when you change the design, so you run Regenerate or bulk regenerate on the dashboard. Setup steps are in [How to Set Up a Shopify Social Share Image for Every Product and Page](https://yuhuapps.com/docs/shopify-social-share-image.md), and the app is on [the Shopify App Store](https://apps.shopify.com/social-media-share-image).

## FAQ

### Does Shopify have a built-in og:image setting?

Yes, partly. Most themes output og:image automatically from the product's featured image, the collection image or the article's featured image. For pages without their own image there's a store-wide social sharing image, found in the theme editor under Theme settings > Social media in most current themes, or under Online Store > Preferences in some stores. There's no built-in way to design share images with logos, multiple photos or price text.

### Why does Facebook show my logo instead of the product?

Usually the page has no og:image of its own, so Facebook uses the store-wide fallback (often your logo) or picks an image from the page. It also happens when the product image is too small or there are two og:image tags. Check the page source for a single og:image pointing at the product, then click Scrape Again in the Facebook Sharing Debugger.

### Why is my Shopify link showing no image on WhatsApp?

Common causes are an image file that's too large (aim for under roughly 300 KB), an image smaller than about 300 px, a page with no image and no fallback set, or a storefront that's still password-protected. Fix the cause, then share the link again in a new chat, because WhatsApp keeps the old card for links it has already previewed.

### How do I change the share image for one Shopify product?

Without an app, reorder the product's media in the Shopify admin so the image you want comes first. Most themes use that featured image as og:image. If you want a designed or custom image for just that product without changing its gallery order, you'll need an og:image app that supports per-product overrides.

### Why does my link preview still show the old image after I changed it?

Platforms cache a preview the first time they fetch a link. Use Scrape Again in the Facebook Sharing Debugger or LinkedIn's Post Inspector to make them fetch the page again. Cards already sent in chats don't change. Only new shares show the new image.

## Related docs

- [Shopify Social Share Image Setup](https://yuhuapps.com/docs/shopify-social-share-image.md)
- [Link Preview Checker (Free Tool)](https://yuhuapps.com/docs/test-shopify-link-preview-checker.md)
- [Duplicate og:image tags and theme changes](https://yuhuapps.com/docs/theme-changes-duplicate-og-tags.md)