Introduction - Design
The second tab in the bundle creation process, Design, allows you to customize the way your bundle page looks. You can add imagery, edit the product grid, and change the layout.
Below, we'll explore how each design option impacts the appearance of your bundle page.
Imagery
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 to open the upload window.
Step 2: Navigate to the image you wish to use and select it. (Images must not exceed 2MB in size.)
Step 3: Select the image.
Example of a banner image (1400px x 200px):
Header image width
This option allows you to 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 fit the full width of the browser window (ideal for banners).
- Match page content: The image stretches to align with the content on the page (ideal for wide images and banners).
An example of a Header image with the Default width setting on a bundle page:
Additional fields
Add a note field
You have the option of adding a note field to the bundle page summary section for customers to enter comments, messages, or instructions.
To enable a note field, simply check the Add a note field box.
When you enable the note field, a new checkbox appears underneath: Make the note field a requirement. This can be handy if you want the customer to inform you of allergies, unique order requirements, or product customizations (e.g. embroidery).
Finally, enter a title to display above the note field. Some examples are:
- Add a gift message
- Tell us about your special requirements
- What allergies do you have?
- What name should we add to your product?
Referencing a note field in order confirmations (optional)
If you want to include note field contents in your order confirmation emails, add the following snippet to your theme's code:
{% 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 %}To learn more about adding line items in email notifications, visit Shopify's help center.
Product grid
The product grid is the section of the bundle page that displays your products. In the example below, the product grid is configured to display 4 products in each row.
The Product grid settings give you the ability to configure several elements on the template:
- Products per row
- Enable product filtering
- Centre products in the grid layout
- Display product descriptions
- Display a 'Read more' link
We'll look at each option below.
Products per row
The Products per row setting allows you to determine how many products should be displayed in each row on the bundle page (between 1 and 5).
Tip: If your bundle contains a smaller number of products, we suggest selecting a lower value. With fewer products per row, each one will be more prominently displayed, effectively utilizing page space and highlighting your available products.
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
Checking the Enable product filtering box will display a filter option on the bundle page.
When this option is enabled, a Filter products button will appear at the top of the bundle page. Clicking it will reveal a drop-down menu featuring product tags.
Customers can utilize these tags to refine their search within the bundle, making it easier and quicker for them to find what they're looking for.
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.
Centre products in the grid layout
Checking the Centre products in the grid layout option will centre products horizontally on the bundle page - even if they don't fill up the entire row.
Example:
Display product descriptions
The Display product descriptions option pulls partial descriptions from individual Product pages and presents them directly below the respective items on the bundle page.
Checking the Display product descriptions option will reveal a Set character limit box. You can choose how many characters you want to display under the product title.
Tip: Product descriptions can also be used with the Read more link (see below) to show longer product descriptions without navigating away from the page.
Display 'Read more' link
The Read more link will open a modal that overlays product information on the page.
This useful tool helps your customers learn about your products without requiring them to leave the bundle page. It provides additional information, including the complete description and extra photos.
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
You can revisit this page at any time to review your bundle's design options.
Next up, it's time to build your bundle steps and add your products!