Make a selection

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 (known as compare-at-pricing) to your logged in customers. This customization displays the regular price with a strike-through next to the wholesale price to your logged in wholesale customers.

Note: These instructions are relevant to Custom Pricing, Accelerated Method (V3) only.

To see how to show compare-at-prices, please follow the steps below relevant to how Custom Pricing was installed on your theme.

 

 

Theme app extension

If you have installed Custom Pricing by enabling the app embeds in the theme app extension, then you can use the following instructions to enable the compare-at-price.

  1. From your Shopify admin, navigate to Online Store > Themes.
  2. Click on the Customize button next to the theme Custom Pricing is installed on.
  3. Click App embeds from the left sidebar.

    Click App embeds

  4. Click on the Bold CSP V3 Price Rule app embed to expand the settings. 
  5. Click on the toggle next to Enable compare at price to turn on compare-at-pricing.
    Enable compare at price
  6. Click Save.

 

 

Liquid code 

If you have installed Custom Pricing using the Liquid code installation (legacy), then you can use the following instructions to show the compare-at-price. These are general instructions that are applicable to the most commonly used vintage themes. Changes to your theme code should be completed on a backup copy of your theme and tested thoroughly to ensure the customization is working before going live.

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

 

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, navigate to Online Store > Themes.

  2. Next to the theme Custom Pricing is installed on, click on the ellipsis (...), and select Edit code.

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

  3. Under Snippets, select bold-pr.liquid.

  4. Find the pr.js script near the bottom of the file.

    Pr.js script

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

  6. 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, navigate to Online Store > Themes.

  2. Next to the theme Custom Pricing is installed on, click on the ellipsis (...), and select Edit code.

  3. Under Templates, select product.liquid.

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

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

    Find Product Price

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

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

    Find Product Price

  7. 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, navigate to Online Store > Themes.

  2. Next to the theme Custom Pricing is installed on, click on the ellipsis (...), and select Edit code.

  3. Under Templates, select collection.liquid.

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

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

    Find Collection Price

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

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

    Find Collection Price

  7. 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, navigate to Online Store > Themes.

  2. Next to the theme Custom Pricing is installed on, click on the ellipsis (...), and select Edit code.

  3. Under Templates, select cart.liquid.

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

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

    Find Cart Price

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

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

    Find Cart Price

  7. 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. From the Shopify admin, navigate to Online Store > Themes.
  2. Next to the theme Custom Pricing is installed on, click on the ellipsis (...), and select Edit code.
  3. Under Assets, select Add a new asset.
  4. Select Create a blank file.
  5. Name the file bold-custom.CSS
  6. 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%;
}

  7. Select Save.

  8. Under Layout, select theme.liquid.
  9. Copy and paste the following code below content_for_header: 
    {%- render 'bold-pr' -%}
{{ 'bold-custom.css' | asset_url | stylesheet_tag }}
  10. Select Save.

Example:

After CSS customization:

After CSS customization