By default, Bold Bundles will only display the discounted price within the cart. If you would like you show the full price of your products with a strike-through, alongside the discounted product price on the cart page, you can customize this by applying a small change in your theme file.
Once this customization is applied, you can further style the prices to appear side-by-side with some CSS.
This article will walk you through the steps to achieve this customization.
Alert
- These instructions are relevant to Bold Bundles Accelerated Draft Order Method (V3) only.
- 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.
- 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 that the compare-at-price is side-by-side.
- 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:
.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:
