Note

The following guide is for legacy templates.

We now have a 'Design editor' which you can access in the top right of every bundle page.

If you're using Template Creator, we have a separate section to our docs here.

Hiding prices

You can easily hide prices on your bundle page by adding single lines of CSS. This can come in handy if you wish to have greater control over the content visible to customers on the bundle page.

The prices you can hide through CSS are:

Individual product prices
Prices for individual bundle contents
The bundle contents comparison price
The entire bundle price
Prices for a particular bundle

Hiding prices using CSS

To add custom CSS rules within the Bundle Builder app:

Step 1: Go to Bundle Builder's Settings, scroll down to Custom CSS

Step 2: Enter the CSS as displayed below.

Step 4: Save your changes.

Hiding individual product prices

Individual product prices are usually visible on the bundle page alongside each product (depending on your theme).

To hide individual product prices, add the following snippet to your Custom CSS field:

.bundle-builder-app--bundle--product-price {display: none;
}

Note: This CSS affects all bundles.

Hiding product prices within the bundle contents

Prices of selected bundle products are visible when a customer clicks View bundle contents. This opens a modal popup that displays the individual prices of each item within the bundle.

To hide the prices for bundle contents within the modal, add the following snippet to your Custom CSS field:

.bundle-builder-app--bundle--contents-price {display: none;}

Note: This CSS affects all bundles.

Hiding the bundle contents comparison price

The bundle contents comparison price appears above the total bundle price. It shows the customer how much they would have paid if purchasing the same products outside of a bundle.

To hide the bundle contents comparison price, add the following snippet to your Custom CSS field:

.bundle-builder-app--bundle--original-price {display: none;}

Note: This CSS affects all bundles.

Hiding the total bundle price

The total bundle price is the accumulative price of all chosen products in a bundle. This is normally displayed above the option to View bundle contents.

To hide the bundle price, add the following snippet to your Custom CSS field under Design:

.bundle-builder-app--bundle--price-box {display: none !important;}

Note: This CSS affects all bundles.

Hiding prices for a particular bundle

Using the snippets above will apply these hidden prices to every bundle on your store. However, if you would like to hide prices on a specific bundle (while leaving the prices for other bundles on your store visible), you can do so through the following steps:

Step 1: Paste your chosen snippet into the Custom CSS field.

Step 2: Add bundle_id-- after .bundle-builder-app--bundle--

Your snippet should follow this format: .bundle-builder-app--bundle--bundle_id--original-price {display: none;}

Step 3: Identify the bundle ID of the specific bundle that you want to hide pricing for.

Your bundle ID can be found at the end of your bundle page's URL. For example:
- Bundle Page URL = mystore.myshopify.com/apps/bundles/bundle/15366
- Bundle ID = 15366

Step 4: Replace bundle_id with your bundle ID.

Example of a finished CSS snippet:.bundle-builder-app--bundle--15366--original-price {display: none;}

Step 5: Click Save.

Hiding prices for a particular section

If your bundle has multiple sections rather than a single page, you can add the following snippets to hide the prices within specific sections.

Hiding the price in the first section

.bundle-builder-app--bundle--multisection--first .bundle-builder-app--bundle--product-price {display: none;}

Hiding the price in the last section

.bundle-builder-app--bundle--multisection--last .bundle-builder-app--bundle--product-price {
display: none;
}

Hiding prices on all sections except the first and last

.bundle-builder-app--bundle--multisection:not(.bundle-builder-app--bundle--multisection--first):not(.bundle-builder-app--bundle--multisection--last) .bundle-builder-app--bundle--product-price {
display: none;
}

Customizing the packing slip

Your packing slips are rendered using Shopify's own template language, Liquid. By using HTML, CSS, and Liquid, you can edit your packing slip template.

Step 1: Through your Shopify admin, go to Settings.

Step 2: Click on Shipping and delivery.

Step 3: Scroll down to the Packing slip template setting and click Edit.

Changing line item properties on packing slips

Line item properties are a system used by Shopify to display customization data entered by the customer during a transaction.

Bundle Builder uses this system for Single SKU bundles. The contents of each bundle sale are listed as line item properties in the order details:

This is the packing slip template, and code changes made here will adjust how the packing slip functions.

Showing the bundle's contents

To show the bundle's contents via line item properties - insert the following snippet:

<ul>{% for p in line_item.properties %}<li>##{{ p.last }}</li>{% endfor %}</ul>

The snippet can be added somewhere between -

{% for line_item in line_items_in_shipment %}

- and {% endfor %} tags.

Editing the design of a single bundle page

You can edit the design of specific bundle pages without affecting other pages using the below tag:

.bundle-builder-app--bundle--<ID>

Replace <ID> with your bundle page's unique numerical ID. The ID can be found in the bundle URL. For example:

.bundle-builder-app--bundle--110

Next, enter the design changes for the bundle page. For example:

.bundle-builder-app--bundle--110 {
    background-color: red;
}