Theme Setup

All documentation on price testing can be found on this page. To give us feedback on our documentation, please use this form.

Before you can run price tests, you need to add special data attributes to your theme that tell Shoplift where prices are displayed. This is a one-time setup that enables price testing across your entire store.

We strongly recommend having a theme developer implement the following theme setup to enable price testing for your store.

1

Step 1: Prerequisites

Before you begin, make sure you have:

  • Admin access to your Shopify store

  • Familiarity with your store's theme configuration

  • 30-60 minutes for implementation

2

Step 2: Duplicate your theme

First, you'll need to create a duplicate of your theme for safe editing. Working on a duplicate ensures your live store remains unchanged while you implement the necessary modifications.

  1. Go to Online Store → Themes

  2. Find your current theme

  3. Click Actions → Duplicate to create an unpublished copy

  4. Locate the duplicate theme once created

  5. Click Actions → Edit code

3

Step 3: Understand data attributes

Data attributes act as markers that tell Shoplift where price elements live on your site. Without these markers, Shoplift can't identify which numbers on your page are prices versus other numerical content like inventory counts or review ratings. Shoplift uses three specific data attributes to enable price testing functionality:

  • data-sl-attribute-p="{{ product.id }}" for regular prices

  • data-sl-attribute-cap="{{ product.id }}" for compare-at prices (strikethrough prices)

  • data-sl-attribute-discount="{{ product.id }}" for discount or savings elements (either an amount or a percentage)

product.id is just an example of a price object. Depending on your theme, the object with the price element might be product , target, selected_or_first_available_variant, or a custom variable.

You'll need to add these attributes to all price, compare-at price, and savings elements elements in your theme's liquid files.

Price elements in cart, checkout, and order pages should not be tagged with data attributes. While PDPs and collection pages require elements to be tagged with data attributes to change prices on the frontend, cart, checkout, and order pages use Cart Transform Functions to change cart values on the backend.

4

Step 4: Locate price elements

Now you'll need to identify where these price elements appear throughout your theme's liquid files. Every theme is unique, so the exact locations will vary, but there are common patterns to help guide your search.

Tips on finding price elements

  • Look at any file with "price" in the name

  • Search for price-related classes (hint: use developer tools to find an element's class)

  • Common price variables to search for include product.price , target.price , variant.price , product.selected_or_first_available_variant.price , current_variant.price , product.compare_at_price , product.price_min , product.price_max

Dos and don'ts

✅ DO add attributes to:

  • Liquid files

  • Product sections and snippets

  • Collection sections and snippets

  • Search results

  • Product recommendations

  • Quick view/quick shop modals

  • Recently viewed products

  • Cross-sell/upsell sections

❌ DO NOT add attributes to:

  • Non-Liquid files (i.e. JS or CSS)

  • Shopping cart prices (except individual items—see exception below)

  • Checkout pages

  • Order confirmation pages

  • Customer account pages

  • Order history

  • Email templates

  • Admin notifications

  • Structured data/meta tags

  • Cart drawer totals

Price elements in cart, checkout, and order pages should not be tagged with data attributes. While PDPs and collection pages require elements to be tagged with data attributes to change prices on the frontend, cart, checkout, and order pages use Cart Transform Functions to change cart values on the backend.

5

Step 5: Add data attributes

After you've identified the location of price elements in your theme, you can add the data attributes. The key is ensuring attributes are placed on the element directly containing the price text. Keep a record of which files you modify—this helps when updating your theme or troubleshooting later.

Implementation

Before:

<div class="product-price">
  {{ product.price | money }}
</div>

After:

<div class="product-price" data-sl-attribute-p="{{ product.id }}">
  {{ product.price | money }}
</div>

The variable product in product.id is just an example. Depending on your theme, the object with the price element might be product , target, selected_or_first_available_variant, or a custom variable.

Example: Sale pricing

For products with compare-at prices, you'll need both attributes to ensure sale prices display correctly during tests:

Before:

<div class="price-wrapper">
  {% if product.compare_at_price > product.price %}
    <span class="price-sale">{{ product.price | money }}</span>
    <span class="price-original">{{ product.compare_at_price | money }}</span>
  {% else %}
    <span class="price-regular">{{ product.price | money }}</span>
  {% endif %}
</div>

After:

<div class="price-wrapper">
  {% if product.compare_at_price > product.price %}
    <span class="price-sale" data-sl-attribute-p="{{ product.id }}">
      {{ product.price | money }}
    </span>
    <span class="price-original" data-sl-attribute-cap="{{ product.id }}">
      {{ product.compare_at_price | money }}
    </span>
  {% else %}
    <span class="price-regular" data-sl-attribute-p="{{ product.id }}">
      {{ product.price | money }}
    </span>
  {% endif %}
</div>Example: Sale pricing
For products with compare-at prices, you'll need both attributes to ensure sale prices display correctly during tests:
Before:
<div class="price-wrapper">
  {% if product.compare_at_price > product.price %}
    <span class="price-sale">{{ product.price | money }}</span>
    <span class="price-original">{{ product.compare_at_price | money }}</span>
  {% else %}
    <span class="price-regular">{{ product.price | money }}</span>
  {% endif %}
</div>
After:
<div class="price-wrapper">
  {% if product.compare_at_price > product.price %}
    <span class="price-sale" data-sl-attribute-p="{{ product.id }}">
      {{ product.price | money }}
    </span>
    <span class="price-original" data-sl-attribute-cap="{{ product.id }}">
      {{ product.compare_at_price | money }}
    </span>
  {% else %}
    <span class="price-regular" data-sl-attribute-p="{{ product.id }}">
      {{ product.price | money }}
    </span>
  {% endif %}
</div>
Example: Savings components

For products with discount or savings badge UI components, you'll need to add a discount attribute to ensure savings UI components display correctly during tests:

Before:

{%
  assign discount_percentage = current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round
%}
<span> 
({{discount_percentage}}% OFF) 
</span>

After:

{%
  assign discount_percentage = current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round
%}
<span data-sl-attribute-discount="{{current_variant.id}}">
({{discount_percentage}}% OFF)
</span>
6

Step 6: Add input code

After you've added data attributes to all price elements, you need to add a hidden input element to all product forms in your theme (i.e. "Add to cart" and "Buy now" buttons). This ensures the correct prices are loaded in the cart and checkout.

Locate product forms

Search your theme for product forms. They will look like this:

{%- form 'product',
    product,
    id: product_form_id,
    class: 'form',
    novalidate: 'novalidate',
    data-type: 'add-to-cart-form'
-%}
    {% # INPUT CODE GOES HERE %}
{%- endform -%}

Tips:

  • Using the search bar in Shopify's theme editor, search %form or %product_form in your theme

  • Some themes have a buy-buttons.liquid file with all product forms

  • Using dev tools, inspect your "Add to cart" and "Buy now" buttons, and try to find the parent form. Then, use the form's class or id to identify it in your theme code.

Add input code

After you've located a form, paste the following code:

<input
    type="hidden"
    name="properties[_slpt]"
    value=""
    data-sl-pid="{{ product.id }}"
>

The variable product in product.id is just an example. Depending on your theme, the object with the price element might be product , target, selected_or_first_available_variant, or a custom variable.

Hide cart properties

For most themes, cart properties with a leading underscore (i.e. _slpt) are hidden. However, on some themes (i.e. legacy themes), these properties might not be hidden. In the case that _slpt is showing in your cart, wrap each input code in the following:

{%- if property.last != blank and property_first_char != '_' -%} 
    {% # INPUT CODE GOES HERE %}
{%- endif -%}

Repeat for all forms

Make sure you add the input code to all product forms in your theme. When you're done, you're ready to verify and begin testing!

7

Step 7: Special theme considerations

Depending on your specific theme, there might be a few more things you need to do to enable price testing.

Custom logic capabilities

If your theme has custom logic for displaying price elements, you might need to use our exposed test configs to ensure the correct price is rendered.

  • On your website, open dev tools and type the following in your console: this.shopliftInstance.testConfigs.

  • This gives you a list of test configs you can use to write custom logic to render the correct price for a price test.

Keep in mind that Shoplift updates Shopify prices and compare-at prices if you are testing price increases. Therefore, any logic that references Shopify price or compare-at prices may not execute as expected after test launch. Think through the original and variant test prices while reviewing any conditional logic.

Cart display exception

While cart totals shouldn't have attributes, you may want to add them to individual product prices if showing strikethrough prices to maintain visual consistency:

<!-- In cart template - ONLY for displaying strikethrough prices -->
<div class="cart-item-price">
  <span>
    {{ item.price | money }}
  </span>
  {% if item.original_price > item.price %}
    <span class="cart-item-compare-price" data-sl-attribute-cap="{{ item.product_id }}">
      {{ item.original_price | money }}
    </span>
  {% endif %}
</div>

Mobile considerations

Many themes use separate markup for mobile devices. Add attributes to all versions to ensure consistency across devices. Check for:

  • Mobile-specific templates

  • Elements hidden/shown with CSS media queries

  • Responsive price displays

Rebuy support

Tagging price elements on Rebuy is straightforward, depending on which version of Rebuy your store has.

  • Legacy Rebuy: If your store has legacy Rebuy, your theme should have a file called rebuy.extensions.liquid. You should add price testing data attributes directly to elements in this file, as you would for any other file.

  • Current Rebuy: If your theme does not contain rebuy.extensions.liquid , follow these instructions:

    • Open Rebuy and go to Cart & Merchandising > Smart Cart. For each active smart cart, make the following edits.

    • If your cart has a custom template enabled, skip to the next step. If your cart does not have a custom template enabled, go to Global Settings > Custom Template and turn on Enable Custom Template.

    • Click Edit to open the Custom Template Editor. From here, you can directly tag price elements with data attributes.

8

Step 8: Verify your setup

After adding data attributes throughout your theme, it's crucial to verify everything works correctly. Remember, data attributes should be added to any elements that contain the price text.

Quick verification methods

  • View source: On a product page, view source and search for data-sl-attribute-p to confirm attributes are present

  • Browser console: Run this command to count tagged prices:

document.querySelectorAll('[data-sl-attribute-p]').length

  • Visual inspection: Use browser DevTools to inspect price elements and verify you see data-sl-attribute-p="123" (where 123 is an actual product ID)

  • Preview in Shoplift: After publishing your theme, you can create a price test in Shoplift and preview your variant prices. If they change, then data attributes are configured correctly.

Publishing Your Theme

After thorough testing, you're ready to make your changes live. Return to Online Store → Themes, find your edited duplicate, and click Actions → Publish. This will not adjust any of your product prices for your website visitors unless you have a live price test.

Theme updates and maintenance

The data attributes you've added will work for all future price tests without additional modifications. However, when updating your theme, these attributes may be lost. To prepare for future theme updates, maintain a record of:

  • Which files you modified

  • The specific changes made

  • Your testing checklist

This documentation makes re-implementing attributes quick and ensures nothing is missed during theme updates.

Remember: You won't need to modify your theme code again unless you change themes or add new price display locations. The data attributes you've added provide the foundation for all your future pricing experiments.

Next steps

Congratulations! Your theme is now configured for price testing. This one-time setup unlocks the ability to run unlimited price tests on your store. You're now ready to:

  1. Create your first price test using the test creation guide

  2. Use preview mode to verify prices update correctly

  3. Run a test purchase to ensure checkout works properly

If you need help conducting tests with Shoplift, our support team is always available to assist. Reach out from within the app using the live chat widget in the bottom right of the screen, or email [email protected] to get in touch.

PreviousOverviewNextCreating a Price Test

Last updated

Was this helpful?