Why do we need to do this
Our price-testing script requires unique CSS classes to accurately identify product cards. However, pages built with Gempages often use generic classes applied across multiple elements, making it challenging for our script to distinguish product card elements from others.
To resolve this, you can add a custom CSS class to the product card in Gempage’s advanced settings. This allows our script to easily recognize and work with the product card elements on your page.
How to add custom CSS class in Gempage builder?
Let’s say we want to identify these three product cards on a product page. To add a custom CSS class in Gempages Builder, follow these steps:
Note: Our script only needs to identify product cards that are NOT the main product on the product page. The main product corresponds to the product slug in the URL.
Any other product cards displayed on the page are not the main product; these are the product cards we need to identify.
1. Find the template
Open the Gempages Builder app, go to Your recent pages and find the template containing the product cards.
In this example, it’s in the default product template.
2. Locate the product card element
Inside the editor, select the product card element. In the left panel, go to Advanced settings and scroll down to the CSS class field.
3. Add custom CSS in CSS class
In the CSS class field, enter your custom class.
For consistency and ease, please use abconvert-product-card as the class name.
4. Repeat the same process for other product cards
Add the abconvert-product-card class to each product card you want to identify.
5. Save and publish
Click Save in the top right, then Publish the updated template.
Conclusion
Adding a custom CSS class like abconvert-product-card in Gempages Builder makes it simple for our script to accurately identify product cards, ensuring precise and consistent testing.
If you have any questions or feedback, feel free to reach to via [email protected] or through our support widget.