Top

Customer Specific Pricing Liquid Install Instructions

Ninja Notes - Backup the theme

Customer Pricing requires significant changes to be made to the theme files. We strongly recommend creating a duplicate of your theme, and making the changes to the unpublished version of the theme.

1 - Create Snippet Files

 

In the theme's files, look in the theme's snippet folder to see if the following files exist.

  • bold-product
  • bold-variant

If any don't exist, the missing files will need to be manually created. In that case, click on the appropriate tab above for instructions on how to create a particular snippet.

1-2: bold-variant

 

Create a snippet called bold-variant.liquid. Copy and paste this code into the snippet file.

1-1: bold-product.liquid

 

Create a snippet called bold-product.liquid. Copy and paste this code into the snippet file.

2 - Edit the theme.liquid

 

Click on theme.liquid layout to open the file.
Within the theme.liquid, scroll down to the bottom, and look for the closing body tag, </body>.

Directly above the </body> code, add this code:

3-1 - Edit the collection.liquid

 

Click on collection.liquid template to open the file. Within the file, look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following below each instance:

If you can't find this code, look to see if the theme has a "product-loop.liquid" . If you still can't find this code, click on the Can't Find tab.

The code might look different

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

The code to look for will most likely start with "{% for product in...". If you find a line that starts with that, or what's listed above, add the following underneath it:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

If you find this, then put the following underneath it instead:

The code may be in a different file

Some themes will have the above code in a file that's included in the collection.liquid file. Try looking for the following files instead (in the snippet folder):

3-2 - Edit the index.liquid

 

NOTE: This step is only required if your theme displays products on the home page (index) and does not include a snippet file, like product-loop.

Click on index.liquid template to open the file. Within the file, look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following below each instance:

If you can't find this code, click on the Can't Find tab.

The code might look different

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

The code to look for will most likely start with "{% for product in...". If you find a line that starts with that, or what's listed above, add the following underneath it:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

If you find this, then put the following underneath it instead:

The code may be in a different file

Some themes will have the above code in a file that's included in the index.liquid file. Try looking for the following files instead (in the snippet folder):

Many themes will have a variation of this code that helps control the prices on the home page, but some themes don't. If you can't find the code, then this step can be skipped..

4-1 - Edit the related products.liquid

 

Open the snippets folder and click on the related-product.liquid file to open it.  Look for all instances of this (this line may appear more than once in a file):

{% for product in collection.products %}

Add the following below each instance:

If the theme doesn't have a related products file, or you can't find the code, then click on the Can't Find tab.

If you can't find the file

Some themes will have the related products code in a differently named file. Try looking for the following files instead:

If you can find the file but not the code

Some themes will use a slight variation of the code to search for. Try looking for the following instead:

The code to look for will most likely start with "{% for product in...". If you find a line that starts with that, or what's listed above, add the following underneath it:

Some files may use something even more different, such as this:

  • {% for prod in collection.products %}

If you find this, then put the following underneath it instead:

4-2 - Edit the search.liquid

 

Click on search.liquid template to open the file.  In the search.liquid, look for all instances of this (this may appear more than once in the file):

{% for item in search.results %}

Below each instance, add the following:

5 - Edit the product.liquid

 

Click on product.liquid template to open the file.
Add this code to the top of the product.liquid file:

6 - Product.liquid cont.

 

Find all instances of this (this may appear more than once in the file):

{% for variant in product.variants %}

If you can't find this in the product.liquid file, then check the snippets folder for a product-form.liquid or short-form.liquid file, and look for the code in there

Below each instance, add the following:

Ninja Notes - Swatches

If your theme uses swatches, which is functionality where the theme shows variants as buttons instead of through a dropdown menu, the code in step 6 will also need to be added to a snippet file, usually named swatch.liquid or product-swatch.liquid.

7 - Product.liquid cont.

 

Find all instances of this code ... ... and replace with this code
product.variants.size bold_variants_size
{{ product | json }} {% include 'bold-product', output: 'json' %}

If you can't find this in the product.liquid file, then check the snippets folder for a product-form.liquid or short-form.liquid file, and look for the code in there.

