How to Design Branded Social Share Images for Your Shopify Store
A plain product photo is a missed branding opportunity. In Social Media Share Image, the Settings page is where you turn that photo into a designed, on-brand preview — your logo in the corner, your brand color, the product's price and discount drawn on top, and a sale badge that appears only when there's actually a discount. Every control has a Live preview beside it so you can see the composed 1200×1200 share image update as you type, plus an exact server-rendered version that matches what your store will actually serve. Here's what each section does. Nothing is saved until you press Save.
1 Start from a style preset (optional)
The fastest start is the Style presets row at the top: one click fills the overlay and badge fields below with a ready-made look, and your uploaded logo is kept. The presets are Clean minimal (just your logo, no text or badge), Title & price (product title and price on a dark bar), On sale (title plus a red discount badge), Black Friday, Elegant (large centered title, no background) and New arrival (a green "NEW" badge with the product title). A preset is just a starting point — every field stays editable afterwards.
2 Set the general behavior
The General section controls how images are produced. The default transformation chooses your collage layout — Combine (merge) the first N product images side by side — which we cover in its own guide. Automation keeps new and updated products' images generating on their own (Automation active - new and updated products will get processed automatically using the default transformation). Smart photo selection automatically picks a product's best photos and skips white-background duplicates instead of just taking the first few. There's also a toggle to extend share images to your store pages.
3 Add your logo in the Brand kit
The Brand kit section adds your logo as a watermark on every generated share image. Paste a Brand logo URL (a PNG with a transparent background works best) or use Upload logo image…. Then set Logo position (any of the nine compass points, e.g. top-left through bottom-right), Logo size (% of image width) and Logo opacity (%). Also here: a Brand color (hex) used as the background for text-only share images (like blog posts or pages without a photo), and a Fallback image URL for pages and articles that have no images of their own.
4 Draw text and a badge with live tokens
The Text overlays section is where price and discount get onto the image. In Overlay text, type any message using live tokens — {title}, {price}, {compare_at_price} and {discount} — which are replaced per product when the image is generated. Control its Text position (top, center or bottom), Text color (hex), an optional Text background color, and Text size (px on a 1200px image). Below that, add a small corner Badge text such as "{discount}% OFF" or "SALE" — it's hidden automatically when a token has no value, so a full-price product simply shows no badge. Pick the Badge position and Badge background color too.
5 Turn on Pinterest pins (optional)
The Pinterest section can Generate Pinterest pin images — an extra tall 1000×1500 image sized the way Pinterest displays pins, in addition to the standard square share image, and it adds a Pinterest "Save" button to product and collection pages. Leave it off if Pinterest isn't part of your plan.
6 Schedule a seasonal look (optional)
Running a sale? The Scheduled campaign look section lets you pick a Campaign preset plus a Start date and End date. Your share images switch to that look automatically for the window and revert when it ends — handy for Black Friday or a launch — with no need to remember to change the settings back yourself.
7 Save and watch it apply
Press Save. Your settings apply to newly generated images immediately, and because changing the design regenerates images, your catalog's share images update to match. Use the Live preview and the exact server-rendered preview beside the form to sanity-check the look before you save — the generated images use these exact settings.
Frequently asked questions
How do I add my logo to my Shopify social share images?
Open Settings, and in the Brand kit section paste a Brand logo URL (a transparent PNG works best) or use Upload logo image…. Then set the logo's position, size and opacity. The Live preview shows it composited onto a sample 1200×1200 share image before you save.
Can I show the product price and discount on the share image?
Yes. In the Text overlays section, use tokens in the Overlay text field — {title}, {price}, {compare_at_price} and {discount} — and they're filled in per product when the image is generated. You can also add a badge like "{discount}% OFF" that hides itself automatically when there's no discount.
What do the style presets do?
Each preset (Clean minimal, Title & price, On sale, Black Friday, Elegant, New arrival) fills the overlay and badge fields with a ready-made look in one click, keeping your uploaded logo. It's a starting point — every field stays editable, and nothing is saved until you press Save.
Will changing the design update images I already generated?
Yes. Saving new design settings applies to newly generated images, and changing the layout or look regenerates your images so the catalog matches your current settings.
What image size does the app generate?
The standard share image is 1200×1200. If you enable Pinterest, the app also generates a tall 1000×1500 pin image sized for how Pinterest displays pins.
How do I make my share images match a seasonal sale automatically?
Use the Scheduled campaign look section: pick a campaign preset and a start and end date. The share images switch to that look for the window and revert automatically when it ends.
Where does the brand color get used?
The Brand color (hex) is used as the background for text-only share images — for example blog posts or pages that don't have a photo of their own — so those previews still look on-brand.
