Hiding Prices

Overview

You can hide prices on your bundle page easily by adding single lines of CSS; this is useful for merchants who would like to incentivize their customers to only consider the price of the whole bundle, rather than each individual product going into it.

The prices you can hide easily through CSS are:

Hiding Prices Using CSS

To add custom CSS rules within the Bundle Builder app:

  1. Go to Settings > Design.

  2. Scroll down to Custom CSS.

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

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

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

Hiding the Entire Bundle Price

To hide the bundle price entirely:

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

Hiding Prices for a Particular Bundle

To only hide prices for a particular bundle:

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

where <bundle_id> is the ID of your bundle. This can be found at the end of the URL whilst on the bundle page (e.g. apps/bundles/bundle/246).

To learn more about adding Custom CSS to your bundle page, please read our guide.