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, 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.
Don't have Yuhu yet? Install it from the Shopify App Store →
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 gives new products and collections a share image on their own, and an hourly sync picks up new pages and blog articles. Images that already exist are re-rendered when a product's photos change, or when text your design shows (such as the title or price) changes. Smart photo selection automatically picks a product's most colorful photos and skips near-duplicate white-background shots 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 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 is saved in a product or collection metafield. The app does not add a Pinterest "Save" button or pin tag to your storefront. Leave it off if you don't use Pinterest.
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. The app swaps your settings to that look on the start date and restores your normal branding after the end date, checking hourly in your shop's timezone (images that already exist are re-rendered in the campaign look when it starts and back in your normal look after 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, but images you already generated keep their old design until you select them on the dashboard and use bulk Regenerate. 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?
Not by itself. New design settings apply to newly generated images. To update images you already generated, select them on the dashboard and use bulk Regenerate, or regenerate a single image.
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 app switches your branding to that look on the start date and restores it after the end date, checking hourly in your shop's timezone. Images that already exist are re-rendered automatically when the campaign starts and again after it ends.
Where does the brand color get used?
Currently it isn't. Settings collects a Brand color (hex), but the generated images don't use it. For pages and articles without a photo, set a Fallback image URL in the Brand kit instead.