Bundle page customizations

Using code to customize Bundle Builder

If you wish to manually customize your bundle page using your own code, you can do this using two methods:

1. Custom CSS
2. Template Creator

In this article, we'll break down the process for:

• Hiding prices
• Changing how packing slips are displayed
• Editing the design of a single bundle page

Important: Advanced knowledge of Liquid is essential for customizing Bundle Builder templates.

Template Creator was built to allow you to create your own Bundle Page template from scratch. You need a strong understanding of Liquid to create your bundle template implementation. Due to the complexity and personalized nature of this process, we are currently unable to offer support for customizations.

If you're not confident with making customizations, we'd recommend finding a Shopify Expert to work with. HeyCarson and StoreTasker are recommended partners of Bundle Builder - both specializing in website development and offering free quotes for their services.

Hiding prices

You can easily hide prices on your bundle page by adding single lines of CSS. This can be useful if you would like to incentivize customers to only view certain prices on the bundle page.

The prices you can hide through CSS are:

Hiding prices using CSS

To add custom CSS rules within the Bundle Builder app:

Step 2: Scroll down to Custom CSS

Step 3: 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

The individual product prices within the bundle contents appear when the customer selects View bundle contents. This will open a modal popup that displays the individual prices of each item within the bundle.

 

 

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

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

Note: This CSS affects all bundles.

Bundle contents comparison price

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:

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

Note: This CSS affects all bundles.

Hiding the entire bundle price

The entire bundle price is the accumulative price of all the products in the bundle, which is displayed alongside the 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;
}

Note: This CSS affects all bundles.

Hiding prices for a particular bundle

Using the snippets above will apply these hidden prices to every bundle in 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 2: Paste .bundle-builder-app--bundle--<bundle_id>.

Step 3: Replace <bundle_id> with your bundle ID.

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

Step 5: Click Save.

Identifying the bundle ID

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

Example:

• Bundle Page URL = mystore.myshopify.com/apps/bundles/bundle/15366
• Bundle ID = 15366
  

Applying your bundle ID to the Snippet

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

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

Example:

• If the bundle ID is 15366, the snippet to hide this particular bundle's prices will be
  .bundle-builder-app--bundle--15366

Add the snippet for hiding prices

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

If you would like to hide the individual product prices within the bundle contents of a specific bundle, add the two snippets together:

Bundle ID Snippet
.bundle-builder-app--bundle--15366

Hiding Bundle Contents Snippet
.bundle-builder-app--bundle--contents-price {display: none;}

Bundle ID Snippet + Hiding Bundle Contents Snippet = Final Snippet
.bundle-builder-app--bundle--15366 .bundle-builder-app--bundle--contents-price {display: none;}

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;
}

.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 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 - use the following snippet:

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

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;
}