# How to Design Branded Social Share Images for Your Shopify Store > Customize your Shopify social share images in Settings: add your logo, brand color, price and discount text overlays, a sale badge, and one-click style presets — with a live preview of the og:image. Getting started · 5 min read · Updated 2026-07-13 Canonical: https://yuhuapps.com/docs/customize-social-share-image-design 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. ## FAQ ### 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. ## Related - [How to Set Up a Shopify Social Share Image for Every Product and Page](https://yuhuapps.com/docs/shopify-social-share-image.md) - [Set a Custom Social Share Image for a Single Shopify Product](https://yuhuapps.com/docs/per-product-share-image-shopify.md) - [Shopify Social Share Image Not Showing? Enable the App Embed](https://yuhuapps.com/docs/enable-share-images-theme-embed.md)