How to Build a Bundle - Design

Customize the way your bundle page looks by adding images, editing the product grid, and changing the layout.

 

Edit design

You can return to the bundle at any time and update the design. 

 

1. Go to Bundles.
2. Select the bundle that you would like to edit.
3. Click the Design menu tab.

Imagery

Add both product images and header images to your bundles. The maximum filesize for an image is 2MB.

 

Product Image

Bundle Builder displays product images in the checkout and email notifications.

 

To upload an image, go to Imagery > Product image and then upload an image from your device.

 

An example of a product image in a cart:

Header Image

To place an image at the top of the bundle page, go to Imagery > Header image, and then upload an image from your device.

 

 Set the width of the header image:

• Default: image is centered at the top of the bundle page.
• Full-width: image stretches to align with the content on the page.
• Match page content: image stretches to fit edge-to-edge of the browser window.

 

 An example of a header image on a bundle page:

Additional fields

 

Note Field

Place a note field on the bundle page to collect customer comments. The note field appears in the bundle summary once the user adds at least one item.

 

1. Check the box to add a field. (optional)
2. Check the box to make this a required field. (optional)

 

Note: We recommend enabling the Required setting if merchants sell customizable products or let customers define unique order specifications.

The note field (and your message) displays on the bundle page.

• Check the box to display the note field in the cart. (optional)

 

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.

 

Product grid

Configure the bundle page layout. 

 

Display bundle description

Check the box to display a product description just below the heading image on the bundle page. 

 

• Use the description field to give customers special instructions.

 

 An example of a bundle description on a bundle page:

Products per row 

Click the field and set the number of products (between 1 and 5) in each row on the bundle page.

 

Enable product filtering

Check the box to display a filter (drop-down menu) on the bundle page. Customers can filter products by tag. This helps customers quickly find what they're looking for.

 

Note: When creating product tags, do not use white spaces inside a tag name. Instead, use an underscore (e.g. coffee_accessories).

 

• Visit the Shopify site to read about tags. Learn more.

 

 

Center products in the grid layout

Select this option to center products horizontally on the page even if they don't fill up the grid row.

 

An example of a product centered on the last row of a bundle page:

Display product descriptions

Select this option to limit the length of the product description on the bundle page. Enter the maximum number of characters. 

Can be used with the Read more link (see below) with long product descriptions.

Note: This feature does not limit the description length on the product page.

Display 'Read more' link

Select this option to display a Read more link that opens a modal. 

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

 

Bundle layout

Choose how to display product summaries and prices on the bundle page. 

 

• Full width: below products
• Sidebar: in a sidebar(for desktop monitors)

 

If you choose the sidebar option, Bundle Builder automatically resizes images so that all required products and the summary display in a row.

 

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

Next

After you complete all the Design tasks, it is time to add Shipping & Tax. 

 

• Go to Step 5 Shipping & Tax.