How to add a sticky add-to-cart bar

The sticky add-to-cart bar keeps your bundle's call-to-action button visible as shoppers scroll down the product page, so they can add to cart without scrolling back up. This guide walks through enabling it, choosing a layout, targeting devices, adding an optional countdown, and styling the bar.

Enable the sticky add-to-cart bar

The sticky bar is configured per bundle inside the bundle editor.

1. Open the bundle you want to edit.
2. Find the Sticky add to cart section and expand it.
3. Turn on Enable sticky add to cart.

When it is on, the section badge changes from Disabled to Enabled. The bar shows on the product pages where this bundle appears, so make sure the bundle is published and your widget is set to display on the right products.

Choose a layout: Floating vs Fixed

Use the Layout option to pick how the bar sits on the page:

• Floating - a centered card that sits inset from the edges with a small gap, and keeps rounded corners.
• Fixed - a full-width bar pinned to the bottom edge, spanning edge to edge.

The two layouts treat corner rounding differently. Switching to Fixed forces the bar's corner radius to 0 so it can sit flush against the screen edges. Switching to Floating restores a rounded corner if the radius was at 0. You can fine-tune the corner radius afterward in the styling controls (see below), but Fixed is designed to stay square.

Show on desktop and mobile

Two checkboxes control where the bar appears:

• Show on desktop
• Show on mobile

Both are on by default. You can turn either off, for example to show the sticky bar only on mobile, where the original add-to-cart button is most likely to scroll out of view.

Set the title and button text

The sticky bar has two text fields:

• Title - the text shown next to the button. It supports template variables, so you can insert dynamic values like {{product_title}} (the default), {{saved_percentage}}, or {{price_total}}. Use the variable inserter on the field to add them.
• Button text - the label on the sticky button. The default is "Choose bundle".

Add the embedded countdown (optional)

You can show a countdown inside the sticky bar with the Show countdown in sticky bar checkbox.

This option requires the countdown timer to be enabled on the same bundle. If the countdown timer is off, the checkbox is disabled and cannot be selected. Once you enable the countdown timer, you can turn this on.

The embedded countdown reuses the compact title from your countdown timer settings, and its styling follows the sticky bar theme.

If you later turn the countdown timer off, the sticky bar's countdown is switched off automatically.

Style the sticky bar

Open the Sticky add to cart style group to adjust the appearance. The controls are grouped into accordions:

• Background - solid color or gradient for the bar.
• Container - border color, border width, corner radius, padding, and shadow.
• Title - text color, font size, and font weight.
• Button - background color, text color, font size, font weight, padding, and corner radius.
• Product image - image size, corner radius, border width, and border color.
• Countdown - background color, text color, font size, font weight, and padding. This group appears only when the embedded countdown is turned on.

To get a coordinated look quickly, use the preset color picker at the top of the section. It also offers Match sticky ATC corners to main widget, which sets the bar's corner radius to match your main bundle widget so the two feel consistent.

A note on corner radius

Remember that the Fixed layout forces a 0 corner radius. If you set a rounded radius in the Container styling and the corners still look square, check that the layout is set to Floating.