Badge
The term collections is used to refer to collection pages (Product Listing Page or PLP) as well as lists of products displayed on any other page. For example, collections can be included on a home page or a Product Detail Page (PDP).
This code edit is optional and should only be performed if the default position of the badge is not in line with expectations. However, the data attributes are always required for the badge to be displayed.
Requirements
To show strikethrough pricing and/or badges in collections, you must edit the theme to ensure that each product in a collection has:
a price that is marked
Data attributes
Displaying badges on products in a collection requires that data attributes are configured. Read this article to learn how to set up the required data attributes.
Mechanism
The script will look for Discount Ninja price sections on a page.
The script will then, for each price, find the HTML parent that includes data attributes. If data attributes are found, the product is assumed to be part of a collection.
The script will then add the badge as a child of the HTML parent. If you want to place the badge in a different location you must mark that location with the CSS class la-dn-collectionbadge
.
Location
If the default location of the badge does not meet your expectations, place the la-dn-collectionbadge
CSS class on the HTML element where the collection badge should be displayed. Typically the badge is displayed on the img
element that displays the product image in the collection.
The HTML element la-dn-collectionbadge
class must be an elemented that is nested inside the HTML element with the data attributes.
Snippet
Use the following snippet to add the CSS class in a Liquid template:
Example
Style
The style (text color, background color, size, shape) as well as the text (-20%, 1+1 FREE, ...) can be configured in the app by editing the widgets associated with the offers.
Integrations with other apps
The native collection badges of your theme or third-party app may conflict with the collection badges displayed by Discount Ninja.
To avoid this you can add a CSS rule that will hide the other badges when Discount Ninja's badges are displayed:
Identify the CSS selector for your theme's collection badges. In the example below this selector is
TODO-THEME-SPECIFIC
Add a custom CSS rule in Discount Ninja (Menu > Settings > Custom CSS):
Last updated