Custom Pricing Code Install Instructions

Follow

Warning!

This article requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please Request a Custom Pricing Installation for help.

Overview

Custom Pricing has a significant coding installation that is required for the app to function correctly on your storefront.

Before you begin, please review our Notes Before Installing Apps guide. This may help answer any questions you have about the installation process.

Note: This installation allows both the Customer Pricing and Quantity Breaks modules to work correctly on your site.

Select each step below to view the instructions:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.

    Select Online Store

  3. Select Actions.

    Select Actions

  4. Select Edit code.

    Select Edit Code

  5. Under "Snippets", find these six files:
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-common.liquid
    • bold-csp-metafield-variant.liquid
    • bold-product.liquid
    • bold-variant.liquid

    Find Snippets

  6. For any that don't exist:
    1. Select Add a new snippet.

      Select Add New Snippet

    2. Enter the correct snippet name.

      Enter Snippet Name

    3. Select Create snippet.

      Select Create Snippet

    4. Copy and paste the code found in each of these links into their respective files:

      Paste Snippet Code

    5. Select Save.

      Select Save

    6. Repeat Steps 6.1 - 6.5 for each missing snippet file.

      Repeat Steps 6.1 - 6.5

Note: Within the theme files, complete the following steps.

  1. Under "Layout", select theme.liquid.

    Select theme.liquid

  2. Copy and paste the following code directly below the {{ content_for_header }} line:
    {% include 'bold-common' %}

    Paste include bold-common

  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

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Templates", select collection.liquid.

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

    Select collection.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. Can't find this code?

    Find for product in collection.products

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

    Include bold-product

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Templates", select index.liquid.

    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. Can't find this code?

    Find for product in collection.products

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

    Include bold-product

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Snippets", select related-products.liquid.

    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. Can't find this code?

    Find for product in collection.products

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

    Include bold-product

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Templates", select search.liquid.

    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.

    Find for item in search.results

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

    Include bold-product

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Templates", select product.liquid.

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

    Select product.liquid

  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

  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 in product.variants

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

    Include bold-variant

  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

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

    Change assign current_variant

  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

  7. Find the following line of code containing:
    products.variant.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.

    Find product.variants.size

    Change this line of code to:
    bold_variants_size

    Change to bold_variants_size

  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

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

    Include bold-product json

  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.

    Find opening form tag

  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

  11. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Templates", select cart.liquid.

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

    Select cart.liquid

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

    Include bold-cart

  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.

    Find for item in cart.items

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

    Include bold-cart-item

  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

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

    Paste span class

  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 money

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

    Paste span class

  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 money

  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

  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.

    Find opening form tag

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

    Paste shappify-qty-cart-msg

  13. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Snippets", select bold-common.liquid.

    Select bold-common.liquid

  2. Copy and paste this code in the bottom of the file.
    {{ 'https://cp.boldapps.net/js/csp.js' | script_tag }}

    Paste script

  3. Select Save.

    Select Save

Overview:

Updates need to be done on all theme files that output product prices on the site. The number and name of these files will vary from theme to theme. Generally, three to five 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 then 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

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

Creating your Pricing Groups:

  1. Log into the 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 (e.g., 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.

Testing 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 Merchant Success team for further assistance.

Next Steps:

Helpful Links:

7 out of 10 found this helpful

Comments

0 comments

Please sign in to leave a comment.