Select your platform

Display Regular Prices Beside Wholesale Prices

Laurel
Laurel
  • Updated

Custom Pricing is designed to show only the wholesale prices to customers who are signed into their account. However, you may want to show both prices to your logged in customers. This customization displays both the regular price with a strike-through, and the wholesale prices to your logged in wholesale customers.

You can make a quick customization to one theme file to display the compare at prices in all locations, or simply add it to the locations you like.

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 will guide you through making these customizations.

Note These instructions are relevant to Custom Pricing, Accelerated Method (Version 3) only. These are general instructions that are applicable to the most commonly used themes. Thorough testing should be completed post-installation to ensure the customization is working on your theme.

Making these changes requires some knowledge of CSS and Liquid code. If you are not comfortable with this, you can reach out to HeyCarson to request a paid customization.

 


 

All Pages

To display compare at pricing in all areas of your store where your prices are displayed, please complete the steps below.

  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.

    Pr.js script

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

    Bold-pr.liquid file with customization code

  5. Select Save.

 


 

Product Page Only

To add compare at pricing to your product pages only, please follow the steps below.

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

  2. Under Templates, select product.liquid.

    Note If your theme is using Sections, the contents for this file may be located within product-template.liquid.

  3. Find each instance of the price code where you want to display your regular prices.

    Find Product Price

  4. Copy and paste the following code under these price code sections:
    <span class="money-template"data-product-id="{{ product.id}}"style="visibility:hidden;"> 
    <scripttype="text/template"></script>
    {% raw %}
    {{#has_saved}}
    <del>
    <span class="bold-pre-compare-price">
    {{original}}
    </span>
    </del>
    {{/has_saved}}
    {% endraw %}
    </span>

    Paste Product Price Code

  5. Repeat Steps 3 - 4 for every instance where you want to show this price.

    Find Product Price

  6. Select Save.

 


 

Collection Page Only

To add compare at pricing to your collection pages only, please follow the steps below.

  1. From the Shopify admin, select Online Store, then ... > Edit code beside the theme you would like to add this customization to.
  2. Under Templates, select collection.liquid.

    Note If your theme is using Sections, the contents for this file may be located within collection-template.liquid.

  3. Find each instance of the price code where you want to display your regular prices.

    Find Collection Price

  4. Copy and paste the following code under these price code sections:

    <span class="money-template"data-product-id="{{ product.id}}"style="visibility:hidden;"> 
    <scripttype="text/template"></script>
    {% raw %}
    {{#has_saved}}
    <del>
    <span class="bold-pre-compare-price">
    {{original}}
    </span>
    </del>
    {{/has_saved}}
    {% endraw %}
    </span>

    Paste Collection Code

  5. Repeat Steps 2 - 4 for every instance where you want to show this price.

    Find Collection Price

  6. Select Save.

 


 

Cart Page Only

To add compare at pricing to your cart page only, please follow the steps below.

  1. From the Shopify admin, select Online Store, then ... > Edit code beside the theme you would like to add this customization to.
  2. Under Templates, select cart.liquid.

    Note If your theme is using Sections, the contents for this file may be located within cart-template.liquid.

  3. Find each instance of the price code where you want to display your regular prices.

    Find Cart Price

  4. Copy and paste the following code under these price code sections:

    <span class="money-template"data-line-index="{{ forloop.index0 }}"style="visibility:hidden;"> 
    <scripttype="text/template"></script>
    {% raw %}
    {{#has_saved}}
    <del>
    <span class="bold-pre-compare-price">
    {{original}}
    </span>
    </del>
    {{/has_saved}}
    {% endraw %}
    </span>

    Paste Cart Code

  5. Repeat Steps 2 - 3 for every instance where you want to show this price.

    Find Cart Price

  6. Select Save.

 


 

CSS Styling

Once any of the above customizations have been completed, you can further style the prices so they appear side-by-side with the compare at price in a different colour.

  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:

    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. 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.

Example:

After CSS customization:

After CSS customization