Display In-Cart Compare at Pricing in Bold Bundles

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.

 


 

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

  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.

 Example

Before customization:

Before customization

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

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

Was this article helpful?
0 out of 0 found this helpful