Skip to main content

Design Settings

Your design settings allow you to customize the design of the app.

  1. Within Bundle Builder, go to Settings.
  2. Select Design.

 

 

Stylesheet

Select the default stylesheet for Bundle Builder (Fresh), or use your theme's stylesheet to add your own styles.

 

 

Quantity Selectors

By selecting Enable, you can display quantity selectors underneath your products to allow customers to add more than one of each product.

Bundle Requirements Modal

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

 

 

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

Button Colors

You can change all buttons on the bundle page by using the color selectors here. This includes:

  • Button text color
  • Button background color
  • Button active color

 

Consistent Image Height

By enabling this, you can automatically set all of your images to be the same height on bundle pages.

Running Total of Bundle Contents

Enabling this will display the total number of products currently in the bundle, along with any bundle requirements.

 

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.
 

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

 

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

Button Position

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

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:

  1. Go to Bundles.
  2. Select your specific bundle.
  3. Under Design, scroll to Bundle layout.
  4. Select Sidebar, and click Save.

Display Quantity on Confirmation Alert

Enabling this will display how many items have been added.

 

Example:

'Added x3'

Add a Margin to Bundle Content

Enabling this will add spacing to the left and right of the bundle page content.

 

 

Show Bundle Contents in Overlay

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

 

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

Show Bundle Contents At All Times

By enabling this option, your bundle contents will not be hidden by default.

 

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

Make product images larger

There are 3 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 Multiple Sections

Next/Previous Buttons

 

To set the position of the Next and Previous buttons on multiple section bundles, select your chosen option from the drop-down menu:

  • Above products
  • Below products
  • Above and below products.
 

Navigation Tabs

Enable this 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 2 sections. 

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

 

Related articles

Comments

0 comments

Please sign in to leave a comment.