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 to add the required attribute, modify it as follows 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 small convertible flex bag $95 $95 $115 save $20 (17%) 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 docid\ rq4timrqgfgm1j69wwmli