Why do we need this?
To ensure ABConvert can correctly identify and update your storefront prices, please add clear and stable CSS classes to the relevant elements in your Liquid templates. You can use any class names you prefer, as long as they are unique and consistent across your store.
Homepage / collection / search pages
Product card containers
Add a class to all main product card wrappers. This includes those on the homepage, collection pages, and product search results, as well as any suggested or upsell product cards on product pages or in the cart.
<div class="ab-product-card">
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Save percent element in product cards
Example: “Save 20%”
<span class="ab-save-percent">
Save {{ discount_percent }}%
</span>
Save amount element in product cards
Example: “Save $10”
<span class="ab-save-amount">
Save {{ discount_amount | money }}
</span>
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Product pages
Product info container
Add a class to the main product information section.
<div class="ab-product-info">
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
PDP sticky add to cart (ATC) bar
If you have a sticky add to cart bar that displays prices, please mark these elements as well.
<div class="ab-sticky-atc">
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Price elements
This refers to the main selling price for the primary product on the product page. Include any prices shown on the add to cart button or the sticky ATC bar, as these also display the main price of the product.
<span class="ab-price">
{{ product.price | money }}
</span>
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Compare at price elements
Original crossed-out price.
<span class="ab-compare-price">
{{ product.compare_at_price | money }}
</span>
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Save percent element in product page
If your main product shows a save percent badge, mark these.
<span class="ab-save-percent">
Save {{ discount_percent }}%
</span>
Save amount element in product page
If your main product shows a save amount badge, mark these.
<span class="ab-save-amount">
Save {{ discount_amount | money }}
</span>
Example
Example
The red area marks the element that needs to be added to a specific CSS class.
Important notes
Please avoid dynamically generated class names.
Use stable class names that will not change after theme updates.
If your theme uses Tailwind CSS, you can simply add these extra classes alongside existing utility classes.
Example:
<span class="text-lg font-bold ab-product-card">
Once these classes are added, our script will be able to reliably identify and update the correct pricing elements during tests.