Display Compare At Pricing in Bold Discounts

Discounts Powered by Bold Price Rules is designed to display the sale price when the discount groups are active. However, you may want to show compare at pricing on the storefront. This displays both the regular price with a strike-through, and the discounted price to your customers. To do this, you can add some code to the file shown below to achieve this customization.

If you wish to display both prices side-by-side and change the color of the compare-at-price, this can be accomplished using CSS.

This article guides you through making these customizations.

Note: This customization is only relevant when using Bold Discounts in the default method. If you have requested to use the admin price sync feature, this customization is not needed. Admin price sync changes the price of your products within the Shopify admin.

Add compare at pricing

1. From the Shopify admin, click 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. Click Save.

Style compare at pricing with CSS

Once the above customization has been completed, you can further style the prices so they are side-by-side with the compare-at-price in a different colour.

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

   Note: You need to add your own color number for the color you wish to use.

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

5. Click Save.

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

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

8. Click Save.