Collection 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 page (Product Detail Page).

This code edit is optional (note: as long as the data attributes are in place) and should only be performed if the default position of the badge is not in line with expectations.

Requirements

To show strikethrough pricing and/or badges in collections, you must edit the theme to ensure that each product in a collection has:

• data attributes

• 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:

data-la-dn-collectionbadge

Example

<div class="collection-product"
    data-la-dn-product-handle="{{ product.handle }}" 
    ...>
    <img ... class="data-la-dn-collectionbadge">
    <div class="price" data-la-dn-price>
        <span class="money">{{ product.price }}</span>
        ...
    </div>
</div>

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):

.limoniapps-discountninja-hidethirdpartybadges TODO-THEME-SPECIFIC { display: none; }