Customizing widget appearance
Use the visual customizer to set colors, layout, text, and button labels for your upsell and gift-with-purchase widgets — no code required.
Every storefront widget has a visual customizer in the app admin where you set its colors, layout, and text. You preview your changes as you make them, so the widget always matches your store before it goes live. No theme code is required.
This guide covers how to style the offer widgets that appear on your storefront pages — mainly Product Recommendations (pre-purchase) and Gift with purchase offers. To style the cart drawer itself, see Llama Cart features.
This page is the high-level overview. The exact fields, defaults, and limits differ from one layout to the next — for the complete field-by-field breakdown (every setting, its default, and its precise min/max), see the Widget customizer reference.
Checkout upsells and post-purchase offers are styled in their own dedicated customizers, not here. See Checkout Upsells and Designing the post-purchase offer page for those campaign types.
Where to find the customizer
Each campaign has its own widget, and each widget has its own customizer. Open the campaign you want to style, then look for its appearance or customizer settings. Anything you change there applies only to that campaign's widget.
You can also set global styles — a primary color, font, and spacing — once in Settings, and they apply to every widget. Per-campaign settings override the global styles, so use globals for the look you want everywhere and override only where a specific campaign needs something different.
Every storefront widget renders inside its own isolated container. Your theme's CSS can't accidentally change a widget's appearance, and a widget's styles can't leak into your theme — so what you set in the customizer is exactly what shoppers see.
What you can customize
For most campaign types, the customizer lets you set:
- Layout — for example, slider versus list, and how many products are shown
- Colors — buttons, backgrounds, and text
- Fonts and border radius — type size and how rounded corners appear
- Button labels — such as "Add to Cart", "View Product", or your own text
- Heading and subheading text — the widget title and description
- Price display — whether to show the price, the compare-at price, and a discount badge
Choose a layout
Each campaign type comes with its own set of widget formats, so the offer fits where it appears:
| Campaign type | Widget formats |
|---|---|
| Product recommendations (pre-purchase) | Horizontal slider, vertical list, or scrollable list |
| Gift with purchase | Slider, list, or list (v2) |
| Auto-add | No visible widget — the product is added silently |
| Checkout upsells | Embedded widget inside the Shopify checkout page |
| Post-purchase | Full-page offer shown after checkout completes |
| Unlock (content unlock) | Threshold-progress widget that reveals an offer when the cart reaches the set amount |
Auto-add campaigns have nothing to style, since no widget is shown.
Slider settings
When you choose a slider layout, you can fine-tune how it behaves:
- Products per view — how many products appear at once, and their size per slide
- Slide spacing — the gap between slides
- Slider controls — show navigation arrows and bullets so shoppers can move through the products
Set colors and styles
The appearance controls let you match the widget to your brand. The exact set of color controls depends on the layout, but the common ones are:
| Control | What it sets | Notes |
|---|---|---|
| Primary color | The widget's accent / button color | Used by Gift with purchase and the scrollable list layout |
| Secondary color / Background Color | The widget container background | Default light grey #f6f6f6 |
| Primary text color | The color of the widget's text | |
| Add to cart button color | The fill of the add-to-cart button itself | Pre-purchase only — separate from the primary color |
| Add to cart button text color | The label color inside the add-to-cart button | Pre-purchase only |
On Product Recommendations (pre-purchase) widgets, the add-to-cart button has its own dedicated color controls — Add to cart button color (default dark #121212) and Add to cart button text color (default white #fff) — that are independent of the primary and secondary colors. This lets you give the button a high-contrast look without recoloring the rest of the widget.
Because the add-to-cart button color and text color are distinct fields, you can keep a neutral widget background while making the buy button pop. If your button text looks invisible, check that the Add to cart button text color contrasts with the Add to cart button color — they're set separately.
Product CTA Layout
On the pre-purchase slider layout, Product CTA Layout controls how each product card stacks the call-to-action relative to the product:
- Vertical (default) — the add button sits below the product details
- Horizontal — the add button sits beside the product details
Pick Horizontal when the widget is in a narrow column where stacked cards would get too tall.
Border radius
Pair the colors with the font and Border radius settings to control how rounded the corners look across the widget's elements. Border radius is a slider with a range of 0–20px (default 0, fully square corners) — set it higher for a softer, rounded look.
For anything the built-in controls don't cover, every layout also has a Custom CSS field. See the Custom CSS guide for where to write it and how widget style isolation affects your selectors.
Edit the text and buttons
Make the widget speak in your store's voice:
- Heading and subheading — set the widget title and a short description
- Button labels — write your own call to action, such as "Add to Cart" or "View Product"
- Add-button states — for the add button, you can customize the label for each state: Add (default
Add), Adding (defaultAdding...), and Added (defaultAdded)
On slider layouts, each add-button label (Add / Adding / Added) is capped at 50 characters — the field stops accepting input once you reach the limit. This maxLength is only enforced on the slider layout. The list and scrollable-list layouts use the same labels but don't enforce the 50-character cap, so a very long label there can overflow or wrap inside the button. Keep labels short regardless of layout so the button stays readable on mobile.
Product click action
Choose what happens when a shopper clicks a product in the widget:
- Quick view — open a modal to preview product details without leaving the page
- Open product page — send the shopper to the full product page
- No action — the default; clicking the product does nothing
Control which details show
Use these toggles to keep the widget focused on what matters:
- Price, compare-at price, and discount badge — show or hide each one. The widget shows the configured discount as a badge rather than the final checkout price, which is applied automatically when the shopper adds the product.
- Hide out of stock — out-of-stock products won't appear in the widget
- Hide added offers — offers already in the cart are hidden from the widget
The widget doesn't show the final checkout price. The offer's discount is applied automatically at checkout, and the widget displays the configured discount percentage as a badge.
Gift with purchase widgets
Gift with purchase widgets show a progress bar toward the gift threshold, with three message states you write yourself:
On progress
The message shown while the shopper hasn't reached the threshold yet — for example, telling them how much more to spend to unlock the gift.
On valid
The message shown once the threshold is met and the gift is unlocked.
On invalid
The message shown if the cart drops back below the threshold after the gift was unlocked.
Gift with purchase offers can include Shopify "unlisted" products — products published to your sales channel but hidden from search. These are shown in the widget by default. To keep them out of the offer, turn on Hide unlisted products in the gift-with-purchase customizer.
Quick view
The Quick View modal lets shoppers preview product details before adding to the cart, without navigating away from the page they're on. When it's enabled, an eye icon appears next to the add-product button.
Tips for a polished look
Where to go next
Theme cart type & compatibility
Set your theme cart type to Drawer or Pop-up, run the built-in 5-point compatibility check, and fix conflicts so Llama Cart opens reliably.
Designing the post-purchase offer page
Style the full-page post-purchase offer with rich-text titles, dynamic tags, downsell variants, and configurable buttons and labels.