Bold Upsell Styling Guide
Bold Upsell offers inherit your theme fonts, colors, and button styles by default, so your offers feel native to your storefront. You can also fine-tune how each offer looks, what it says, and where it appears.
This article walks through every styling option in the offer builder and how each one affects the storefront.
Getting Started
When an offer renders on your store, Bold Upsell reads CSS variables from your active theme so the offer matches without any manual setup. The following inherit from your theme:
Heading and body fonts.
Text and background colors.
Button color, text color, and border radius.
Borders and surface colors used on cards.
If your theme uses Online Store 2.0 (Dawn or any modern theme based on it), styling is inherited automatically. If you use a heavily customized older theme and the offer looks off, please contact our Customer Success team and we can help.
Display locations
The location determines where on your store the offer appears. Available locations depend on the offer type:
Product page - appears on the product detail page below the add-to-cart button or in a pop-up after an add to click event.
Cart page - appears on the dedicated cart page.
Cart drawer - appears inside the slide-out cart drawer on themes that support it.
Checkout (Shopify Plus only) - pre-purchase widget shown on the checkout page.
Post-purchase - shown immediately after checkout on the thank-you page.
Each offer type only supports the locations that make sense for it. For example, a cross-sell offer can show on the product page or cart, while a Checkout offer only shows in checkout.
Display styles
The style controls how the offer looks at its location. Available styles depend on the location and offer type. These styles include the following:
Popup
A modal that appears over the page. Good for grabbing attention right after a customer adds a product to their cart. Best used for cross-sell, upsell, and free gift offers triggered from the cart.
Embedded
Inline content placed directly on the product page or cart page. Customers see the offer in the page flow rather than as an interruption. Best used on product pages and cart pages where you want the offer to feel like part of the storefront.
List
Multiple offer products stacked vertically, each with its own add button. Good when you have two or three add-on products and want the customer to compare them at a glance.
Carousel
Multiple offer products in a horizontally scrollable strip with navigation arrows. Good when you have several recommended products and want to save vertical space.
Tips for picking a style
Use Popup for high-intent moments like add-to-cart.
Use Embedded on product pages so the offer is always visible without interrupting browsing.
Use List when the customer is comparing two or three close alternatives.
Use Carousel when you have four or more products to show.
Text customization
Every offer has three text fields you can edit:
Title - the main message shown at the top of the offer. Keep it short and benefit-focused, for example "Customers also love" or "Complete the look".
Description - a short subtitle under the headline. Use it to add detail or urgency, for example "Free shipping on orders over $50".
Button Text - the call-to-action text on the add button. Defaults vary by offer type (Add to cart, Yes please, Claim my gift). Override it to match your brand voice.
Leave any field blank to fall back to the default text for that offer type.
Product display settings
Some offer types expose extra controls for how the product itself is shown:
Allow quantity selection - lets the customer pick how many of the offered products they want to add.
Allow adding a +1 - this is relevant for pop up offers only. When enabled, this setting will keep the pop-up open after an offer is added so that the customer can choose to add an additional item from the pop-up. When disabled, the pop-up will close on its own after any offer product is accepted.
Preview your styling
Every offer in the builder has a live preview panel on the right side. As you change the location, style, headline, description, and button text, the preview updates so you can see exactly what customers will see.
To check how the offer looks on your live store:
Save the offer.
From the Offers table, click the actions menu on the offer row.
Click Preview on Store. This opens the storefront with the offer trigger so you can experience it as a customer.
FAQs
Will my offer match my theme automatically?
Yes. Bold Upsell inherits your theme CSS variables for fonts, colors, button styles, and border radius. No manual setup is required on Dawn or other Online Store 2.0 themes.
Can I change the colors of an offer directly?
Yes, you can open your theme editor and navigate to the Bold Upsell theme embed. In this section, you can choose to overwrite your theme defaults and set whatever styling you would like. Please note this styling will apply to all your offers.
Will my offers be mobile friendly?
All offer styles are responsive. Popups become full-width sheets on small screens, carousels and lists stack appropriately, and font sizes scale. This is expected behavior so the offer reads well on every device.