Price CSS selectors
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
- 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:
<div class="card-wrapper product-card-wrapper underline-links-hover">To add the required attribute, modify it as follows:
<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:
<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 transformCart Transform.