---
title: Price CSS selectors
slug: price-campaign-css-selector
docTags: 
createdAt: 2025-03-19T13:55:25.376Z
---

For the product campaign strategy to correctly display adjusted prices on the storefront, you need to configure CSS selectors that tell the Personizely script where to find and replace the price elements in your theme. This is done in **Settings → Campaigns**.

## Selector types

- **Root selector** — Defines the container element that wraps the price elements. Must have a `data-product-id` attribute on the element in your theme.
- **Price selector** — Targets the element displaying the product price.
- **Compare at price selector** — Targets the element displaying the compare-at price.
- **Savings selector** — Targets elements displaying the savings amount (difference between price and compare-at price).
- **Savings percentage selector** — Targets elements displaying the percentage saved.

## Important notes

:::hint{type="info"}
- Price elements should not contain child elements — the script replaces their `innerText` or `innerHTML`, which removes all existing content inside them.
- Root selectors must match elements that have a `data-product-id` attribute. This attribute needs to be added manually to your theme's Liquid files.
- If price adjustments should apply to specific variants, the root element must also include a `data-variant-id` attribute.
- On collection pages and other product list views, Personizely will display the cheapest adjusted price for the product.
:::

## Adding `data-product-id` to your theme

Using the Dawn theme as an example: in `snippets/product-card.liquid`, the top-level product card element looks like this:

```html
<div class="card-wrapper product-card-wrapper underline-links-hover">
```

To add the required attribute, modify it as follows:

```html
<div class="card-wrapper product-card-wrapper underline-links-hover" data-product-id="{{ card_product.id }}">
```

With this in place, the root selector for this element would be `.product-card-wrapper`.

## Predefined selectors

To simplify setup, predefined selectors are available for the following Shopify themes:

Dawn, Crave, Publisher, Ride, Origin, Studio, Refresh, Sense, Colorblock, Trade, Craft, Spotlight, Taste.

If your store uses one of these themes, click **Detect from theme** in **Settings → Campaigns** to automatically fill in the correct selectors. You will still need to add the `data-product-id` attribute manually.

## Validating selectors

Click **Validate** in **Settings → Campaigns** to check that all selectors are correctly configured. The validation will:

- Report an error if a selector cannot be found in your theme files.
- Report an error if root selector elements are missing the `data-product-id` attribute.
- Show a button next to each error that opens the specific Liquid file where the fix needs to be applied.

## Example

An example of how a product element might look in a storefront:

```html
<div class="product-card-wrapper" data-product-id="2000400050000">
    <div class="title">Small Convertible Flex Bag</div>
    <div class="price__regular">
        <div class="price-item--regular">$95</div>
    </div>
    <div class="price__sale">
        <div class="price-item--sale">$95</div>
        <div class="price-item--regular">$115</div>
    </div>
    <div class="savings">
        <div>
            Save <span class="savings-value">$20</span>
            (<span class="savings-percentage">17%</span>)
        </div>
    </div>
</div>
```

For this structure, the correct selectors would be:

- **Root** — `.product-card-wrapper`
- **Price** — `.price__regular .price-item--regular`, `.price__sale .price-item--sale`
- **Compare at price** — `.price__sale .price-item--regular`
- **Savings** — `.savings .savings-value`
- **Savings percentage** — `.savings .savings-percentage`

***

For an overview of how storefront price adjustments work, see [Cart transform](docId\:Rq4tIMRQgfgM1J69WWmli).