When it comes to reviewing items in the cart, Shopify’s default cart display is clean and organized. However, some people may think it’s not fully optimized for selling bundles.

For example, bundles aren't highlighted as bundles. Bundles display like normal products and include additional information as line item properties. The lack of clarity could potentially create some confusion among customers.

Note: The default display may look different depending on the theme you use. In some cases, your theme may not display bundle items at all. This is because certain themes may not be compatible with Shopify’s line item properties.

To help enhance your customers' buying experience, Bundle Builder has a built-in Cart Integration setting that you can use to customize colors and fonts, change the layout, and more.

In the below example, you'll notice how Bundle Builder's Cart Integration setting adds an extra layer of clarity to the cart. It informs the customer their cart contains a bundle and provides a clear summary showing how the bundle was assembled.

In this guide, you'll learn how to use Cart Integration to customize the design and appearance of bundles in the shopping cart.

Before you can customize your cart, you will first need to activate Cart Integration. You may have already done this, as it's a requirement for creating Multiple SKU bundles. If your cart integration is set up, you can skip ahead to the next section (2. Configuring cart display options).

However, if you haven't already done this, here are the steps for locating and activating Cart Integration in Bundle Builder:

Go to your main Shopify dashboard.

Click the Apps heading on the left side navigation.

Locate Bundle Builder in your app list and click to open it.

Back under the Apps menu, select Bundle Builder's Settings.

Continue to the Cart integration page.

The table shows your current theme (Live) and other available themes you have added.

Find your theme's name in the Theme column and click the Activate button under the App extension column.

You will be shown a message directing you to your theme editor for the next step. Just click Got it! to proceed.

Note: After you activate the app extension, the Activate button will change to Settings. Clicking Settings will direct you to the Cart Integration settings.

By default, the Cart Integration toggle should be in the on position. If it's not, simply click it to activate.

You can now scroll down to find your cart display options. We'll explore each one in the next section.

Tip: After activating Cart Integration in Bundle Builder, you can return to the Cart Integration settings to configure your cart display at any time through your theme editor. Simply click App embeds located on the left side menu.

In this section, we'll break down the Cart Integration settings and how each one will affect your cart display.

Note: If you use a custom theme for your Shopify store, you may need to manually integrate the cart. If automatic integration doesn't work then click here to skip to the next section.

When you enable Cart Integration, Bundle Builder will place your bundle inside a box in the cart. There are three box location options: Above line items, Below line items, and After line items. You can also choose to hide the Bundle box when the bundle is the only item in the cart.

Example of the Bundle box above the product line:

Example of the Bundle box below the product line:

Example of the Bundle box after the product line:

The bundle box is an informative box that highlights when a bundle has been added to the cart. There are several options under the Bundle box styles heading that allow you to make changes to its look.

You can change the:

Example of Bundle box options (Ref. 1, 2, 3 & 4):

Example of button border options (Ref 5, 6 & 7):

Tip: The background color of the bundle box is, by default, a gradient. To display a solid color, open the color palette and then drag the left circle to the right and place it on top of the right circle.

​
If you change the default text in the Box heading (singular) or Box heading (plural), be sure to leave the {count} snippet in the sentence. This code dynamically inserts the correct number of bundles.

If the customer clicks the View action button (titled View details in the screenshot below), a modal window pops up displaying bundle product details, the price, and action links: Duplicate and Remove.

You can use the options under the Modal popup styles header to change the:

​Note: Use HTML color codes to set the modal popup background color. Not sure about HTML color codes? Learn more.

You can use the optional Custom CSS field to enter CSS code and customize the modal.

Underneath the Custom CSS tool, there is a Manage app link that can be used to quickly navigate to the Bundle Builder app. From there, you can create or edit bundles.

The fully automated integration method covered above works with Shopify 2.0 themes (i.e. themes currently available in the Shopify Theme Store). It's unlikely you'll need to use manual integration with themes purchased through the Shopify Theme Store. However, you may need this method if you use a custom theme.

Important: Manual integration involves adding CSS selectors. We recommend seeking the assistance of an experienced web developer if you're not confident using this code.

The steps you'll need to take include:

Step 1: Activate the Cart Integration - Manual toggle.

Step 2: Select your theme.

Step 3: Integrating the Cart page and Cart drawer.

Both of the cart Integration toggles need to be enabled to make manual changes. Click the Cart Integration - Manual toggle to activate the setting. This will reveal additional options.

If you have installed a theme from the Shopify Theme Store, then Bundle Builder should automatically detect and support it. If your theme is not from the Shopify Theme Store, you might need to select the theme name in the drop-down (this will work for manually added copies of themes available in the store).

If your theme is not supported (e.g. you're using a custom theme), you might need to add manual support. To do that, you need to supply CSS selectors for some parts of the Cart page.

Note: A CSS selector is used to select an element on an HTML page. Click here to learn more.

There are two areas to consider when performing manual integration: The Cart page and the Cart drawer.

For example, the cart drawer might open a small popup with cart content in the top right corner. Or, it could open a sidebar next to content on the main page.

Note: Some themes don't have a cart drawer. If yours doesn't - leave the selectors empty.

Line item box selector

Selector for an HTML element that contains all items currently in the cart. The bundle box will display before or after this element based on the bundle box placement setting.

Individual line item selector

Selector for a cart item. It should match every individual product line in the cart, but not the container wrapping them.

Subtotal price selector

Selector for a subtotal price of the whole cart.

Pre-discount total price selector

If your theme shows a total price before any discount is applied, use this selector to make it work. Otherwise, leave the field blank.

Checkout button selector

Selector for a Checkout button on the cart page. This button takes the customer to the Checkout page, where they enter their address and payment information.

Extra selectors for changes monitoring

These are advanced settings for dynamic themes. Some themes apply changes to the page structure without any page navigation. Bundle Builder tries to detect and apply all required changes. You can help by providing an additional list of selectors (comma separated) that should be monitored for changes. This uses the MutationObserver feature internally.

If you need any further assistance with using CSS code, then we suggest reaching out to a Shopify Expert to help you with the task. HeyCarson and StoreTasker are recommended partners of Bundle Builder - both specializing in website development and offering free quotes for their services.