Settings

selectors for price campaigns 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 important notes 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 adding the data product id attribute to the theme 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 predefined selectors 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 validating selectors 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 example below we have an example of how the html of a product element might look in a storefront small convertible flex bag $95 $95 $115 save $20 (17%) 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