---
title: "Summary bar"
description: "Show selections and an add to cart button in a sticky summary area on your bundle products"
url: https://help.biscuitsbundles.com/en/articles/14043172-summary-bar
collection: "Creating bundles"
updated: 2026-10-12
language: en
---

# Summary bar

Show selections and an add to cart button in a sticky summary area on your bundle products

![](https://staticfiles.gleap.io/gattachments/Okurcpii90WYVWylmhi10Fm8hPQjcV8dOjyb5UpuChNRNR7DHUG0sqfS8Foah3Uiax3XdzJdZZq.png)

## **Overview**

The Summary bar gives your customers a live overview of their bundle as they build it. It shows selected products, quantities, pricing, and an add to cart button - all in one place.

You can display the Summary bar as a **sidebar** next to the bundle form, or as a **footer bar** fixed to the bottom of the page. It updates automatically as customers make their selections.

The Summary bar is available on **Standard** and **Advanced** plans.

![](https://staticfiles.gleap.io/gattachments/QPoaPQ3LbVg3k1hRegs41tmhFOT1w3G63rtXbE3G5ruAWhmjPMmY4OZBdSZdO4arNcYqu0Xpo8B.png)

* * *

## **Turning On the Summary Bar**

1.  Open a bundle in the Biscuits Bundles app.
    
2.  Go to the **Bundle Layout** tab.
    
3.  Scroll to the **Summary** section.
    
4.  Toggle **Enable** to turn it on.
    

When enabled, a sticky sidebar or footer bar will appear on your bundle's product page showing your customer's selections and an add to cart button.

![](https://staticfiles.gleap.io/gattachments/vRMmNq1N1hJDP92aqlnSuFtXWVWoXW5bD75oanu9zf2M1Dc7B4VjR1vxQsfmjgNwHpNBnbzVCA6.png)

* * *

## **Choosing a Display Type**

Under **Summary display type**, choose how the Summary bar appears on the page:

-   **Sidebar** — A sidebar that sits alongside the bundle form.  
    ℹ _On screens smaller than 800px, it automatically switches to a footer bar._
    
-   **Footer bar** — A bar fixed to the bottom of the page. Works on all screen sizes.
    

![](https://staticfiles.gleap.io/gattachments/eyV0wfeWuW0T8ss2kyexEFsos7sE7CzLoTD32GpTt0sWFMcyP2xOAsmp6icm4Z4J1j8JbLJLjst.jpg)

## **More Options**

Click **More options** to access additional settings.

## **Items Display Type**

Choose how selected products appear inside the Summary bar:

-   **Standard** — Shows full item details including the product image and title. When this option is selected, you can also enable **Show quantity selector** to let customers adjust quantities directly from the Summary bar.
    
-   **Simple** — Shows a compact grid of product thumbnails.
    

![](https://staticfiles.gleap.io/gattachments/qeMsYzXQHqIMt68BNAf8ilLKZO2tGOzyP5m2hWnzgKF6h8X71TcoYh4eV0geXSHe7bq0lyeGkMz.jpg)

## **Announcement**

Add a short message that appears inside the Summary bar. Use this to highlight shipping info, promotions, or other helpful details.

-   Maximum 100 characters.
    
-   Example: _Same day shipping for orders before 3pm_
    

![](https://staticfiles.gleap.io/gattachments/Hr00JJqrSLPHBz71GsYbSJockwtq53weBUeidC0TulwWfC5Nkbe4BjVuLchLy4Kw1XerEAg0sP8.png)

## **Add to Cart Discount Badge**

When your bundle has a discount, a badge can appear near the add to cart button showing how much the customer saves.

-   Maximum 60 characters.
    
-   Use **{{saving\_amount}}** to show the dollar amount saved.
    
-   Use **{{percentage\_discount}}** to show the percentage saved.
    
-   If you leave this blank, it defaults to _Savings {{percentage\_discount}}_ for percentage discounts or _Savings {{saving\_amount}}_ for fixed amount discounts.
    

![](https://staticfiles.gleap.io/gattachments/NyMxbpGRs4uipRj6Bd1yV20ge63AnXbNXNDyd9DLWMHVEmxx4aM5q5snf18WBYNrNFjTHa6O9qm.jpg)

* * *

## **Add to Bundle Button**

Instead of a quantity selector, you can show an Add to bundle button on each product card. Customers add and remove products with a button, and can add several variants of the same product, each with its own quantity. Turn it on in the Summary section, just beneath Enable.

> ℹ Full guide: [Add to bundle button](https://help.biscuitsbundles.com/en/articles/14043180-add-to-bundle-button.md)

* * *

## **Per-Step Settings**

Each step in your bundle has an optional **Summary "Add another" button text** field. This is the text shown in the Summary bar when a customer can still select more items for that step.

1.  Open a bundle and go to the step you want to edit.
    
2.  Scroll to the **Step Details** section.
    
3.  Find the **Summary "Add another" button text** field.
    
4.  Enter your custom text (maximum 30 characters).
    

This field isn’t required, you may leave it blank and it wont display on the bundle.

![](https://staticfiles.gleap.io/gattachments/OVOno1ifDFZXFQ0uPdF97yLIeriEIwp8tveUR4HaK5r2GTOTKuMRcNFOc4NngNpXO49oI3a8Dwi.png)

## **Customising the Look in Your Theme**

The Summary bar's colours, sizes, and shapes are controlled in your **Shopify theme editor**, not in the Biscuits Bundles app. This keeps the Summary bar consistent with the rest of your theme.

By default, the summary area will inherit styles from the main Biscuits Bundles App Block, and from your theme.

Using the Summary Area Styles app block will help you customise the look further without code.

## **How to access the settings**

1.  Open the **Shopify theme editor** (Online Store → Themes → Customize).
    
2.  Navigate to a product page that has a bundle.
    
3.  Find the **Summary Area Styles** block under the Biscuits Bundle Builder section.
    
4.  Click it to open the styling settings.
    

![](https://staticfiles.gleap.io/gattachments/mdCnu9T8kfRYz92lzngBNLtXmeROzvoVt50N0cspLnC0zm4Z6seENMRAg689M3nLbe38MnTABFE.png)

## **Volume Discounts and the Summary Bar**

If your bundle uses **Volume Discounts** with the display type set to **Thumbnails**, you will see a prompt when enabling the Summary bar.

The Thumbnails volume discount display is not compatible with the Summary bar.

The prompt will ask you to switch the volume discount display to **Progress bar**. This keeps both features working together.

![](https://staticfiles.gleap.io/gattachments/CQ3qG91hGcHahfAeRqS9ndTfFwBExBuDWPhnr5r1eEp2MXDKrlWTy18wQty1fwqDOWmrKG8W2KY.png)

* * *

## **Tips and Troubleshooting**

## **I can't turn on the Summary bar**

The Summary bar is available on **Standard** and **Advanced** plans. If you see a lock icon next to the setting, upgrade your plan to access this feature.

![](https://staticfiles.gleap.io/gattachments/kE0FPdmfBLyDs4hgdPL4rVGKIDJk0zFg22kfO7iMd2X0xg6tqgqUnu4jqTTEeXultMXSEYpJlE5.png)

## **The sidebar doesn't appear on mobile**

This is expected. When the display type is set to **Vertical** (sidebar), the Summary bar automatically switches to a horizontal footer bar on screens smaller than 800px wide. This gives your customers more room to browse products on smaller screens.

## **My custom CSS is conflicting with the Summary bar**

If you have previously added custom CSS to your bundle form, it may affect the Summary bar layout. Try adjusting or removing conflicting styles. You can also use the **Custom CSS** field in the Summary Area Styles theme block to target the Summary bar specifically.

## **The discount badge is not showing**

The discount badge only appears when your bundle has an active discount. Make sure your bundle has a discount type set and that the customer's selections qualify for the discount.