This article covers how Custom Pricing is installed on your Shopify theme.
New stores and theme changes
If you're setting up Custom Pricing for the first time, or if you've recently switched to a new Shopify theme, the onboarding guide in the app will walk you through everything you need to get up and running.
The two following steps take care of installing Custom Pricing on your theme:
Turning on the Bold Custom Pricing app embed: This connects the app to your theme.
Configuring the app embed settings: The auto-setup tool finds the correct settings for your theme, so pricing displays correctly across your storefront.
Please visit Activate Custom Pricing for detailed instructions.
If you need help or the auto-setup tool doesn't work correctly for your theme, please reach out to our Customer Success team.
Legacy app embed install
The legacy app embeds are still active for stores that were set up before the auto-setup tool was introduced. You don't need to make any changes, this section is here if you need to review or adjust your current app embed settings.
Caution: Do not enable the new Bold Custom Pricing app embed alongside your legacy app embeds. Only one set of embeds should be active at a time. Enabling both can cause pricing to display incorrectly on your storefront.
If you're not sure which version of Custom Pricing your store is using, open the Custom Pricing app and check the version number in the footer.
V3 instructions
Step 1: App embeds
From your Shopify admin, navigate to Online Store > Themes.
Click the Edit theme button.
In the left sidebar, click App embeds.
The following app embeds must be enabled:
Legacy CSP Price Rule
Legacy CSP Prices
Legacy CSP QB Grid
Legacy Cart Prices
Click Save in the top right-hand corner.
Step 2: Configure features
After enabling the embeds, you can configure these optional features and integration settings.
Click the arrow next to Legacy CSP Price Rule to expand its settings.
Enable compare at price: Enable this setting by moving the toggle to the right if you want to to display both the regular price (with a strike-through) and the discounted price on your storefront.
Skip PRE JS file load: Enable this setting by moving the toggle to the right if you also use Bundles V3 or Discounts Powered by Bold Price Rules on your store.
Click the arrow next to Legacy CSP Prices, and scroll to the Product Drawer section (relevant only if your theme uses popups or drawers to show product information).
Enable Support for Products in Drawers/Popups: Enable this setting by moving the toggle to the right to allow Custom Pricing to update pricing and display the quantity break grid within pop-ups or drawers.
Click Save in the top right-hand corner.
Step 3: Adjust CSS query selectors (for themes other than Horizon)
If you're using a theme other than Horizon, you will likely need to adjust the CSS query selectors to ensure Custom Pricing displays correctly.
Note: If you need help adjusting the CSS query selectors, please reach out to our Customer Success team.
Collection and Product Pages
Click the arrow next to Legacy CSP Prices to expand its settings.
Product Price Locator (Query Selector): Enter the query selector for the price element on the product page.
Collection Item Locator (Query Selector): Enter the query selector class names for the card or element that contains product information for collection pages.
Collection Page Price Locator (Query Selector): Enter the query selector for the price element inside each product card on your collection pages.
Product Drawer/Popup Locator (Query Selector): Enter the query selector for the drawer/popup element (if your theme uses product drawers/popups).
Click Save in the top right-hand corner after making your adjustments.
Quantity Breaks Grid
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Query Selector For Element To Place QB Grid In: Enter the query selector of the area where you want the Quantity Breaks grid to appear.
Click Save in the top right-hand corner after making your adjustments.
Cart Page
Click the arrow next to Legacy Cart Prices to expand its settings.
Cart Item List Locator (Query Selector): Enter the query selector for the list or table element containing cart items.
Cart Total Value Locator (Query Selector): Enter the query selector for the total cart value element.
Cart Item Locator (Query Selector): Enter the query selector for the cart items.
Cart Item Price Locator (Query Selector): Enter the query selector for the price element of the line item.
Cart Line Item Price Locator (Query Selector): Enter the query selector for the total line item value.
Checkout Button: Enter the query selector for the checkout button element.
Click Save in the top right-hand corner after making your adjustments.
Step 4: Timing adjustments (only if pricing is not displaying correctly)
If you're experiencing issues with pricing not displaying correctly after completing the steps above, you can try adjusting the timing settings.
Note: If you are having trouble with the following settings, please reach out to our Customer Success team.
Click the arrow next to Legacy CSP Prices to expand its settings.
Delay After Page Load: Use the slider to add a delay (in milliseconds) to your page load. If the value is too low, prices might be incorrect or variants hidden. If too high, you might see prices change live.
Delay After Content Change On Collection Page: Use the slider to add a time delay (in milliseconds) to content changes on collection pages. This helps Custom Pricing update prices after filters or searches are applied. Too low, and updates might not happen; too high, and changes might be slow.
Check For Variant Change: Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Delay in each network call: Use the slider to increase the delay (in milliseconds) in each network call. This can reduce browser load and increase page speeds. The ideal delay can vary by theme.
Load All Collections: This setting attempts to load all product and variant data in collections to improve price calculation. Only enable this if you're seeing incorrect pricing on your collection pages. It's recommended to keep it disabled if possible, as enabling it might cause errors if Shopify can't load all data.
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Check For Variant Change (Product Page): Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Click the arrow next to Legacy CSP Cart Prices to expand its settings.
Check For Cart Change: Use the slider to define the interval (in milliseconds) between Custom Pricing's checks for cart updates. Smaller intervals can increase browser load; longer intervals can cause a delay between price updates.
Delay after cart change: Use the slider to define the interval (in milliseconds) that Custom Pricing will wait to display updated pricing in your cart drawer (AJAX cart).
Click Save in the top right-hand corner after making your adjustments.
V2 instructions
Step 1: Enable app embeds
From your Shopify admin, navigate to Online Store > Themes.
Click the Edit theme button.
In the left sidebar, click App embeds.
Enable the following app embeds by moving the toggle to the right:
Legacy CSP Common V1/V2
Legacy CSP Prices
Legacy CSP QB Grid
Legacy CSP Cart Prices
Click Save in the top right-hand corner.
Step 2: Integrate product drawers, popups, and featured blocks
If your theme uses drawers, popups, or featured blocks to display product information, enable the setting as shown below.
Click the arrow next to Legacy CSP Prices to expand its settings.
In the Product Drawer section, check the box next to Enable Support for Products in Drawers/Popups/Featured Blocks.
Click Save in the top right-hand corner.
Step 3: Adjust CSS query selectors (for themes other than Horizon)
If you're using a theme other than Horizon, you will likely need to adjust the CSS query selectors to ensure Custom Pricing displays correctly.
Note: If you need help adjusting the CSS query selectors, please reach out to our Customer Success team.
Collection Page, Product Pages, and Search Results
Click the arrow next to Legacy CSP Prices to expand its settings.
Product Price Locator (Query Selector): Enter the query selector for the price element on the product page.
Collection Item Locator (Query Selector): Enter the query selector class names for the card or element that contains product information for collection pages.
Collection Page Price Locator (Query Selector): Enter the query selector for the price element inside each product card on your collection pages.
Product Drawer/Popup Locator (Query Selector): Enter the query selector for the drawer/popup element (if your theme uses product drawers/popups).
Product Drawer/Popup Price Locator (Query Selector): Enter the query selector for the price element inside the drawer/popup (if your theme uses product drawers/popups)
Search Result Item Locator (Query Selector): Enter the query selector for the element that contains a single search result.
Search Result Item Price Locator (Query Selector): Enter the query selector for the price element within a search result item
Locator For Any Other Product Element (Query Selector): Enter the query selector for the Product Cards or Elements which are not covered by other settings.
Price Locator For Any Other Product Element (Query Selector): Enter the query selector for the price element within the element found using the above selector.
Click Save in the top right-hand corner after making your adjustments.
Quantity Breaks Grid
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Query Selector For Element To Place QB Grid In: Enter the query selector of the area where you want the Quantity Breaks grid to appear.
Click Save in the top right-hand corner after making your adjustments.
Cart Page
Click the arrow next to Legacy CSP Cart Prices to expand its settings.
Cart Total Value Locator (Query Selector): Enter the query selector for the element displaying the total value of the cart.
Cart Item List Locator (Query Selector): Enter the query selector for the main list or table element containing your cart items.
Cart Item Locator (Query Selector): Enter the query selector for individual cart items.
Line Item Total Price Locator (Query Selector): Enter the query selector for the total value of each line item (quantity x price).
Cart Item Price Locator (Query Selector): Enter the query selector for the price element of each individual line item.
Checkout Button (Query Selector): Enter the query selector for the checkout button element.
Click Save in the top right-hand corner after making your adjustments.
Step 4: Timing adjustments (only if pricing is not displaying correctly)
If you're experiencing issues with pricing not displaying correctly after completing the steps above, you can try adjusting the timing settings.
Note: If you are having trouble with the following settings, please reach out to our Customer Success team.
Click the arrow next to Legacy CSP Common V1/V2 to expand its settings.
Load All Collections: This setting attempts to load all product and variant data in collections to improve price calculation. Only enable this if you're seeing incorrect pricing on your collection pages. It's recommended to keep it disabled if possible, as enabling it might cause errors if Shopify can't load all data.
Delay Loading of Collection Data: Use the slider to increase the delay (in milliseconds) if you are seeing a large increase in your collection page load times. While an increased delay can reduce page load times, it can also result in inaccurate pricing if Custom Pricing is not able to display the correct prices in time.
Click the arrow next to Legacy CSP Prices to expand its settings.
Delay After Page Load: Use the slider to add a delay (in milliseconds) to your page load. If the value is too low, prices might be incorrect. If too high, you might see prices change live.
Check For Variant Change (Product Page): Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Delay Price Update by X milliseconds (Product Page): Use this slider to add a short delay when a user changes a variant to avoid pricing conflicts with your theme's animations.
Delay After Content Change On Collection Page: Use the slider to add a time delay (in milliseconds) to content changes on collection pages. This helps Custom Pricing update prices after filters or searches are applied. Too low, and updates might not happen; too high, and changes might be slow.
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Check For Variant Change (Product Page): Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Delay loading of QB Grid (Product Page): Use the slider to enter a time (in milliseconds) that delays the quantity break grid from loading on your page. This can prevent it from displaying before your theme's content has loaded.
Click the arrow next to Legacy CSP Prices to expand its settings.
Check For Cart Change: Use the slider to define the interval (in milliseconds) between Custom Pricing's checks for cart updates. Smaller intervals can increase browser load; longer intervals can cause a delay between price updates.
Delay Price Update: Use the slider to define the delay (in milliseconds) that Custom Pricing waits to display updated pricing in your cart drawer (AJAX cart). Too low, and updates might not happen; too high, and changes might be slow.
Click Save in the top right-hand corner after making your adjustments.
V1 instructions
Step 1: Enable app embeds
From your Shopify admin, navigate to Online Store > Themes.
Click the Edit theme button.
In the left sidebar, click App embeds.
Enable the following app embeds by moving the toggle to the right:
Legacy CSP Common V1/V2
Legacy CSP Prices
Legacy CSP QB Grid
Legacy CSP Cart Prices
Click Save in the top right-hand corner.
Step 2: Configure features
After enabling the app embeds, configure these settings to support Custom Pricing's functionality across your store.
Click the arrow next to Legacy CSP Prices to expand its settings.
In the For Product Page section, enable Hide ‘Default Title’ options and Hide ‘Title’ Option in Product Form by moving the toggle to the right, if they aren't already.
In the Hide Products section, enable Hide Products with tag {CSPTAG}-HIDE by moving the toggle to the right, if it isn't already.
In the Product Drawer section, enable Enable Support for Products in Drawers/Popups by moving the toggle to the right, if your theme uses these elements to display product information.
Click Save in the top right-hand corner.
Step 3: Adjust CSS query selectors and IDs (for themes other than Horizon)
If you're using a theme other than Horizon, you will likely need to adjust the CSS query selectors or Checkout Button ID to ensure Custom Pricing functions correctly.
Note: If you need help adjusting the CSS query selectors, please reach out to our Customer Success team.
Collection Page, Product Pages, and Search Results
Click the arrow next to Legacy CSP Prices to expand its settings.
In the For Product Page section:
Product Price Locator (Query Selector): Enter the query selector for the price element on the product page.
Option Element locator (Query Selector): Enter the query selector for your theme’s variant options.
Form Element Locator (Query Selector): Enter the query selector for the variant title dropdown element.
In the For All Other Pages (Index/Collections etc) section:
Collection Item Locator (Query Selector): Enter the query selector class names for the card or element that contains product information for collection pages.
Collection Page Price Locator (Query Selector): Enter the query selector for the price element inside each product card on the collection page.
In the Hide Products section:
Products Content Container Locator (Query Selector): Enter the query selector for the container that has product information on the product page.
Search Item Locator (Query Selector): Enter the query selector for the elements that appear as part of search.
In the Product Drawer section:
Product Drawer/Popup Locator (Query Selector): Enter the query selector for the drawer/popup element if your theme uses drawers or popups to display product information.
Click Save in the top right-hand corner after making your adjustments.
Quantity Breaks Grid
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Query Selector For Element To Place QB Grid In: Enter the query selector of the area where you want the Quantity Breaks grid to appear.
Click Save in the top right-hand corner after making your adjustments.
Cart Page
Click the arrow next to Legacy CSP Cart Prices to expand its settings.
Checkout Button ID: Enter the ID of your checkout button element.
Query Selector For Options in LineItem: Enter the query selector for the elements containing line item properties or descriptions.
Click Save in the top right-hand corner after making your adjustments.
Step 4: Timing adjustments (only if pricing is not displaying correctly)
If you're experiencing issues with pricing not displaying correctly after completing the steps above, you can try adjusting the timing settings.
Note: If you are having trouble with the following settings, please reach out to our Customer Success team.
Click the arrow next to Legacy CSP Common V1/V2 to expand its settings.
Load All Collections: This setting attempts to load all product and variant data in collections to improve price calculation. Only enable this if you're seeing incorrect pricing on your collection pages. It's recommended to keep it disabled if possible, as enabling it might cause errors if Shopify can't load all data.
Delay Loading of Collection Data: Use the slider to increase the delay (in milliseconds) if you are seeing an increase in your collection page load times. While an increased delay can reduce page load times, it can also result in inaccurate pricing if Custom Pricing is not able to display the correct prices in time.
Click the arrow next to Legacy CSP Prices to expand its settings.
Delay After Page Load: Use the slider to add a delay (in milliseconds) to your page load. If the value is too low, prices might be incorrect. If too high, you might see prices change live.
Delay Price Update: This adds a delay when users change a variant to allow Custom Pricing to display the correct pricing.
Delay After Content Change On Collection Page: Use the slider to add a time delay (in milliseconds) to content changes on collection pages. This helps Custom Pricing update prices after filters or searches are applied. Too low, and updates might not happen; too high, and changes might be slow.
Check For Variant Change: Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Click the arrow next to Legacy CSP QB Grid to expand its settings.
Check For Variant Change Every X milliseconds (Product Page): Use the slider to set a time (in milliseconds) for Custom Pricing to check for updates when customers change variants on the product page. Smaller intervals can increase browser load; longer intervals can delay price updates.
Delay loading of QB Grid by X milliseconds (Product Page): Use the slider to enter a time (in milliseconds) that delays the quantity break grid from loading on your page. This can prevent it from displaying before your theme's content has loaded.
Click the arrow next to Legacy CSP Cart Prices to expand its settings.
Check For Cart Change: Use the slider to define the interval (in milliseconds) between Custom Pricing's checks for cart updates. Smaller intervals can increase browser load; longer intervals can cause a delay between price updates.
Delay After Page Load: Use the slider to add a delay (in milliseconds) to your page load before the cart page prices update. Too low, and updates might not happen; too high, and changes might be slow.
Click Save in the top right-hand corner after making your adjustments.
Legacy Liquid code install instructions
Alert: If you've installed Custom Pricing on a vintage theme prior to December 13, 2023, you may have the Liquid code installed to your theme as shown below.
V3 code install instructions
Step 1: Add Snippet Files
Duplicate themes to create a backup copy.
From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Snippets, find the bold-pr.liquid file.
If this file doesn't exist:
Select Add a new snippet.
Enter the correct snippet name.
Select Create snippet.
Copy and paste the code from the bold-pr.liquid file:
<script id="bold-platform-data" type="application/json">{ "shop": { "domain": "{{ shop.domain }}", "permanent_domain": "{{ shop.permanent_domain }}", "url": "{{ shop.url }}", "secure_url": "{{ shop.secure_url }}", "money_format": {{ shop.money_format | json }}, "currency": {{ shop.currency | json }} }, "customer": { "id": {{ customer.id | json }}, "tags": {{ customer.tags | json }} }, "cart": {{ cart | json }}, "line_item_products": {{ cart | map: "items" | map: "product" | json }}, "template": "{{ template | split: "." | first }}", "product": {{ product | json }}, "collection": {{ collection.products | json }}}</script>{{ 'https://static.boldcommerce.com/bold-platform/sf/pr.js' | script_tag }}<style> .money[data-product-id], .money[data-product-handle], .money[data-variant-id], .money[data-line-index], .money[data-cart-total] { animation: moneyAnimation 0s 2s forwards; visibility: hidden; } @keyframes moneyAnimation { to { visibility: visible; } } .shappify_qb_grid { width: auto; background: #fff; margin: 8px 0; } .shappify_qb_grid, .shappify_qb_grid td, .shappify_qb_grid th { text-align: left; padding: 5px; border: 1px solid #ccc; border-collapse: collapse; }</style>
Click Save.
Step 2: Edit theme.liquid
Under Layout, select theme.liquid.
Copy and paste the following code below the {{ content_for_header }} line:
{%- render 'bold-pr' -%}Copy and paste the following code under {%- render 'bold-pr' %}:
<script defer src="/tools/shappify-csp/v2/api/{{ shop.permanent_domain }}/cspqb.js?v=20241206" type="text/javascript"></script>Click 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 vary from theme to theme. Generally, 3-5 files 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 requirse 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 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 should 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 %}The following code should be inserted directly after each instance:
<script type="application/json" class="bold-product-json">{{ product | json }}</script>In some cases, the product loop code may look slightly different:
{% for item in search.results %}We then need to adjust the end of our Bold price code to include the loop's product reference:
Some themes will use a slight variation of this code. The first half of this code will use one of the following: {% for product in {% for prod in {% for item inThe second half will be a variation of the following: selected_collection.products %} collection.products %} search.results %} collection.all.products %} collections.all.products %} product_collection.products %} products %} product-list.products %} recommendations.products %} featured_collection.products %} featuredCollection.products %} link.object.products %} collection_products %} coll.products %} collection %} collections %}<script type="application/json" class="bold-product-json">{{ item | json }}</script>
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 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 requires 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 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 are 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}}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>In some cases, the product price code may look slightly different:
{{ item.price | money }}The following code should still be placed around each of these instances with the <span> tags wrapping this price code:
<span class="money" data-product-id="{{ item.id }}">{{ item.price | money }}</span>Some themes will use a slight variation of this code. If you can't find it, try looking for the following instead: {{ price | money }} {{ price }} {{ formatted_price }} {{ money_price }} {{ product.price | money }} {{ item.price | money_without_trailing_zeros }} {{ item.price | money }} {{ current_variant.price | money }}
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 }}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>Next you'll need to find each instance of coding that looks similar to this:
{{ item.line_price | money }}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>Lastly, you'll need to find each instance of coding that looks similar to this:
{{ cart.total_price | money }}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>
Step 6: Optional - Place the Quantity Breaks Grid
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:
Under Templates, select product.liquid.
Note: If your theme is using Sections, the contents for this file may be within product-template.liquid.
Find where you want to place your quantity breaks grid in the code.
Note: Generally, most store owners place this grid code either above or below their quantity selector.
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>Click Save.
Step 7: Install the AJAX Scripts
Note: Not all of the following coding snippets need to be inserted into your theme. You 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 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 need to use our Cart Doctor function.
Most themes use the function buildCart to show your products in their AJAX modals and pass this information between both areas.
You need to find where this code is in one of the above files, and paste the following code within this function:
// Bold:PREif (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:PRESome themes may use the function refreshCart to show your items in these modals.
You need to find where this code is in one of the above files, and paste the following code within this function:
// Bold:PREif (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:PREThemes that simply display the information from your cart in the AJAX modals 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 need to find where this code is in one of the above files, and paste the following code within this function:
// Bold:PREif (window.BOLD && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function'){BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');}// Bold:PRESome themes grab this information through the updateView function.
You need to find where this code is in one of the above files, and paste the following code within this function:
// Bold:PREif (window.BOLD && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === 'function'){BOLD.common.eventEmitter.emit('BOLD_COMMON_cart_loaded');}// Bold:PRE
V1 & V2 code install instructions
This installation allows both the Custom Pricing and Quantity Breaks modules to work correctly on your store.
Note: This installation does 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.
Step 1: Add Snippet Files
Duplicate themes to create a backup copy.
From the Shopify admin, select Online Store.
Select Actions.
Select Edit code.
Under Snippets, find these seven 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
For any that don't exist:
Select Add a new snippet.
Enter the correct snippet name.
Select Create snippet.
Copy and paste the code found in each of these links into their respective files:
Click Save.
Repeat Steps 6.1 - 6.4 for each missing snippet file.
Step 2: Edit theme.liquid
Under Layout, select theme.liquid.
Copy and paste the following code directly below the {{ content_for_header }} line:
{% render 'bold-common' %}{% render 'bold-includes' %}If you are using Custom Pricing in Variant Dependent Method (V1) copy and paste the following code under the {%- render 'bold-xxxx' -%} statements:
<script async src="/tools/shappify-csp/customer_pricing.php?v=20250501"></script><script defer src="/tools/shappify-csp/v2/api/{{ shop.permanent_domain }}/csp_v1.js?v=20250430" type="text/javascript"></script>If you are using Custom Pricing Draft Order Method (V2) copy and paste the following code under the {%- render 'bold-xxxx' -%} statements:
<script defer src= "/tools/shappify-csp/csp_install_check.js?shop={{ shop.permanent_domain }}" type="text/javascript"></script><script defer src="/tools/shappify-csp/v2/api/{{ shop.permanent_domain }}/csp.js?v=20250103" type="text/javascript"></script>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>Click Save.
Step 3: Edit collection.liquid
Under Templates, select collection.liquid.
Note: The contents for this file may be located under Sections in the collection-template.liquid file.
Find the following line of code:
{% for product in collection.products %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{%-include 'bold-product' with product, hide_action: 'skip' -%}Click Save.
Step 4: Edit index.liquid
Under Templates, select index.liquid.
Find the following line of code:
{% for product in collection.products %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{% include 'bold-product' with product, hide_action: 'skip' %}Click Save.
Step 5: Edit related-products.liquid
Under Snippets, select related-products.liquid.
Find the following line of code:
{% for product in collection.products %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{% include 'bold-product' with product, hide_action: 'skip' %}Click Save.
Step 6: Edit search.liquid
Under Templates, select search.liquid.
Find the following line of code:
{% for item in search.results %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{% include 'bold-product' with item, hide_action: 'skip' -%}Click Save.
Step 7: Edit product.liquid
Under Templates, select product.liquid.
Note: The contents for this file may be located under "Sections" in the product-template.liquid file.
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 %}Find the following line of code:
{% for variant in product.variants %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{% include 'bold-variant' with variant, hide_action: 'skip' %}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
Change this line of code to:
{% assign current_variant = bold_selected_or_first_available_variant %}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.
Find the following line of code containing:
product.variants.size
Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Change this line of code to:
bold_variants_size
Find the following line of code:
{{ product | json }}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Change this line of code to:
{%- include 'bold-product', output: 'json' -%}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.
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 displays on your storefront. We generally suggest placing this after the variant selector element.
Click Save.
Step 8: Edit cart.liquid
Under Templates, select cart.liquid.
Note: The contents for this file may be located under Sections in the cart-template.liquid file.
Copy and paste the following code at the top of this file:
{%- include 'bold-cart' -%}Find the following line of code:
{% for item in cart.items %}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
Copy and paste this code directly below each instance:
{%- include 'bold-cart-item' with item -%}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 may need to add the line of code for each instance.
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>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 may need to add the line of code for each instance.
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>Find each instance of the following code:
{{ cart.total_price | money }}Note: This line may appear more than once in the file and you may need to add the line of code for each instance.
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>
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.
Copy and paste the following code above the opening <form> tag:
<div id="shappify-qty-cart-msg"></div>
Click Save.
Step 9: Edit bold-includes.liquid
Under Snippets, select bold-includes.liquid.
Copy and paste this code in the bottom of the file.
{{ 'https://cp.boldapps.net/js/csp.js' | script_tag }}Click 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 requires 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 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 should 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:
Log into the Custom Pricing app admin.
Create a new pricing tier and a tag associated with the new tier.
Create a new Custom Pricing group, assign a small discount for the new tier (Example 1%), and select a single product to apply the discount to.
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:
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.
Go to any collection page that has the selected product on it and verify that the price shown is the regular product price.
Go to the product page and check the variant drop-down selector to make sure that the app's variants aren't showing there.
While on the product page, check to see if the product page's price is showing the product's regular price.
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.
Go to any collection page and verify that the price shown is the discounted app pricing.
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.
Uninstall
The app embeds can be turned off or Liquid code can be removed by going through the steps above to find their location. If you'd like help removing any Liquid code from your theme files, please reach out to our Customer Success team.
To cancel your subscription to Custom Pricing and remove the app from your store, please follow these steps:
In Custom Pricing, navigate to Settings > General, and click Pause All Groups, or Global Clear > Delete All and wait for the sync to complete. This automatically turns off all active pricing groups and reverts your product prices to their original state.
From your Shopify admin, click Settings.
Click Apps and sales channels.
Click the three dots next to Bold Custom Pricing, and select Uninstall.
Optional: Select a reason for the uninstall.
Click Uninstall.