Display In-Cart Compare at Pricing in Bold Bundles

By default, Bold Bundles only displays the discounted price within the cart. If you would like you show the full price of your products with a strike-through, alongside the discounted product price on the cart page, you can customize this by applying a small change in your theme file.

Once this customization is applied, you can further style the prices to appear side-by-side with some CSS.

This article walks you through the steps to achieve this customization.

Note: These instructions are relevant to Bold Bundles Accelerated Draft Order Method (V3) only. Making these changes requires some knowledge of CSS and Liquid code. If you are not comfortable with this, you can reach out to ShopExperts to request a paid customization.

Add compare at pricing

1. From the Shopify admin, select Online Store, then ... > Edit code beside the theme you would like to customize.

   Note: It is recommended to make a backup copy of the theme you are working on.

2. Under Snippets, select bold-pr.liquid.
3. Find the pr.js script near the bottom of the file.

   

4. Copy and paste the following code, placing it above the pr.js script:

   {% raw %}
   <script>
   window.BOLD = window.BOLD || {};
   window.BOLD.pre = {
   config: {
   template_product:`
   {{#has_saved}}
   <del><span class="bold-pre-compare-price">{{{original}}}</span></del>
   {{/has_saved}}
   {{money}}`,
   template_cart_item: `
   {{#has_saved}}
   <del><span class="bold-pre-compare-price">{{{original}}}</span></del>
   {{/has_saved}}
   {{money}}`
   }};
   </script>
   {% endraw %}

   

5. Select Save.

Style compare at pricing with CSS

Once the above customization has been completed, you can further style the prices so that the compare-at-price is side-by-side.

1. Under Assets, select Add a new asset.
2. Select Create a blank file.
3. Name the file bold-custom.CSS
4. Copy and paste the following code into the file:

   .money-details, .pre-money {
     display: inline !important;
     padding-right: 2%;
   }

5. Select Save.

6. Under Layout, select theme.liquid.
7. Copy and paste the following code below content_for_header:

   {%- render 'bold-pr' -%}
   {{ 'bold-custom.css' | asset_url | stylesheet_tag }}

8. Select Save.