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 under Design:

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

Product Prices Within Bundle Contents

The individual product prices within the bundle contents appear when the customer selects View bundle contents; a modal will open to display the individual prices of each item within the bundle.

 

 

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

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

The bundle contents comparison price is what appears alongside the real bundle price; it shows the customer how much they are saving by purchasing a bundle compared to individual products.

 

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

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

Hiding the Entire Bundle Price

The entire bundle price is the accumulative price of all the products in the bundle, which is displayed alongside option to View bundle contents.

 

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

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

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 particular bundle (while leaving the prices for other bundles on your store visible), you can do so through the following steps:

1. Identify the bundle ID.

2. Paste .bundle-builder-app--bundle--<bundle_id>.

3. Replace <bundle_id> with your bundle ID.

4. Paste one of the snippets above to hide your chosen prices.

5. Click Save.

Your bundle ID can be found at the end of your bundle page's URL.

Applying Your Bundle ID to the Snippet

Once you have located the bundle ID, paste the following snippet into Design > Custom CSS:

Delete <bundle_id> inside the snippet (including the symbols '<' and '>'), and replace it with your bundle ID.

Add the Snippet for Hiding Prices

Finally, paste your chosen snippet from the selection above after the bundle ID snippet you have already added.

Hiding Prices for a Particular Section

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

Hiding the Price on the First Section

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

Hiding the Price on 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:

1. Through your Shopify admin, go to Settings.

2. Click on Shipping and delivery.

3. Scroll down to Packing slips, and select Edit.

    

 

Changing the Packing Slip

 

Line Item Properties

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: as the bundle has just one SKU, 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 - use the following snippet:

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

Somewhere between the -

{% for line_item in line_items_in_shipment %}

- and {% endfor %} tags.