> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsellplus.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/a/b/f/a/abfa0cd47f75e80/design-mode-inline-editing_1efoebk.png)

## 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](https://storage.crisp.chat/users/helpdesk/website/-/a/b/f/a/abfa0cd47f75e80/click-to-style-preview_otxup.png)

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](https://storage.crisp.chat/users/helpdesk/website/-/a/b/f/a/abfa0cd47f75e80/offer-custom-images_1r5v03n.png)

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](https://help.upsellplus.com/en/article/how-to-customize-the-design-of-your-checkout-11rgf76/).

**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](https://help.upsellplus.com/en/article/how-to-build-a-post-purchase-upsell-funnel-1v9u1ll/) → "Give each page its own design and text".

## Related articles

- [How to use Global Display Settings](https://help.upsellplus.com/en/article/how-to-use-global-display-settings-1geiviu/)
- [Mobile optimization for your upsell offers](https://help.upsellplus.com/en/article/mobile-optimization-for-your-upsell-offers-1re1ec/)
- [How to add translations to your offers](https://help.upsellplus.com/en/article/how-to-add-translations-to-your-offers-12s8iz4/)
- [How to build a post-purchase upsell funnel](https://help.upsellplus.com/en/article/how-to-build-a-post-purchase-upsell-funnel-1v9u1ll/)