Storefront display

Everything on this page needs the theme app embed switched on. If you haven’t done that yet, start with Getting started.

Customise the look

In the app menu, click Customise.
Pick a widget and click Customize on its card.
Change the settings. A preview on the page updates as you go.
Click Save in the bar at the top of the screen.

These settings are store-wide: they apply to every campaign that uses that widget.

Gift Selection Popup

The popup where shoppers choose a free gift. It appears for free gifts when there’s a choice to make, and for magic links, QR codes and behaviour triggers that come with gift products.

Product Layout: show products as a Carousel, a Grid or a List (minimal).
Header: turn the header on or off and set its icon, title and subtitle.
Button Labels: the select, add to cart and continue shopping text, plus an optional link to your terms and conditions page. The link only shows if you fill in both the text and the page.
Discount Badge: show the saving as a percentage or an amount.
Inventory Handling: hide out-of-stock gifts or show them as out of stock.
Color Palette and Layout & Styling: colours and corner radius for the popup and its buttons.

Info Popup

The popup that tells shoppers about an offer from a magic link or a behaviour trigger.

Layout Style: Classic (image on top), Split (image beside the content, on the left or right) or Minimal (text only).
Color Palette: button, overlay, border, heading, body text and link colours.
Close Button: shape, size, icon weight and colours.
Layout & Typography: font, corner radius, shadow and text sizes. Leave Font Family blank to use your store’s font.

Floating Button

When a shopper closes an offer popup, a small floating button stays on screen so they can open it again.

Colors: background and icon colour.
Position & Size: which corner of the screen, the button size and how far it sits from the edges.
Icon: gift, tag, percent or cart.

Bundle Widget

The bundle offer on the product page, where shoppers tick the items they want and see a live total.

Colors: card, title, accent (button, checkboxes and selected items) and savings colours.
Content: a Default headline for bundles that don’t set their own, the Add to cart button text, and the Minimum selection message shown while fewer than 2 items are ticked.
Layout: show or hide the crossed-out subtotal, the savings line and the “Save X%” tag.

Cart Goal Widget

The progress bar in the cart drawer or on the cart page that shows how close the shopper is to a cart goal reward.

Colours: card, text, the empty track, and the fill while in progress and once unlocked.
Default copy: the In-progress message used when a cart goal has no message of its own, and the Unlocked message. You can use {{remaining}}, {{reward}} and {{threshold}} in the in-progress message.
Tiers: for bars with more than one tier or a free gift, choose whether gift tiers show the product image or a gift icon, the image size, and the layout: a next-reward card, milestones along the bar, or a banner with big circles.

Where widgets appear

Popups and the floating button appear on top of the page. Other widgets either place themselves on your theme or go where you put them as theme app blocks. To add a block, open the theme editor, go to the page template, click Add block and pick it from the app’s blocks:

On product pages: Bundle widget, Upsell widget, Quantity savings chart, Quantity picker and Quantity progress.
On the cart page or in the cart drawer: Cart goal progress.

The bundle and upsell widgets place themselves on the product page if you don’t add the block, and the cart goal bar and quantity progress also place themselves in the cart drawer. Adding a block gives you control over exactly where it goes.

Advanced settings

Most stores can leave these alone. Find them under Advanced settings in the app menu, and click Save in the bar at the top after any change.

Cart Drawer Settings

These control what happens when the app adds a product to the cart for the shopper, such as a free gift.

Setting	What it does
Refresh Mode	How the cart drawer is refreshed after a product is added. Auto (the default) tries both methods; Events Only leaves it to your theme; Section Only only reloads the cart section.
Section ID	For themes whose cart drawer section has an unusual name. Leave blank to use the common ones (`cart-drawer`, `cart-notification`, `ajax-cart`).
Event Name	An extra event to send if your theme listens for its own cart update event. The standard `cart:updated` and `cart:refresh` events are always sent.
Don’t auto-open cart drawer	Stops the app opening the cart drawer after adding a product. Tick it if your theme already opens the drawer itself.

Widget placement

If a widget that places itself doesn’t show on your theme, or shows in the wrong place, you can point it at a spot with a CSS selector and choose whether it goes before, after, or inside that element (at the start or the end). Leave a field empty to keep the automatic position. You can set this for:

Quantity progress in the cart drawer
Cart goal bar in the cart drawer
Bundle widget (product page)
Upsell widget (product page)
Quantity note on cart lines
Quantity badge on product cards

Not comfortable with CSS selectors? Click Ask us to place it in the Widget placement section and tell us your store and which widget. We’ll set the position up for you, free.

Stuck? Email hello@behaviour-discounts.co.uk with your store address and what you’re trying to set up.