How to add a sticky add-to-cart bar

The sticky add-to-cart bar in Bundlex Bundles keeps your offers within reach as shoppers browse the product page. Its button can scroll back to the offers or add the selected offer directly to the cart. You can show it after shoppers scroll past the widget or from page load.

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. Open the Add-ons tab, then expand Sticky add to cart.
3. Turn on the switch next to the Sticky add to cart title.

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 what the button does

Button action has two choices:

• Scroll to the offers takes the shopper back to the widget to choose an offer.
• Add the selected offer to cart shows the selected offer and adds it with its chosen products, gifts, and extras.

In add-to-cart mode, the bar follows changes to the selected offer, variants, quantities, subscriptions, and add-ons. Its total matches the widget footer. You can enable Show price, Show original price, Show savings badge, and Show price inside the button.

If a shopper still needs to choose a variant or fill a bundle slot, the button takes them to the widget to finish. With no offer selected, it prompts them to choose options. On themes that prevent a direct add, the button falls back to scrolling to the widget. Discounts with only optional add-ons use the scroll-to-offers action so shoppers can make their choices in the widget. This button uses the normal cart flow, not Buy Now.

Choose when the bar appears

Under Show the bar, choose After the widget scrolls out of view or Always, from page load. Both work with either button action. Existing bars keep their after-scroll behavior unless you change it.

With Always selected, add-to-cart mode starts with your pre-selected offer and follows later selections. If you allow the page to load with no offer selected, shoppers must choose an offer before the bar can add it.

Choose a layout: Floating vs Fixed

Use the Sticky bar 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 sets 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.

Check the actual mobile page with your longest offer title and price. On narrow screens, the bar simplifies some original-price, savings and button-price details to keep the action readable. Do not expect every desktop detail to appear on a small phone.

Set the title and button text

In scroll-to-offers mode, 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-to-cart mode displays the selected offer's title and uses its own Add to cart button text field. The two button texts have separate translations, so changing one mode's wording does not overwrite the other.

Under Sticky bar wording, you can also change the free-gift badge, single and multiple add-on badges, and Choose options button text. Keep {{count}} in the multiple add-ons message so it can show the actual count.

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.
• Price - price text styling in add-to-cart mode.
• 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. When the bar's corners differ from your main bundle widget's, a Match sticky ATC corners to main widget note appears below the presets; click Apply to match them so the two feel consistent.

A note on corner radius

Switching to the Fixed layout sets the corner radius to 0, but it does not lock it. A rounded radius you set afterward in the Container styling also shows on the Fixed bar, so keep it at 0 if you want the bar flush with the screen edges.

Save and test both actions

Save, then test a targeted product page with the discount active. In scroll mode, scroll past the offers and use the sticky button to return. In add-to-cart mode, select an offer and variants, then add through the sticky button. Check cart and checkout quantities, variants and total. Repeat on mobile and test an unavailable or incomplete choice: the bar should take the shopper back to finish their selection.

In our example, Buy 2 adds two Ivory Small bags with a $43.20 merchandise subtotal after 10% off. Choosing an unavailable Blush Small combination changes the sticky action to Choose options; changing it to an available size restores Add to cart. The countdown remains visual and does not stop the discount at zero. See Countdown timer for expiry behavior.