Settings
For price experiments to correctly adjust the price in your storefront, you need to configure a set of selectors in Campaign settings in Settings → Campaigns.
Selector types:
- Root selector – Defines the container element that wraps the price elements.
- Price selector – Targets the element displaying the product price.
- Price compare at selector – Targets the element displaying the compare-at price.
- Savings selector - Target the elements displaying the difference between the price and the compare-at price
- Savings percentage selector - Target the elements displaying the percentage of savings from the compare-at price to regular price.
- Price elements should not contain other child elements, as the script replaces their innerText or innerHTML, which will remove all existing content inside them.
- Root selectors must have a data-product-id attribute, which has to be added manually to the store’s theme Liquid files.
- If the price transformation should apply to specific product variants, the Root selector must also include the data-variant-id attribute.
- On collections pages, or in any product list views Personizely will show the cheapest price as the product's price, in case there's an adjustment for it.
We'll take the Dawn theme for reference. In the Dawn theme, the snippets/product-card.liquid file is responsible for rendering product cards. The top-level HTML element for a product card looks like this:
At the top of the file, there is a Liquid comment indicating that the product information is available in the card_product variable. To add the data-product-id attribute, modify the element as follows:
Now, with such a setup, one of the Root selectors will be: .product-card-wrapper
To simplify the setup, we have prepared predefined selectors for the following Shopify themes:
- Dawn
- Crave
- Publisher
- Ride
- Origin
- Studio
- Refresh
- Sense
- Colorblock
- Trade
- Craft
- Spotlight
- Taste
More themes will be added soon.
If your store uses one of these themes, you can click "Detect from theme" in Settings -> Campaigns, and the selectors will be automatically filled with the correct CSS selectors. You will still have to add the data attributes manually.
If automatic detection is supported for your theme, you can verify that all required selectors exist and that the Root elements contain the correct data-product-id and data-variant-id attributes.
To validate the selectors, click "Validate" in Settings -> Campaigns.
Results breakdown:
- If a selector cannot be found in your theme files, an error will be displayed.
- If the Root selector elements are missing the data-product-id attribute, an error will be shown.
- A button will appear next to each error, allowing you to open the specific Liquid file where the issue needs to be fixed.
Below we have an example of how the HTML of a product element might look in a storefront.
For this example, the correct selectors would be:
- Root - .product-card-wrapper
- Price - .price__regular .price-item--regular, .price__sale .price-item-sale
- Price compare at - .price__sale .price-item--regular
- Savings - .savings .savings-value
- Savings percentage - .savings .savings-percentage
