Hiding Prices

Search…

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 certain prices on the bundle page, rather than viewing all of them.
The prices you can hide easily through CSS are:
​The individual product prices​
​The bundle contents prices​
​The bundle contents comparison price​
​The entire bundle price​
​The prices for a particular bundle​
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:
1
 .bundle-builder-app--bundle--product-price {display: none;}
Copied!
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:
1
.bundle-builder-app--bundle--contents-price {display: none;}
Copied!
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:
1
.bundle-builder-app--bundle--original-price {display: none;}
Copied!
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:
1
.bundle-builder-app--bundle--price-box {display: none !important;}
Copied!
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.
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 Design > Custom CSS:
1
.bundle-builder-app--bundle--<bundle_id>
Copied!
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.
Example:
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 you can hide the prices within specific sections.
Hiding the Price on the First Section
1
.bundle-builder-app--bundle--multisection--first .bundle-builder-app--bundle--product-price {
2
    display: none;
3
}
Copied!
Hiding the Price on the Last Section
1
.bundle-builder-app--bundle--multisection--last .bundle-builder-app--bundle--product-price {
2
    display: none;
3
}
Copied!
Hiding Prices on All Sections Except the First and Last
1
.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 {
2
    display: none;
3
}
Copied!
To learn more about adding Custom CSS to your bundle page, please read our guide.
Adding Custom CSS