Product Share Image Collage: How to Plan, Build and Test One

A product share image collage puts 2 to 4 of a product's photos into one og:image, so a link shared on Facebook, WhatsApp or X shows colourways, angles or a bundle's contents instead of a single shot. It works best for products with visible variety, and it backfires when the panels get too small to read or the photos look alike. Pick photos that differ clearly, keep the important part of each panel near the centre, and test the result in each platform's preview before you share widely.

Why a collage changes how a shared link performs

When someone pastes your product URL into a chat or a post, the platform fetches the page's og:image and shows it as the preview card. On most Shopify themes, that image is the product's featured image (the first photo in the product's media list). For a lot of products that's a white-background packshot, and it's the same image every competitor in the category shares.

A collage gives the card more to say. A sock brand sharing its new four-colour pack can show all four colours instead of just navy. A candle shop sharing a gift bundle can show the three candles and the box. Someone scrolling past a group chat sees what's on offer without tapping.

The tradeoff is space. The preview card is often small, sometimes thumbnail-sized in WhatsApp, and every extra panel shrinks each photo. So a collage only makes sense when the extra photos add information.

When to use a collage and when to stick with one photo

A useful test: shrink your draft collage to about 300 pixels wide on your screen. If you can't tell what each panel shows, use fewer panels.

Choosing the photos

The photos you pick matter more than the layout.

Choose photos that differ. Three angles of the same white mug on a white background read as one blurry repeat. The front of the mug, the mug in someone's hand and the mug with coffee in it read as three different things.

Lead with the best photo. People read collages left to right (or top-left first in a grid). Put the most recognisable shot in that first slot, usually the one you'd pick if you could only have one.

Mix packshots with context, carefully. One lifestyle shot next to two clean packshots usually works. Four busy lifestyle shots side by side tend to turn into visual noise at small sizes.

Watch colour and brightness. If one photo is warm and dim and the others are bright studio shots, the collage looks pieced together. Colourful photos also stand out more in a feed than pale ones, which is one reason sellers of apparel and homeware often favour colourway shots for the share image.

Match the crop. If one photo is a full-length model shot and the next is a close-up of the fabric, scale jumps around. Keep subjects at a similar size across panels.

Examples from real store types

• Apparel, one style in four colours: four panels, one per colour, all the same pose or flat-lay angle. Lead with the bestselling colour.
• Skincare kit: two panels. The whole kit laid out, then the products in use or the texture close-up.
• Furniture: usually one photo, the room shot. A sofa split into four panels loses the scale that sells it.
• Collection of new arrivals: three or four different products, each from its own featured image, so the card reads as "new range" rather than one product.

Sizes and formats per platform

Platforms crop and scale share images differently, so plan the collage around the safest shape and keep important content away from the edges.

A few rules that hold across all of them:

• Square or wide both work, but crops differ. A square 1200×1200 image may be shown square on some platforms and cropped or letterboxed on wide ones. A wide 1200×630 image may be cropped to a square thumbnail in chat apps. Whichever you choose, keep each panel's subject in the middle band.
• Side-by-side panels survive crops better than grids. In a 2×2 grid, a wide crop can cut the top and bottom rows in half. Panels in a single row lose a little at the top and bottom but every product stays visible.
• Use JPG for photos. PNG collages of photos get large quickly. A large file can fail to load in some apps, and the card shows up blank.
• Use absolute HTTPS URLs. Shopify's CDN URLs already are, but if you host a collage somewhere else, make sure the og:image URL is public and HTTPS.

Building a collage without an app

You can do this with Shopify and a design tool, though it takes some work per product.

1. Make the image

In Canva, Photoshop, Figma or similar, start a 1200×630 canvas (or 1200×1200 if you prefer square). Split it into 2, 3 or 4 equal columns, drop in your product photos and crop each to fill its column with the subject centred. Leave a small gap or thin divider between panels so the photos don't blur together. Export as JPG at around 80% quality.

2. Get it into the og:image tag

Shopify doesn't have a per-product "share image" field out of the box. You have three options:

1. Make the collage the product's first image. Simple, but it also becomes the main photo on the product page, in collection grids and in Shopping feeds. Usually not what you want.
2. Set a store-wide fallback. Online Store > Preferences has a social sharing image, but that's used on pages without their own image (like the home page), not on product pages. It won't help with product collages.
3. Use a metafield and a small theme edit. In Settings > Custom data > Products, add a metafield definition such as custom.share_image of type File (image). Upload each collage to that metafield on the product. Then, in your theme code (often snippets/meta-tags.liquid on Dawn-based themes), change the logic so that when the metafield has a value, its image URL is used for og:image and twitter:image, with the featured image as the fallback.

Option 3 is the clean manual route. Duplicate your theme before editing, and check the page source afterwards to make sure there's only one og:image tag. If your theme or another app also prints one, platforms may pick either.

3. Keep it maintained

A manual collage is a static file. If you add a new colourway, drop one, or reshoot the photos, the share image stays as it was until you rebuild it. Set a reminder to check share images whenever you update a product's photos. That's the main cost of doing this by hand across hundreds of products.

Testing the result

Don't trust the design file. Check what each platform actually renders.

• Facebook: paste the URL into the Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again" to fetch the newest image.
• LinkedIn: the Post Inspector (linkedin.com/post-inspector) shows the card and refreshes LinkedIn's copy.
• X: the old Card Validator preview is gone, so start a post in the composer and look at the card before publishing.
• WhatsApp and iMessage: send the link to yourself. WhatsApp caches previews, so a link you shared before may keep showing the old image for a while.
• Several platforms at once: a multi-platform preview tool lets you see the same URL rendered as Facebook, WhatsApp, X, LinkedIn and others side by side, which is the quickest way to catch a crop that cuts off a panel.

Remember that platforms cache. A link shared last month keeps its old card until the platform fetches the page again. Facebook and LinkedIn let you force that with their tools. Chat apps generally don't, so new shares pick up the change while older messages may not.

Mistakes to avoid

Four near-identical packshots. The most common one. If your product has five white-background photos from slightly different angles, a four-panel collage of them looks like a glitch. Use two clearly different photos, or one.

Too many panels for detailed products. A jewellery store with a four-panel ring collage ends up with four tiny gold smudges. Detail products need fewer, larger panels.

Text right at the edges. If you add a price or "New" label, keep it away from the edges, where wide and square crops cut it off.

Prices baked in and forgotten. A collage showing "$49" after you've moved the price to $55 erodes trust fast. If you put prices on share images, update them whenever prices change, or leave prices off manually built images.

Mixed aspect ratios inside the collage. Dropping a portrait photo into a square slot without cropping leaves bars or squashes the image. Crop each photo to its panel shape.

Two og:image tags on the page. If your theme prints the featured image and your edit or an app prints the collage, platforms may pick either. View the page source and search for og:image to confirm there's just one.

Using a collage everywhere by default. Collages suit products with variety. Apply them selectively, and keep a single strong photo for hero products.

A simple rollout plan

1. List your top 20 most-shared products, the ones in ads, influencer posts and customer chats.
2. Sort them using the table above: collage or single photo.
3. Build collages for the "collage" group first, and test five of them on Facebook, WhatsApp and X.
4. Fix whatever the tests show (usually panel count or crop), then do the rest.
5. Revisit share images whenever photos, colourways or prices change.

How Yuhu — Social Media Share Image helps

Social Media Share Image (by Yuhu Apps) builds the collage for you: it places 1 to 4 product photos side by side in a 1200×1200 share image and serves it as the page's og:image, with no coding. You set a store-wide default layout, see each option on a real product in the "Preview transformations" wizard, and can turn on smart photo selection to favour colourful photos and skip near-duplicate white-background shots. For a single product you can pick exactly which photos go in, then save. The steps are in setting a custom share image for one product.