Skip to main content
New to Bundle Builder?Click 'Install Now' to get started and setup a free 15 minute onboarding call with the team Install Now

Design settings

Introduction

You can easily customize the design of the Bundle Builder app by using Design settings. To access these settings:

Step 1: Within Bundle Builder, go to Settings located on the left-side menu.

Bundle Builder - Settings.png

Step 2: Select Design.

Design

Stylesheets

The stylesheet controls the style of several elements on the bundle page including buttons, spacing, and fonts.

In this section you can select from the following stylesheet options:

  • Fresh: The latest style and the default option - a modern style that performs well, and is highly recommended for new users. 
  • New standard: The previous default style - similar to Fresh but with fewer refined details.
  • None: Use this option to write your own styles - recommended for experienced users or merchants with access to web developers.

Note: We don't recommend choosing the Default or Minimal stylesheets. These are older styles that are still in use by some stores. If you currently use these, please consider migrating to the Fresh stylesheet for an improved experience.

Design Settings - Stylesheets.png

Quantity selectors

By enabling the Show quantity selectors on product cards setting, you can display quantity selectors underneath your products to allow customers to add more than one of each product.

Design

Bundle requirements modal

By enabling Show bundle requirements in modal, you can display the bundle requirements in a sticky modal at the bottom of the screen.

Design

Once enabled, this will display and remain on the bundle page, for your customers.

Button colors

You can change all buttons on the bundle page using the color selector options here, including:

  • Button background color
  • Button background hover color
  • Button text color

To change a color, enter the hex code directly into the relevant field.

Design Setting - Buttons.png

Alternatively, you can click on the circle next to the field. This will open a color picker tool, allowing you to manually select a color from the spectrum.

Consistent image height 

By enabling the Use consistent image height setting, you can automatically set all of your product images to be the same height on bundle pages.

Running total of bundle contents

Enabling Show running total of bundle contents in modal will display the total number of products currently in the bundle, along with any bundle requirements in the sticky modal.

Example:

'You have 4 of 5 products in your bundle'.

Custom CSS

The bundle page can be customized in multiple ways through code, including CSS. Simply add your CSS into the Custom CSS field.

Note: By default, Bundle Builder does not have the capabilities to support Javascript or Liquid. Instead, this code can be applied to a custom template by using Template Creator (which required an advanced knowledge of Liquid).

Due to the complexity of customization services, our support team is unable to assist with any customization requests at this time. We advise any merchants seeking extensive customization to seek specialists or Shopify experts for these tasks.

HeyCarson and StoreTasker are recommended partners of Bundle Builder - both specializing in website development and offering free quotes for their services.

'Add to bundle' button position

By selecting either the Below product description or Below product image setting, you can set the position of the Add bundle to Cart button.

Design

Tip: This applies a blanket rule to all of your bundles - however, you also have the option to configure a specific bundle to display the Add to Cart button as a Sidebar.

To do so:

Step 1: Go to Bundles.

Step 2: Select your specific bundle.

Step 3: Click the Design tab and scroll to Bundle layout.

Step 4: Select Sidebar and click Save.

Design

Display quantity ('Add to bundle' button)

Enabling this will display how many items have been added.

Example:

'Added x3'

Add margin to page

Enabling this will add spacing to the left and right of the bundle page content. For more information, please see our video which demonstrates how this setting affects your page:

Show bundle contents in overlay

Enabling Show in overlay will display the bundle contents in an overlay that can be triggered from the bundle summary.

Note: This feature is not suitable for bundles that only contain required products.

Expandable bundle contents

Enabling Show collapsed on same page as grid will put the bundle contents in an expandable box, giving the customer the choice whether to hide or view their bundle.

Design

Show bundle contents at all times

By enabling Show on same page as grid, your bundle contents will be viewable at all times in the sticky modal at the bottom of the page.

Tip: This feature is a great option for bundles containing multiple products.

Make product images larger

There are three ways to make the images appear bigger on the page:

  1. Show fewer images per row 
  2. Make the margins smaller
  3. For maximum full page imagery impact you can also combine option 1 and 2

We explain the process in detail in this short video:

Settings for bundles with multiple sections

Next/previous buttons

To set the position of the Next and Previous buttons on multiple section bundles, you have three options to choose from:

  1. Show above and below product grid
  2. Show above product grid
  3. Show below product grid

Design

Section navigation tabs

Enable Show section tabs with links to display linked tabs at the top of multiple section bundles to enable easy navigation.

Design

Getting the most out of navigation tabs and buttons

It's often a good idea to add numbered navigation tabs along side the next/previous buttons to your bundle - especially if your bundle has more than two sections. 

In this short tutorial we explain how to replicate the layout you may have seen on our demo page:

Was this article helpful?