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 the Online Store option on the left-hand side of your Shopify admin

  3. Select Actions.

    Select the Actions option beside your theme name

  4. Select Edit code.

    Select Edit Code in the drop down menu

  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 the snippets referenced in the previous list

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

      Select the Add a New Snippet option underneath the Snippets header

    2. Enter the correct snippet name.

      Enter the respective snippet's name

    3. Select Create snippet.

      Select the Create Snippet option in the bottom right corner of the pop-up window

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

      Copy and paste the respective snippet code from the list referenced above

    5. Select Save.

      Select Save in the top right corner of the code editor

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

      Repeat Steps 6.1 - 6.5 of this guide for each missing snippet file

Continuing within the theme files, complete the following steps:

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

    Select the theme.liquid file within the Layout section

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

    Copy and paste the bold-common include code referenced above underneath the content for header line of code

  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>

    Copy and paste the script code referenced here above the close body tag

  4. Select Save.

    Select Save in the top right corner of the code editor

Continuing 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 the collection.liquid or collection-template.liquid file within the Templates or Sections section

  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 the for product in collection.products line of code referenced above

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

    Copy and paste the above include bold-product code directly below each instance of the for product in collection.products code

  4. Select Save.

    Select Save in the top right corner of the code editor

Continuing within the theme files, complete the following steps:

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

    Select the index.liquid file within the Templates section

  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 the for product in collection.products line of code referenced above

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

    Copy and paste the above include bold-product code directly below each instance of the for product in collection.products line of code

  4. Select Save.

    Select Save in the top right corner of the code editor

Continuing within the theme files, complete the following steps:

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

    Select the related-products.liquid file within the Snippets section

  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 the for product in collection.products code referenced above

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

    Copy and paste the above include bold-product code directly below each instance of the for product in collection.products line of code

  4. Select Save.

    Select Save in the top right corner of the code editor

Continuing within the theme files, complete the following steps:

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

    Select the search.liquid file within the Templates section

  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 the for item in search.results code referenced above

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

    Copy and paste the above include bold-product code directly below each instance of the for item in search.results code

  4. Select Save.

    Select Save in the top right corner of the code editor

Continuing 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 the product.liquid or product-template.liquid file within the Templates or Sections section

  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 %}

    Copy and paste the above include bold-product code at the top of this file

  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 the for variant in product.variants code referenced above

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

    Copy and paste the above include bold-variant code directly below each instance of the for variant in product.variants code

  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 the assign current_variant line of code referenced above

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

    Change the assign current_variant line of code to what's referenced above

  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.

    Copy and paste the above include bold-variant code directly below the previous line of code

  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 the product.variants.size line of code referenced above

    Change this line of code to:
    bold_variants_size

    Change the bold_variants_size line of code to what's referenced above

  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 the product json line of code referenced above

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

    Change the product json line of code to what's referenced above

  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 the 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 the QB grid code referenced above

  11. Select Save.

    Select Save in the top right corner of the code editor

Continuing 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 the cart.liquid or cart-template.liquid file within the Templates or Sections section

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

    Copy and paste the bold-cart code referenced above at the top of this file

  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 the for item in cart.items line of code referenced above

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

    Copy and paste the above bold-cart-item code directly below each instance of the for item in cart.items line of code

  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 the item.price money line of code referenced above

  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>

    Copy and paste the span class above in front of each instance of the previous line of 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 the item.line_price money line of code referenced above

  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>

    Copy and paste the span class above in front of each instance of the previous line of 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 the cart.total_price money line of code referenced above

  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>

    Copy and paste span class above in front of each instance of the previous line of code

  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 the opening form tag

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

    Cope and paste the above shappify-qty-cart-msg code directly above the opening form tag

  13. Select Save.

    Select Save in the top right corner of the code editor

Continuing within the theme files, complete the following steps:

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

    Select bold-common.liquid file within the Snippets section

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

    Copy and paste the above script code at the bottom of this file

  3. Select Save.

    Select Save in the top right corner of the code editor

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:

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

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