Skip to main content

Integrate PRE with Shopify

This guide shows you how to integrate Price Rule's storefront script into any Shopify theme so that you can manipulate storefront prices.

Prerequisites​

Before you get started, complete the following steps:

  1. Familiarize yourself with Shopify liquid code. For more information on Shopify liquid code, refer to the Shopify Liquid Reference guide.
  2. Duplicate your theme to create a backup copy before making changes.
  3. Follow the Price Rules Getting Started guide to get connected to our Bold Platform.

Step 1: Add Snippet Files​

  1. Log in to your Shopify store’s admin and select Online Store.

  2. Under the Current theme click the Actions drop down and select Edit code to view your theme's code.

  3. Under Snippets find the bold-pr.liquid file and select it. If this file does not exist, click on Add a new snippet, set the name as bold-pr.liquid and click Create snippet.

  4. Make sure that the bold-pr.liquid file is open by selecting it and copy and paste the following code, then Save the 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>

  5. Stay on the Code page and proceed to Step 2.

Step 2: Edit theme.liquid​

  1. In the Code page, under Layout find the theme.liquid file and select it to open it.

  2. Copy and paste the following code below the {{ content_for_header }} line:

    {%- render 'bold-pr' -%}

  3. Click Save to save the file

Step 3: Add the Product Loop Code​

You must add the product loop code to all theme files that pull product information to the storefront. The number and name of these files varies from theme to theme. Generally, you need to update three to five files.

These theme files control the product information on the product, collection, search, related products, and home pages. You must add the product loop code to each theme file that pulls this information to ensure the correct information always shows for customers.

note

You must go back and edit multiple files within your theme code to add the product loop code.

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 with Theme Files to Update​

Themes should contain most of these files. If your theme is using Sections, these files will be located within the Sections folder in the sidebar as *-template.liquid files.

  • collection.liquid
  • list-collections.liquid
  • search.liquid

Sections & Snippets with Theme Files to Update​

  • 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 files will appear in a given theme, but the ones that do may appear several times.

Code Adjustments Required for Themes​

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

{% for product in collection.products %}

Insert the following code directly after each instance of {% for product in collection.products %}:

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

If the product loop code uses {% for item in search.results}, adjust the end of the Bold price code to include the loop's product reference, as in the following example:

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

Product Loop Variations​

Some themes use a slight variation of this code. The first half of this code uses one of the following:

  • {% for product in
  • {% for prod in
  • {% for item in

In that case, the second half is 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 %}

Step 4: Update the Product Price Code​

Update all theme files that output product prices on the site. The number and name of these files varies from theme to theme. Generally, three to five files will need to be updated.

These files control the price fields on the product, collection, search, related products, and home pages. It’s important to modify each theme file that outputs a price. This ensures the correct pricing always shows for your customers.

note

This requires you to go back and edit multiple files within your theme code.

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 with the Product Price Code​

Templates with the Product Price Code​

Themes should contain most of these files. If your theme uses "Sections", these files will be located within the “Sections” folder as *-template.liquid files:

  • product.liquid
  • index.liquid
  • collection.liquid
  • search.liquid

Sections & Snippets with the Product Price Code​

Any given theme typically has 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 with the Product Price Code​

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 difference:

{{ item.price | money }}

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

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

Step 5: Update the Cart Price Code​

Perform updates on the cart files that pull your product price information to the cart. The number and name of these files varies from theme to theme.

It's important to edit each theme file that pulls this price information. This ensures the correct information always shows for your customers.

note

This may require you to go back and edit multiple files within your theme code.

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 with the Cart Price Code​

Templates with the Cart Price Code​

If your theme is using “Sections”, these files will be located within the “Sections” folder as *-template.liquid files:

  • cart.liquid

Sections & Snippets with the Cart Price Code​

  • cart-ajax.liquid
  • cart-content.liquid
  • cart-template.liquid

Code Adjustments Required for the Cart Price Code​

First, find each instance of code that looks similar to this:

{{ item.price | money }}

Place the following code 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, find each instance of code that looks similar to this:

{{ item.line_price | money }}

Place the following code 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, find each instance of code that looks similar to this:

{{ cart.total_price | money }}

Place the following code 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: Install the Ajax Scripts​

Warning!

Not all of the following coding snippets need to be inserted into your theme. 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 Merchant Success team for further assistance.

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

note

The following updates are only required for themes that have Ajax functions.

These updates 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 with Ajax Scripts​

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 with the Ajax Scripts​

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

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

Find this code's location in one of the above files, then paste the following code within this function:

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

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

Find where this code is in one of the above files, then paste the following code within this function:

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

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

Find where this code is in one of the above files and paste the following code within this function:

// Bold:PRE
if (window.BOLD && BOLD.common && BOLD.common.eventEmitter && typeof BOLD.common.eventEmitter.emit === "function") {
  BOLD.common.eventEmitter.emit("BOLD_COMMON_cart_loaded");
}
// Bold:PRE
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.

Some themes grab this information through the updateView function.

Find where this code is in one of the above files, and paste the following code within this function:

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

Step 7: Verify the install with the PR Debug Tool​

You’re done! Verify that things are working with our debugging tools.