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.
Step 2: Select Design.
- Quantity selectors
- Bundle requirements modal
- Button colors
- Consistent image height
- Running total of bundle contents
- Custom CSS
- 'Add to bundle' button position
- Display quantity ('Add to bundle' button)
- Add a margin on confirmation alert
- Add margin to page
- Show bundle contents in overlay
- Expandable bundle contents
- Show bundle contents at all times
- Make product images larger
There are also settings specific for bundles that contain multiple sections, including:
- Next/previous buttons
- Section navigation tabs
Below, we'll look at what each setting does.
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.
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.
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.
Once enabled, this will display and remain on the bundle page, for your customers.
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.
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.
The bundle page can be customized in multiple ways through code, including CSS. Simply add your CSS into the Custom CSS field.
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.
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.
Display quantity ('Add to bundle' button)
Enabling this will display how many items have been added.
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.
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:
- Show fewer images per row
- Make the margins smaller
- 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
To set the position of the Next and Previous buttons on multiple section bundles, you have three options to choose from:
- Show above and below product grid
- Show above product grid
- Show below product grid
Section navigation tabs
Enable Show section tabs with links to display linked tabs at the top of multiple section bundles to enable easy navigation.
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: