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 will guide you through making these customizations.
Caution
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 will not be needed. Admin price sync will change the price of your products within the Shopify admin.
- From the Shopify admin, select Online Store, then Actions > 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 %}
-
Select Save.
Example
Before customization:
After customization:
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.
- 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 will 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:
