# One-Time Theme Setup

{% hint style="info" %}
All documentation on price testing can be found on [this page](https://docs.shoplift.ai/test/price-testing). To give us feedback on our documentation, please use [this form](https://form.typeform.com/to/M8H02KI2).
{% endhint %}

{% embed url="<https://www.loom.com/share/616c1f2a9e7f4a109ce35209f9c3f5bc>" %}

{% hint style="warning" %}
We strongly recommend having a **theme developer** implement the following theme setup to enable price testing for your store.
{% endhint %}

{% stepper %}
{% step %}

### 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
  {% endstep %}

{% step %}

### Step 2: 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)

{% hint style="warning" %}
`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.
{% endhint %}

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.
{% endstep %}

{% step %}

### Step 3: 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`&#x20;

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

{% hint style="warning" %}
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.
{% endhint %}
{% endstep %}

{% step %}

### Step 4: 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:**

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

**After:**

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

{% hint style="warning" %}
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.
{% endhint %}

<details>

<summary>Example: Sale pricing</summary>

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

**Before:**

```liquid
<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:**

```liquid
<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>
```

</details>

<details>

<summary>Example: Savings components</summary>

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

```liquid
{%
  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:**

```liquid
{%
  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>
```

</details>
{% endstep %}

{% step %}

### Step 5: 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:

```liquid
{%- 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&#x20;
* 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:

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

{% hint style="warning" %}
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.
{% endhint %}

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

```liquid
{%- 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!
{% endstep %}

{% step %}

### Step 6: Special theme considerations

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

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

{% hint style="warning" %}
Keep in mind that Shoplift [updates Shopify prices and compare-at prices](https://docs.shoplift.ai/test/price-testing/overview#id-2.-highest-price-default) 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.
{% endhint %}

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

```liquid
<!-- 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.&#x20;
* 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 E**nable Custom Template**.
  * Click **Edit** to open the **Custom Template Editor**. From here, you can directly tag price elements with data attributes.
    {% endstep %}

{% step %}

### Step 7: 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:

```javascript
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.
  {% endstep %}
  {% endstepper %}

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

{% hint style="info" %}
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.
{% endhint %}

### 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](https://docs.shoplift.ai/test/price-testing/create-a-price-test)
2. Use [preview mode](https://docs.shoplift.ai/test/price-testing/qa-checklist) to verify prices update correctly
3. [Run a test purchase](https://docs.shoplift.ai/test/qa-checklist) to ensure checkout works properly

{% hint style="info" %}
If you need help conducting tests with Shoplift, our [support team](https://docs.shoplift.ai/test/price-testing/broken-reference) 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 [help@shoplift.ai ](mailto:help@shoplift.ai)to get in touch.
{% endhint %}