How to Configure Cart Integration – Bundle Builder

In this article, you learn how to customize the design and appearance of bundles in the shopping cart. Use the Bundle Builder Cart Integration app to set colors, customize fonts, change the layout, and more.

Default display

Let's first look at the default display of a checkout cart. The screenshot below has two individual items and one bundle. The default display might not be the same as what appears on your screen; it depends on your theme.

Although the display below looks clean and organized, some folks might say room exists for improvement. For example, the cart does not identify the bundle as, well, a bundle. It only shows the name of the bundle product. That lack of clarity could create some confusion with potential buyers.

Continue reading below and learn how to change the layout of the cart and add some customizations with just a few clicks.

Opening the app

The first step is to open the Cart Integration app.

Log in to your Shopify account.
Go to the Apps heading on the side navigation.
Click Bundle Builder.
On the next page, click the Installation menu tab.

Locating the Theme panel

Scroll down to the Theme table. The table shows the current theme (Live) and available theme options.

Note If you want to change your theme, come to this table to see if Bundle Builder is installed. If Bundle Bundler is installed on a theme, the Settings button displays in the Installation column. If you don't see the Settings button, click the Install button.

To modify the Cart Integration app:

Locate the Live theme.
Click the Settings button. A new tab opens.

On the next page, go to the corner and click the App embeds tab (if not already open). The Cart Integration tool displays.
Switch the Cart integration toggle to the On position.
Click the arrow to expand and close the folder. The folder contains a list of design tools.

Note In most cases, you won't need to open or use the second toggle (Cart Integration - Manual).

Configuring cart display options

Setting bundle location

When you enable the cart integration app, Bundle Builder places your bundle inside a box. There are two box location options: above line items and below line items.

This screenshot shows the bundle box above the lines of products.

This screenshot shows the bundle box below the lines of products.

Customizing the bundle box

Scroll down the panel to the Bundle box styles heading. Use these four options to change how the bundle box displays in the shopping cart.

You can change the:

font size of the bundle box heading with a slider
color of text inside the button
color of the bundle price
background color of the button

Customizing the button and box

Scroll down the panel to the Button border radius heading. Use these three options to change how the button and button box display in the shopping cart.

You can change the:

shape of the corners on the button
color of the button border
gradient color of the field that holds the button

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.

Customizing the button and box text

The next three tools in the panel control the heading and button label in the bundle box. Depending on the number of bundles in the cart, one of the first two headings appears in the box.

If you change the default text, be sure to leave the {count} snippet in the sentence. This code dynamically inserts the correct number of bundles.

Customizing the modal

If the user clicks the details button, a modal pops up. The modal shows product details, the price, and action links: Duplicate and Remove.

Use the tools on the panel to customize the design of the modal. Customize the color of the font, borders, and backgrounds.

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

Custom CSS

Use this optional field to enter CSS code and customize the modal.

Manage app

Click the Manage app link to open the Bundles page. From here, create a new bundle or edit an existing one.

Cart Integration - manual

The fully automated integration works with Store 2.0 themes currently available in the Shopify theme store. It's unlikely you'll need to use manual integration with store themes. You might need it for custom themes.

Note both of the cart Integration toggles need to be enabled to make manual changes.

Select theme manually

If you installed a theme from the Shopify Theme Store, Bundle Builder should automatically detect and support it. If your theme is not from that 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).

Cart page and Cart Drawer integration

If your theme is not supported (e.g. 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 CSS Selector is a way to select an element on an HTML page. Learn more.

There are two parts: Cart Page integration and Card Drawer integration. Cart page settings only apply when you navigate to a Cart page. Card Drawer is for all variants of dynamic cart content displayed on pages other than the Cart page. 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. In that case, leave the selectors empty.

Line item box selector

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

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 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.