Step 4: Design

Introduction

The fourth tab in the bundle creation process, Design, allows you to customize the way your bundle page looks. Using the options here, you can add images, edit the product grid, and change the layout.

The options here are separated into four sections:

1. Imagery
2. Additional fields
3. Product grid
4. Bundle layout

In this guide, we'll take a look at how each section impacts the look of your bundle. 

Note: You can return to the bundle at any time to update the design. To do this: 

Step 1: Go to Bundles on the left side menu.

Step 2: Select the bundle that you would like to edit.

Step 3: Click the Design menu tab.

Video tutorial

The easiest way to learn about setting up your bundle's design is by viewing our video! Alternatively, we also have a text guide with screenshots below.

A step-by-step guide

Part 1. Imagery

Two image types can be added to your bundle:

• Product image
• Header image

Note: The maximum file size for an image is 2MB.

Product image

The Product image represents the bundle. It doesn't display on the bundle page itself, but it will display in the cart, checkout, and email notifications.

To upload a Product image:

Step 1: Click Upload.

Step 2: You can then navigate to the image you want to use. The image will need to be saved somewhere on your device.

Step 3: Select the image.

An example of a Product image in a cart:

An example of a Product image in checkout:

Header image

The Header image appears exclusively at the top of your bundle page. This could be a banner, logo, or image that reflects the contents of the bundle.

To upload a Header image:

Step 1: Click Upload.

Step 2: You can then navigate to the image you want to use. The image will need to be saved somewhere on your device.

Step 3: Select the image.

Step 4 (optional): Set the width of the header image:

• Default: The image is centered at the top of the bundle page (ideal for photos and logos).
• Full-width: The image stretches to align with the content on the page (ideal for wide images and banners).
• Match page content: The image stretches to fit edge-to-edge of the browser window (ideal for wide images and banners).

 An example of a Header image with the Default width setting on a bundle page:

Part 2: Additional fields

Add a note field

You have the option of adding a note field on the bundle page to enable customers to manually enter comments, messages, or instructions. The note field will activate in the bundle summary section when the customer adds at least one product to their bundle.

To add a note field, simply check the Add a note field box.

If you would like to make the note field a requirement for the customer, there's a second box underneath that you can check.

Finally, enter a title for the note field (e.g. 'Add a gift message'). This will display above the note field.

Note: We recommend requiring note fields if you sell customizable products or if you let customers define unique order specifications.

Referencing a note field

If you want to include your note field in your order confirmation emails, add the following snippet:

{% for line in line_items %}
{% for property in line.properties %}
{% if property.first == 'Your note' %}
Your note for this product was: {{ property.last }}
{% endif %}
{% endfor %}
{% endfor %}

Visit the Shopify site to read about line items in email notifications. Learn more.

Part 3: Product grid

The product grid is essentially the template that displays your bundle. In the example below, the template shows the bundle title and has 4 products per row on its invisible grid.

 

The Product grid settings give you the ability to configure several elements on the template:

• Display a bundle description
• Products per row
• Enable product filtering
• Center products in the grid layout
• Display product descriptions
• Display a 'Read more' link

Let's look at how each setting affects the product grid:

Display a bundle description

Checking the Display bundle description box will open a text box underneath where you can write a bundle description. This description will display just below the bundle name near the top of the bundle page.

This description can be used to give customers special instructions, provide clarity, and create a connection with your audience.

 An example of a bundle description on a bundle page:

Products per row 

Click the Products per row drop-down box and set the number of products that you want to appear in each row on the bundle page (between 1 and 5).

Tip: If you don't have many products in your bundle, you may wish to choose a lower number per row to fill the page up and place more of a spotlight on the products you do have. The fewer products per row, the bigger the products will appear.

Example of 2 products per row:

Choosing a larger number (4 or 5) will suit bundles with lots of products as it will help customers view more items in a smaller space.

Example of 5 products per row:

Enable product filtering

Check the Enable product filtering box to display a filter option on the bundle page.

When this option is enabled, customers will see a Filter products button near the top of the bundle page. Clicking it will open a drop-down menu displaying product tags. Customers can use these to narrow down the products in the bundle and find what they're looking for quicker.

Note: Product tags are applied to each product individually via Shopify's admin dashboard. To find them:

Step 1: Go to Products

Step 2: Select a product in your bundle

Step 3: Scroll down to Product tags

Step 4: Add or remove tags manually and save your changes

To learn more about tags in Shopify, click here.

Center products in the grid layout

Check the Center products in the grid layout option to center products horizontally on the bundle page - even if they don't fill up the entire grid row.

For example, if you wanted to display 5 products per row but you don't have enough items to fill every row with 5, then the remaining products would be centered in the last row: 

Display product descriptions

Checking the Display product descriptions option will reveal a Set character limit box.

Bundle Builder will automatically display partial product descriptions for each product on the bundle page. You can choose how many characters you want to display under the product title. 

Note: This feature does not limit the length of descriptions on the product page itself.

Product descriptions can also be used with the Read more link (see below) to show longer product descriptions without navigating away from the page. We'll look at this setting next.

Display a 'Read more' link

The Read more link will open a temporary modal that overlays product information on the page.

This handy tool lets your customers learn more about the product without leaving the bundle page.

Part 4. Bundle layout

Within the Bundle layout section, you can choose where the bundle summary and price are displayed on the page. You can choose between: 

Full width: Displays bundle price and contents at the bottom of the page, underneath the products.

Sidebar: Displays bundle contents and price in a scrollable sidebar on the right side of the screen (for desktop monitors). If you choose the Sidebar option, Bundle Builder will automatically resize images to display all required products and the summary in a row.

Note: Bundle Builder automatically places the summary below products on mobile devices.

Next steps

After you complete all the Design tasks, it's time to add shipping and tax details to your bundle. Click here to go to Step 5: Shipping & Tax