Display Regular Prices Beside Wholesale Prices

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.

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.
Under Snippets, select bold-pr.liquid.
Find the pr.js script near the bottom of the file.

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

Select Save.

Product page only

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

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

Note: If your theme is using Sections, the contents for this file may be located within product-template.liquid.
Find each instance of the price code where you want to display your regular prices.

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

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

Collection page only

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

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

Note: If your theme is using Sections, the contents for this file may be located within collection-template.liquid.
Find each instance of the price code where you want to display your regular prices.

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

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

Cart page only

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

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

Note: If your theme is using Sections, the contents for this file may be located within cart-template.liquid.
Find each instance of the price code where you want to display your regular prices.

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

Repeat Steps 2 - 3 for every instance where you want to show this price.
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.

Under Assets, select Add a new asset.
Select Create a blank file.
Name the file bold-custom.CSS
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%;
}
```
Select Save.
Under Layout, select theme.liquid.

Copy and paste the following code below content_for_header:

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

Select Save.

Example:

After CSS customization: