Installation Guide for Custom Pricing

Custom Pricing requires our Liquid code in order to run correctly on your store. The code installation ensures that your pricing will appear on your product pages, and your customer's selections will appear correctly on both the cart and checkout pages of your store.

Before installing the Liquid code, it is recommended to create a duplicate copy of your theme.

 Alert

This article has installation instructions for all three versions of Custom Pricing. It is recommended to determine which version is installed on your store before proceeding. Please visit Discount Methods and How to Switch.

 


 

Selecting Automatic theme update from within the app will trigger our installation tool to perform an automatic code installation. You will be asked to confirm which theme you would like this code to be installed onto after selecting this option.

We highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation, and to proceed with the automatic installation.

  1. From within the Custom Pricing app admin, select Help.
  2. Select Liquid Installation.
  3. Select Automatic theme update.

Selecting Begin update will trigger our robotic installer to perform an automatic installation. You will be asked to confirm which theme you would like the code to be installed on after selecting this option.

 


 

 Alert

To maintain the security of your Shopify account, we ask that you do not proactively send us a staff account invite for access to your shop. Instead, our team will request collaborator access to your shop.

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

  1. From within the Custom Pricing app admin, select Help.
  2. Select Liquid Installation.
  3. Under the Expert theme update service, select Begin update.
    Expert Install Request
  4. On the bottom left corner, select which theme you would like the installation completed on.
    Select theme
  5. Select Submit Request.

 


 

Manual Installation

V1 & V2 Code Install Instructions (Vintage Themes)

This installation allows both the Custom Pricing and Quantity Breaks modules to work correctly on your store.

 Caution

This installation will not work for themes using render tags. You will need to switch to Version 3 of Custom Pricing or use a theme that can work with include tags. Please visit Shopify Render Tag Adjustments for more information.

Step 1: Add Snippet Files

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under Snippets, find these six files: 
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-common.liquid
    • bold-includes.liquid
    • bold-csp-metafield-variant.liquid
    • bold-product.liquid
    • bold-variant.liquid
  6. For any that don't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.

      bold-product.liquid_snippet.png

      Copy and paste the code found in each of these links into their respective files:
    4. Select Save.
    5. Repeat Steps 5.1 - 5.3 for each missing snippet file.

 


 

Step 2: Edit theme.liquid

  1. Under Layout, select theme.liquid.
  2. Copy and paste the following code directly below the {{ content_for_header }} line:
    {% render 'bold-common' %}
    {% render 'bold-includes' %}

    Theme.liquid_includes.png

  3. Copy and paste the following code directly above the </body> tag:
    <script type="text/javascript" charset="utf-8"> var shappify_customer_tags = {{ customer.tags | json }} </script>

    Paste_script_theme.liquid.png

  4. Select Save.

 


 

Step 3: Edit collection.liquid

  1. Under Templates, select collection.liquid.

    Note: The contents for this file may be located under Sections in the collection-template.liquid file.

  2. Find the following line of code:
    {% for product in collection.products %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_for_product_loop.png

  3. Copy and paste this code directly below each instance:
    {%- include 'bold-product' with product, hide_action: 'skip' -%}

    Include_product_loop.png

  4. Select Save.

 


 

Step 4: Edit index.liquid

  1. Under Templates, select index.liquid.
  2. Find the following line of code:
    {% for product in collection.products %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance. 

    find_for_product_in_collection.products.png

  3. Copy and paste this code directly below each instance:
    {% include 'bold-product' with product, hide_action: 'skip' %}

    include_bold-product.png

  4. Select Save.

 


 

Step 5: Edit related-products.liquid

  1. Under Snippets, select related-products.liquid.
  2. Find the following line of code:
    {% for product in collection.products %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    related-products_for_product.png

  3. Copy and paste this code directly below each instance:
    {% include 'bold-product' with product, hide_action: 'skip' %}

    include_bold.product.png

  4. Select Save.

 


 

Step 6: Edit search.liquid

  1. Under Templates, select search.liquid.
  2. Find the following line of code:
    {% for item in search.results %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    for_item_in_search.results.png

  3. Copy and paste this code directly below each instance:
    {%- include 'bold-product' with item, hide_action: 'skip' -%}

    include_bold-product_with_item.png

  4. Select Save.

 


 

Step 7: Edit product.liquid

  1. Under Templates, select product.liquid.

    Note: The contents for this file may be located under "Sections" in the product-template.liquid file.

  2. Copy and paste the following code at the top of this file:
    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}

    include_bold-product_with_product.png

  3. Find the following line of code:
    {% for variant in product.variants %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_for_variant_loop.png

  4. Copy and paste this code directly below each instance:
    {% include 'bold-variant' with variant, hide_action: 'skip' %}

    Paste_include_bold_variant.png

  5. Find the following line of code:
    {% assign current_variant = product.selected_or_first_available_variant %}

    Note: This line of code may use a different variable name. Common variable names include variant and pr_variant

    Find_assign_current_variant.png

    Change this line of code to:
    {% assign current_variant = bold_selected_or_first_available_variant %}

    Change_assign_current_variant.png

  6. Copy and paste the following code directly below this line:
    {%- include 'bold-variant' with current_variant, output: 'none' -%}

    Note: Depending on your theme, you may need to use variant as the variable in the above code.

    Include_bold_variant.png

  7. Find the following line of code containing:
    product.variants.size

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    product_variants_size.png

    Change this line of code to:
    bold_variants_size

    bold_variants_size.png

  8. Find the following line of code:
    {{ product | json }}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_product_json.png

    Change this line of code to:
    {%- include 'bold-product', output: 'json' -%}

    Include_bold_product_json.png

  9. Find the opening <form> tag.

    Note: The following steps are for adding the Quantity Breaks grid. If you do not wish to activate the Quantity Breaks module, please skip to Step 14.

    Opening_form_tag.png

  10. Copy and paste the following code within the <form> tag:
    <div class="bold_qb_grid" data-variant-id="{{ product.selected_or_first_available_variant.id }}"></div>

    Note: This is where the Quantity Breaks grid will display on your storefront. We generally suggest placing this after the variant selector element.

    Paste_QB_grid_code.png

  11. Select Save.

 


 

Step 8: Edit cart.liquid

  1. Under Templates, select cart.liquid.

    Note: The contents for this file may be located under Sections in the cart-template.liquid file.

  2. Copy and paste the following code at the top of this file:
    {%- include 'bold-cart' -%}

    Paste_include_bold_cart.png

  3. Find the following line of code:
    {% for item in cart.items %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    for_item_in_cart.items.png

  4. Copy and paste this code directly below each instance:
    {%- include 'bold-cart-item' with item -%}

    Paste_include_cart_item.png

  5. Find each instance of the following code:
    {{ item.price | money }}
    On newer themes, it will be:
    {{ item.final_price | money }}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_item_price_money.png

  6. Copy and paste the following code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>

    Paste the code

  7. Find each instance of the following code:
    {{ item.line_price | money }}
    On newer themes, it will be:
    {{ item.final_line_price | money }}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_item_line_price.png

  8. Copy and paste the following code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" data-item-key="{{item.key}}" style="display:none !important;"></span>

    Paste the code

  9. Find each instance of the following code:
    {{ cart.total_price | money }}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find_cart_total_price.png

  10. Copy and paste the following code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>

    Paste_span_class_3.png

  11. Find the opening <form> tag.

    Note: The following steps are for adding the Quantity Breaks grid. If you do not wish to activate the Quantity Breaks module, please skip to Step 16.

    Opening_form_tag_2.png

  12. Copy and paste the following code above the opening <form> tag:
    <div id="shappify-qty-cart-msg"></div>

    Paste_shappify_qty_cart_message.png

  13. Select Save.

 


 

Step 9: Edit bold-includes.liquid

  1. Under Snippets, select bold-includes.liquid.
  2. Copy and paste this code in the bottom of the file.
    {{ 'https://cp.boldapps.net/js/csp.js' | script_tag }}

    bold-includes_CSP.png

  3. Select Save.

 


 

Step 10: Update the Pricing Code

Updates need to be done on all theme files that output product prices on the store. The number and name of these files will vary from theme to theme. Generally, 3-5 files will need to be updated.

These control the price fields on the product, collection, search, related products, and home pages.

It's important that each theme file that outputs a price be modified. This is to ensure the correct pricing always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme's Liquid coding.

Go through the list of files one at a time and reference your theme's files to see if that particular file exists in your theme. Not all of these files will exist in a given theme.

List of Theme Files to Update:

  • Templates: All themes should contain these files. If your theme is using Sections, these files will be located within the Sections folder as *-template.liquid files.
    • product.liquid
    • index.liquid
    • collection.liquid
    • search.liquid
  • Snippets: Any given theme should typically have several of these files.
    • product-block.liquid
    • product-card.liquid 
    • product-form.liquid
    • product-grid-collage.liquid
    • product-grid-item-category.liquid
    • product-grid-item.liquid
    • product-list-item.liquid
    • product-listing.liquid
    • product-loop.liquid
    • product-single.liquid
    • product-thumbnail.liquid
    • product.liquid
    • related-products.liquid
    • search-result-grid.liquid
    • search-result.liquid
    • search.liquid
    • short-form.liquid
    • snippet-product-item.liquid

Original Pricing Code vs. Bold Pricing Code:

Not all of these will appear in a given file, but the ones that do may appear several times.

These are each of the code snippets that need to be replaced, and the code to replace them:

Look for each of these... ...and replace all instances with this code

product.price or item.price

bold_price

product.price_min or item.price_min

bold_price_min

product.price_max or item.price_max

bold_price_max

product.price_varies or item.price_varies

bold_price_varies

product.compare_at_price or item.compare_at_price

bold_compare_at_price

product.compare_at_price_min or item.compare_at_price_min

bold_compare_at_price_min

product_compare_at_price_max or item.compare_at_price_max

bold_compare_at_price_max

product.compare_at_price_varies or item.compare_at_price_varies

bold_compare_at_price_varies

product.selected_or_first_available_variant or item.selected_or_first_available_variant

bold_selected_or_first_available_variant

product.variants.first or item.variants.first

bold_selected_or_first_available_variant

product.variants[0] or item.variants[0]

bold_selected_or_first_available_variant

 


 

Step 11: Test the Install

To test your Custom Pricing installation, please follow these steps:

Create Your Pricing Groups:

  1. Log into the Custom Pricing app admin.
  2. Create a new pricing tier and a tag associated with the new tier.
  3. Create a new Custom Pricing group, assign a small discount for the new tier (IE. 1%), and select a single product to apply the discount to.
  4. In the Shopify admin, create a customer account, and assign the tag associated with your new pricing tier to the account.

Test on the Storefront:

  1. On the storefront, navigate to the search page and search for the product that you selected in the app. If the search page shows a price field, check to see if the price is the regular price.
  2. Go to any collection page that has the selected product on it and verify that the price shown is the regular product price.
  3. Go to the product page and check the variant drop-down selector to make sure that the app's variants aren't showing there.
  4. While on the product page, check to see if the product page's price is showing the product's regular price.
  5. Log into the customer account that you created earlier, navigate back to the search page and search for the product that you selected in the app. If the search page shows a price field, make sure that the price is the app's discounted price.
  6. Go to any collection page and verify that the price shown is the discounted app pricing.
  7. While on the product page, make sure that the product page's price field is showing the app's discounted price.

If any of the above steps fail, please contact our Customer Success team for further assistance.

 


 

V3 Code Install Instructions (Vintage Themes)

Step 1: Add Snippet Files

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under Snippets, find the bold-pr.liquid file.
  6. If this file doesn't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.

      create_bold-pr_liquid_snippet.png

    4. Copy and paste the code from the bold-pr.liquid file:
    5. Select Save.

 


 

Step 2: Edit theme.liquid

  1. Under Layout, select theme.liquid.
  2. Copy and paste the following code below the {{ content_for_header }} line:
    {%- render 'bold-pr' -%}

    Include_bold-pr.png

  3. Select Save.

 


 

Step 3: Add the Product Loop Code

Updates need to be done on all theme files that output product prices on the store. The number and name of these files will vary from theme to theme. Generally, 3-5 files will need to be updated.

These control the product information on the product, collection, search, related products, and home pages.

It's important that each theme file that pulls this information be modified. This is to ensure the correct pricing always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme coding.

Go through the list of files one at a time and reference your theme's files to see if that particular file exists in your theme. Not all of these files will exist in a given theme.

List of Theme Files to Update:

  • Templates: Themes should contain most of these files. If your theme is using Sections, these files will be located within the Sections folder as *-template.liquid files.
    • collection.liquid
    • list-collections.liquid
    • search.liquid
  • Sections & Snippets: Any given theme should typically have a few of these files.
    • collection-template.liquid
    • featured-collection.liquid
    • product-full.liquid
    • product-loop.liquid
    • product-recommendations.liquid
    • product-slider.liquid
    • related-products.liquid

Not all of these will appear in a given file, but the ones that do may appear several times.

Code Adjustments Required:

Your theme's product loop code should look similar to this:

{% for product in collection.products %}

Find_For_Product.png

The following code should be inserted directly after each instance:

<script type="application/json" class="bold-product-json">{{ product | json }}</script>

Paste_for_product_script.png

In some cases, the product loop code may look slightly different:

{% for item in search.results %}

Find_For_Item.png

We then need to adjust the end of our Bold price code to include the loop's product reference:

Note: Visit Product Loop Code Variations for more information on what this coding may look like.

<script type="application/json" class="bold-product-json">{{ item | json }}</script>

Paste_for_item_script.png

 


 

Step 4: Update the Product Price Code

Updates need to be done on all theme files that output product prices on the store. The number and name of these files will vary from theme to theme. Generally, 3-5 files will need to be updated.

These control the price fields on the product, collection, search, related products, and home pages.

It's important that each theme file that outputs a price be modified. This is to ensure the correct pricing always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme coding.

Go through the list of files one at a time and reference your theme's files to see if that particular file exists in your theme. Not all of these files will exist in a given theme.

List of Theme Files to Update:

  • Templates: Themes should contain most of these files. If your theme is using Sections, these files will be located within the Sections folder as *-template.liquid files.
    • product.liquid
    • index.liquid
    • collection.liquid
    • search.liquid
  • Sections & Snippets: Any given theme should typically have a few of these files.
    • featured-product.liquid
    • product-card.liquid
    • product-grid-item.liquid
    • product-form.liquid
    • product-template.liquid
    • related-products.liquid

Code Adjustments Required:

Your theme's product price code should look similar to this:

{{ product.price | money }}

Find_Product_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this price code:

<span class="money" data-product-id="{{ product.id }}">{{ product.price | money }}</span>

Paste_Product_Price_Span.png

In some cases, the product price code may look slightly different:

{{ item.price | money }}

Find_Item_Price.png

The following code should still be placed around each of these instances with the <span> tags wrapping this price code:

Note: Visit Product Price Code Variations for more information on what this coding may look like.

<span class="money" data-product-id="{{ item.id }}">{{ item.price | money }}</span>

Paste_item_id_span.png

 


 

Step 5: Update the Cart Price Code

Updates need to be done on all theme files that pull your product price information to the cart. The number and name of these files will vary from theme to theme. Generally, 3-5 files will need to be updated.

It's important that each theme file that outputs a price be modified. This is to ensure the correct information always shows for your customers.

Note: This will require you to go back and edit multiple files within your theme coding.

Go through the list of files one at a time and reference your theme's files to see if that particular file exists in your theme. Not all of these files will exist in a given theme.

List of Theme Files to Update:

  • Templates: If your theme is using Sections, these files will be located within the Sections folder as *-template.liquid files.
    • cart.liquid
  • Sections & Snippets:
    • cart-ajax.liquid
    • cart-content.liquid
    • cart-template.liquid

Code Adjustments Required:

First, you'll need to find each instance of coding that looks similar to this:

{{ item.price | money }}

Find_Cart_Item_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-line-index="{{ forloop.index0 }}">{{ item.price | money }}</span>

Paste_Cart_Item_Span.png

Next you'll need to find each instance of coding that looks similar to this:

{{ item.line_price | money }}

Find_Cart_Line_Item_Price.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-line-total data-line-index="{{ forloop.index0 }}">{{ item.line_price | money }}</span>

Paste_Cart_Line_Item_Span.png

Lastly, you'll need to find each instance of coding that looks similar to this:

{{ cart.total_price | money }}

Find_Cart_Total_Price__1_.png

The following code should be placed around each of these instances with the <span> tags wrapping this code:

<span class="money" data-cart-total>{{ cart.total_price | money }}</span>

Paste_Cart_Total_Span.png

 


 

Step 6: Place the Quantity Breaks Grid (optional)

If you're using the Quantity Breaks module with Custom Pricing, you may want to manually place where the grid displays on the storefront.

To choose the placement of your grid, please follow these steps:

  1. Under Templates, select product.liquid

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

  2. Find where you want to place your quantity breaks grid in the code.

    Note: Generally, most store owners will place this grid code either above or below their quantity selector.

    Find_quantity_selection_code.png

  3. Copy and paste the following code in your desired location:
    <div class="bold_qb_grid" data-variant-id="{{ product.selected_or_first_available_variant.id }}"></div>

    Paste_QB_Grid.png

  4. Select Save.

 


 

Step 7: Install the AJAX Scripts

 Caution

Not all of the following coding snippets will need to be inserted into your theme. You will need to determine the function your theme uses to build your AJAX modals and install the appropriate coding from there. This section requires advanced knowledge of JavaScript and web coding to complete. If you are not comfortable with this, please contact our Customer Success team for further assistance.

For themes that use AJAX functionalities, updates must be made to the JavaScript files that build these AJAX pages and/or modals. The file name and location of this code will vary from theme to theme.

Note: This is only required for themes that have AJAX functions.

These updates are done to ensure the correct product price displays every time it's shown on your storefront. This may require you to go back and edit multiple files in your theme coding.

List of Theme Files to Update:

  • Assets: Your theme may contain one or a few of these files. The required coding adjustment(s) are explained in the next section.
    • ajax-cart.js.liquid
    • ajaxify-cart.js.liquid
    • ajaxify-shop.js.liquid
    • ajaxify.js.liquid
    • app.js
    • apps.js
    • atlantic.js* - Atlantic by Pixel Union
    • colors-ajax-cart.js.liquid* - Colors by Small Victories
    • ella.js* - Ella by Halo Themes
    • empire.js* - Empire by Pixel Union
    • functions.min.js
    • handy.js* - Handy by Pixel Union
    • jas_theme.min.js
    • js_main.js
    • main.js.liquid
    • script.js.liquid
    • script.min.js
    • sections.js.liquid
    • shop.js.liquid
    • site.js.liquid
    • superstore.js* - Superstore by Pixel Union
    • theme.js
    • theme.js.liquid
    • theme.min.js
    • timber.js.liquid
    • vendor.min.js

* = Theme specific file. The theme name and developer are noted beside the file name.

Code Adjustments Required:

Themes that pass cart objects between your regular cart and the AJAX modals will need to use our Cart Doctor function.

Most themes will use the function buildCart to show your products in their AJAX modals and pass this information between both areas.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (typeof window.BOLD !== 'undefined'
&& typeof window.BOLD.common !== 'undefined'
&& typeof window.BOLD.common.cartDoctor !== 'undefined') {
// NOTE: "cart" should be the variable containing the cart JSON data
cart = window.BOLD.common.cartDoctor.fix(cart);
}
// Bold:PRE

buildCart_Example.png

Some themes may use the function refreshCart to show your items in these modals.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (typeof window.BOLD !== 'undefined'
&& typeof window.BOLD.common !== 'undefined'
&& typeof window.BOLD.common.cartDoctor !== 'undefined') {
// NOTE: "cart" should be the variable containing the cart JSON data
cart = window.BOLD.common.cartDoctor.fix(cart);
}
// Bold:PRE

refreshCart_Example.png

Themes that simply display the information from your cart in the AJAX modals will need to use our Event Emitter function.

Most themes will pull this information by using the getCartData function.

Note: If Bold Upsell's AJAX code is already installed on your theme, you do not need to install this code. It should already be contained in your theme files.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (window.BOLD && BOLD.common && BOLD.common.eventEmitter &&
   typeof BOLD.common.eventEmitter.emit === 'function'){
BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');
}
// Bold:PRE

getCartData_Example.png

Some themes will grab this information through the updateView function.

You'll need to find where this code is in one of the above files, and paste the following code within this function:

// Bold:PRE
if (window.BOLD && BOLD.common && BOLD.common.eventEmitter &&
   typeof BOLD.common.eventEmitter.emit === 'function'){
BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');
}
// Bold:PRE

updateView_Example.png

V3 Code Install Instructions (Online Store 2.0 Themes)

Step 1: Add Snippet Files

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under Snippets, find the bold-pr.liquid file.
  6. If this file doesn't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.

      create bold-pr liquid snippet

    4. Copy and paste the code from the bold-pr.liquid file:
    5. Select Save.

 


 

Step 2: Edit theme.liquid

  1. Under Layout, select theme.liquid.
  2. Copy and paste the following code below the {{ content_for_header }} line:
    {%- render 'bold-pr' -%}

    render bold-pr

  3. Select Save.

 


 

Step 3: Update the Product Price Code 

  1. Under Snippets, navigate to price.liquid.
  2. Find the price element code:
    <span class="price-item price-item--regular">
    {{ money_price }}
    </span>

    Product Price Code

  3. Replace it with this code:

    <span class="price-item price-item--regular money" data-product-id="{{ product.id }}">
    {{ money_price }}
    </span>

    Product Price Code with Bold

  4. Select Save.


 

Step 4: Update the Cart Files

Cart Template Price Element Edits: Item Price & Line Item Price

Method 1 (Recommended)

 Alert

If there is a condition checking whether:

item.original_line_price != item.final_line_price

Find the condition and add the following code to the price element:

data-line-index="{{ forloop.index0 }}" data-line-total
  1. Under Sections, select main-cart-items.liquid.
  2. Find each instance of the following code:
    {{ item.final_line_price | money }}
  3. Copy and paste the following code and add it into the price element span:
    data-line-index="{{ forloop.index0 }}" data-line-total
  4. Add a money class to the price element as well.

    Existing code:

    {%- if item.original_line_price != item.final_line_price -%}
    <dl class="cart-item__discounted-prices">
    <dt class="visually-hidden">
    {{ 'products.product.price.regular_price' | t }}
    </dt>
    <dd>
    <s class="cart-item__old-price price price--end">
    {{ item.original_line_price | money }}
    </s>
    </dd>
    <dt class="visually-hidden">
    {{ 'products.product.price.sale_price' | t }}
    </dt>
    <dd class="price price--end">
    {{ item.final_line_price | money }}
    </dd>
    </dl>
    {%- else -%}
    <span class="price price--end">
    {{ item.original_line_price | money }}
    </span>
    {%- endif -%}

    End result:

    {%- if item.original_line_price != item.final_line_price -%}
    <dl class="cart-item__discounted-prices">
    <dt class="visually-hidden">
    {{ 'products.product.price.regular_price' | t }}
    </dt>
    <dd>
    <s class="cart-item__old-price price price--end">
    {{ item.original_line_price | money }}
    </s>
    </dd>
    <dt class="visually-hidden">
    {{ 'products.product.price.sale_price' | t }}
    </dt>
    <dd class="price price--end money" data-line-index="{{ forloop.index0 }}" data-line-total>
    {{ item.final_line_price | money }}
    </dd>
    </dl>
    {%- else -%}
    <dd class="price price--end money" data-line-index="{{ forloop.index0 }}" data-line-total>
    {{ item.original_line_price | money }}
    </span>
    {%- endif -%}
  5. Select Save.

Method 2

 Alert

If method 1 does not update prices, then it is recommended to use method 2.

  1. Under Sections, select main-cart-items.liquid.
  2. Find each instance of the following code if it exists:
    {{ item.final_line_price | money }}

    or:

    {{ item.original_line_price | money }}
  3. Copy and paste the following code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>

    Cart hooks Dawn

  4. Select Save.

 


 

Step 5: Edit main-cart-footer.liquid

Cart Template Price Element Edits: Cart Total Price

Method 1 (Recommended)

  1. Under Sections, navigate to main-cart-footer.liquid.
  2. Find the cart total price element :
     <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
  3. Add money tags and data-cart-total. It should look like the following:

    <p class="totals__subtotal-value money" data-cart-total>{{ cart.total_price | money_with_currency }}</p>

    Main cart footer Dawn

  4. Select Save.

Method 2

 Alert

If method 1 does not update prices, then it is recommended to use method 2.

  1. Under Sections, select main-cart-footer.liquid.
  2. Find the cart total price element:
    <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
  3. Add the cart total hook:
    <p class="totals__subtotal-value">
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>
    {{ cart.total_price | money_with_currency }}</p>

    Cart total hook Dawn

  4. Select Save.
 Alert

If your theme has the cart-drawer.liquid file under Snippets, then repeat the price elements part of this install.

 

 Pro-Tip

If you are unsure of whether you are using a Vintage or Online Store 2.0 theme, please visit Shopify’s article Theme architecture versions.

 


 

Next Steps

Verify Your Custom Pricing Installation

Step 1: Create a Customer Pricing Tag

Once this installation is completed on your store, we highly recommend verifying the installation.

Custom Pricing displays a series of confirmation banners once you have completed the app's coding installation, to help you verify that the coding installation was done correctly.

The prompts will display within the app's admin, on the home page:

csp verify installation

To verify you have completed the installation properly, select Start in the banner and follow these steps:

  1. Create the discount tag as requested in Custom Pricing and select Save.
  2. Select Next Step in the confirmation banner.

 


 

Step 2: Create a Product Pricing Group

  1. Under Internal Name, enter Bold Test.
  2. Under Step 3 - Select Products, select Select Products.
  3. Select the product titled "#Bold Test Product with variants".
  4. Select Save Selection.
  5. Select Save.
  6. Select the toggle to enable the product pricing group.
  7. Select Next Step in the confirmation banner.

 


 

Step 3: Verify the Product Page Pricing While not Logged in

  1. Select the top link.
  2. Ensure the first variant is listed at $20.00.
  3. Ensure the second variant is listed at $10.00.
  4. Select the second link.
  5. Ensure it is listed at $15.00.
  6. Select Next Step in the confirmation banner.

 


 

Step 4: Verify the Collection Page Pricing While not Logged in

  1. Select Products from the Shopify admin. 
  2. Select #Bold Test Product with variants.
  3. Under Collections, select All.
  4. Select Save.
  5. Select Back to Products.
  6. Select #Bold Test Product with variants.
  7. Under Collections, select All.
  8. Select Save.
  9. Select the link in Step 4 in Custom Pricing.

    select the link in step 4

  10. Ensure Bold Test Product with variants is listed at $10.00.
  11. Ensure Bold Test Product without variants is listed at $15.00.
  12. Select Next Step in the confirmation banner.

 


 

Step 5: Verify the Search Page Pricing While not Logged in

  1. Select the link.
  2. Ensure #Bold Test Product with variants display at $10.00.
  3. Ensure #Bold Test Product without variants display at $15.00.
  4. Select Next Step in the confirmation banner.

 


 

Step 6: Add the Customer Pricing Tag to a Customer Account

  1. Select the link.
  2. Select Bold Test Customer.
  3. Under Tags, select bold-test.
  4. Select Save.
  5. Select Next Step in the confirmation banner.

 


 

Step 7: Log Into Your Store with the Test Account

  1. Select the link.
  2. Log in with the test customer information.
  3. Select Next Step in the confirmation banner.

 


 

Step 8: Verify the Product Page Pricing While Logged in

  1. Select the first link.
  2. Ensure Bold Test Product with variants displays $16.00 for the first variant.
  3. Ensure Bold Test Product with variants displays $8.00 for the second variant.
  4. Select the second link.
  5. Ensure Bold Test Product without variants displays $12.00.
  6. Select Next Step in the confirmation banner.

 


 

Step 9: Verify the Collection Page Pricing While Logged in

  1. Select the first link.
  2. Ensure Bold Test Product with variants displays at a price of $8.00.
  3. Ensure Bold Test Product without variants displays at a price of $12.00.
  4. Select Next Step in the confirmation banner.

 


 

Step 10: Verify the Search Page Pricing While Logged in

  1. Select the first link.
  2. Ensure Bold Test Product with variants displays at $8.00.
  3. Ensure Bold Test Product without variants displays at $12.00.
  4. Select Finish.
  5. The Everything looks good message will display. Simply select the X option to close the banner message.

 


 

Code Removal

The Liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Customer Success team.

You can remove the app from your Shopify admin by following this guide: Uninstall an App from Your Store.

 

 Pro-Tip

If you are experiencing issues with performance on the storefront with Custom Pricing after completing the steps above, we recommend requesting an expert installation. Your theme may require further Liquid code changes.

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