Development Tools
Tools for developers to optimize displayed badges on your stores
Development Tools
- Product Badge Wrapper Selector: The CSS selector code of the element containing the badge. Multiple selectors can be selected, each group separated by a comma (,). For example:
.product-item, .products .product-loop - Excluded Selector: The CSS selector code of the element you don't want the badge to be displayed in. Multiple selectors can be selected, each group separated by a comma (,). For example:
.product-item-excluded, .products .product-loop-excluded - Resize Badge when width of badge larger than: Display badge according to the aspect ratio of the image frame. When the badge is larger than the scale, the badge will automatically shrink to the set scale. Default value: 20%.
- Equal Badge Height: In some cases, multiple badges display with different heights. This option helps the badge to display more evenly.
- Badge's Height Dimension: Maximum height of badges. Note: This feature is only used when 'Equal Badge Height' is selected.
- Turn OFF ajax mode: By default, the system initiates automatic detection of newly added products (search, load more, collection filter, etc.) to display the badge. If your theme does not use AJAX functions, you can enable this feature. It will make the performance better.
- Custom CSS: Add custom CSS code to change some styles.
Last modified 7mo ago