If you can't find {{ product | json }} in those files, then try searching for it in the theme.liquid file. If it's not in the product.liquid or theme.liquid file, then that can be skipped.

8 - Update pricing code

 

Updates need to be done on all theme files that output product prices on the site. The number and name of the files will vary from theme to theme. Usually 3-5 files will need to be updated, which will control the price fields on the product, collection, search, related-products (on the product page) and homepage pages. It's important that each theme file that outputs a price be modified, to ensure the correct pricing always shows.

When you're ready to proceed, click on the "files to update" tab.

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

When you find a file that your theme has, click on the "product.price" tab above to continue.

When you've gone through the list, this step should be complete.

Look for each of these ... ... and replace all instances with this code
product.price bold_price
product.price_min bold_price_min
product.price_max bold_price_max
product.price_varies bold_price_varies
product.compare_at_price bold_compare_at_price
product.compare_at_price_min bold_compare_at_price_min
product.compare_at_price_max bold_compare_at_price_max
product.compare_at_price_varies bold_compare_at_price_varies
product.selected_or_first_available_variant bold_selected_or_first_available_variant
product.variants.first bold_selected_or_first_available_variant
product.variants[0] bold_selected_or_first_available_variant

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

If you found and replaced some of the above, then click on the "files to update" tab and continue down the file list.

If the file has none of these, then click on the "item.price" tab.

Look for each of these ... ... and replace all instances with this code
item.price bold_price
item.price_min bold_price_min
item.price_max bold_price_max
item.price_varies bold_price_varies
item.compare_at_price bold_compare_at_price
item.compare_at_price_min bold_compare_at_price_min
item.compare_at_price_max bold_compare_at_price_max
item.compare_at_price_varies bold_compare_at_price_varies
item.selected_or_first_available_variant bold_selected_or_first_available_variant
item.variants.first bold_selected_or_first_available_variant
item.variants[0] bold_selected_or_first_available_variant

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

If you found and replaced some of the above, then click on the "files to update" tab and continue down the file list.

If the file has none of these, then bring up the file editor's search feature (ctrl-f), and do a search for ".price" (minus the quotes), and continue below.

If nothing is found after the search, or if you find "variant.price","variant.price_min","variant.price_max", or "variant.price_varies", then nothing will need to be done with this file, and you can click on the "files to update" tab and continue down the file list.

If something is found after the search, take note of what was found, and then click on the "other" tab.

Some files in some themes will use something other than "product" or "item", and you'd need to change our code to work with what the file uses. For example, a file may use "product-detail" instead.

To proceed, substitute * with whatever was before the ".price" when you searched in the previous section, then look for that code in the file and replace what you find with the apps code.  Again, it's not necessary to change anything with "variant" in it, such as "variant.price".

For example if you found "product-detail.price", then replace "*" with "product-detail" with each item below, and then look for that code in the theme. So, for the first item, you'd look for "product-detail.price", and if found, replace it with "bold_price".

Look for each of these ... ... and replace all instances with this code
*.price bold_price
*.price_min bold_price_min
*.price_max bold_price_max
*.price_varies bold_price_varies
*.compare_at_price bold_compare_at_price
*.compare_at_price_min bold_compare_at_price_min
*.compare_at_price_max bold_compare_at_price_max
*.compare_at_price_varies bold_compare_at_price_varies
*.selected_or_first_available_variant bold_selected_or_first_available_variant
*.variants.first bold_selected_or_first_available_variant
*.variants[0] bold_selected_or_first_available_variant

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

When you're done with this file, click on the "files to update" tab and continue down the file list.

9 - Test the install

 

Setup a test in the app (for step by step instructions on how to use the app click here):

  1. Log into the app admin.
  2. Create a new pricing tier and a tag associated with the new tier.
  3. Create a new Customer 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 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 in and verify that the pricing showing is the regular product price.
  3. Go to the product page and check the variant dropdown 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 pages price is showing the product's regular price.
  5. Log into the customer account that you created prior 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 pricing showing 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.
Have more questions? Submit a request