Articles on: General

How to customize the look of an offer (layout presets, Design Mode and images)

Every offer can match your store's look. Start from a layout preset, then fine-tune colors, typography, buttons and images on the offer's Styling tab, or open Design Mode to click any part of the live preview and edit it directly. To style all offers at once, use store-wide styling.


  • Where: open an offer → Styling tab
  • Fastest: pick a Layout preset
  • Most visual: Open Design Mode, click an element, double-click text to edit it in place



Design Mode: an offer preview with the title selected for inline editing and an inspector showing only its settings


Store-wide styling or per-offer styling


On the Styling tab, Use store-wide styling applies your store's global styling to the offer. Turn it off to style this offer on its own. Changes to store-wide styling affect every offer that uses it; Design Mode asks you to confirm before saving them.


Start from a layout preset


Under Layout preset, pick a starting point. Applying a preset replaces the offer's current styling, and you can fine-tune everything afterwards.


Preset

Best for

Stacked

Full-width cards, image on top

Carousel

Several products in a horizontal scroll

Duo

Two products side by side, for pairings

Compact Row

Small image left, full-width button; checkout and drawers

Thumbnail List

Several products in tight spaces like checkout and cart drawers

Highlight

One product with maximum visual impact

Feature Row

A larger image left, price above the button

Checkbox Add-on

A tiny thumbnail with a checkbox, for cheap add-ons like shipping protection or gift wrap

Showcase

Half-width image beside the content; cart and product pages

Spotlight (post-purchase)

One product, wide image, centered text

Grid (post-purchase)

Several products side by side

Banner (post-purchase)

A compact vertical list with short, wide images


Fine-tune the styling


The Styling tab has four groups:


  • Container Styling: background, border, spacing
  • Typography: title, price and text styles
  • Button (CTA): color, shape and text
  • Image: position, aspect ratio, width, object fit, image carousel and thumbnails


Other layout options include Price Position, Variant Selector style, Multi-Product Layout (multiple products wrap into rows) and Carousel Navigation. Desktop and mobile can have different values.


Use Design Mode


Clicking the price in the offer preview opens its typography settings


  1. On the Styling tab, click Open Design Mode. You get a full-width live preview.
  2. Click any element (title, price, image, button) to see only that element's settings on the Elements tab.
  3. Double-click any text to edit it in place.
  4. Use the Layout tab to switch layouts.
  5. Click Done.


Automatic (ShopBrain) offers preview with real products from your store, so what you see matches what shoppers get.


Add custom images to an offer


Adding a custom image from Shopify Files or an image URL to an offer


You can show a lifestyle photo or bundle mock-up on an offer without changing the product's images in Shopify:


  1. On the Offers tab, open the product and find Image order.
  2. Click Add a custom image from your Shopify Files, or paste a Custom image URL and click Add URL.
  3. Reorder images with the arrows. The first image becomes the featured image. Click an image to include or exclude it.


Custom images aren't added to the product itself. Upload new images in Shopify admin → Content → Files.


Other display options


  • Swap original price and compare at price: show the compare-at price as the main price (Behavior tab → Pricing Display)
  • Countdown timer: an optional timer on the offer (Behavior tab)
  • Learn more link: link each product to its storefront page (Behavior tab → Product Link)
  • Add-to-Cart Presentation: Button, Checkbox or Toggle


FAQ


Can I style checkout offers?
Yes. Checkout offers also follow your Shopify checkout branding (buttons and colors). See How to customize the design of your checkout.


Why can't I style a Free Gift offer?
Free Gift offers aren't visible to shoppers: the product is added to the cart automatically, so styling doesn't apply.


Can I style post-purchase pages one by one?
Yes. See How to build a post-purchase upsell funnel → "Give each page its own design and text".



Updated on: 14/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!