Badge
Attributes
Add the data attributes, documented here, around the section where you want to display the badge.
Price
In order for the badge to work, a price section must be included inside the elemented that has the attributes. This section should be hidden.
Example:
<span style="display:none" data-la-dn-price></span>
Badge
Optionally, add the badge class, documented here, on the element that should act as the parent of the badge.
Example
<div id="my-product-page-image-gallery"
data-la-dn-product-handle="{{ product.handle }}"
data-la-dn-product-id="{{ product.id }}"
data-la-dn-product-collection-handles="{{ product.collections | map: 'handle' | join: ',' | default: '[[--NONE--]]' }}"
data-la-dn-product-collection-ids="{{ product.collections | map: 'id' | join: ',' | default: '[[--NONE--]]' }}"
data-la-dn-product-available="{{ product.available}}"
data-la-dn-product-price="{{ product.first_available_variant.price | default: product.price }}"
data-la-dn-product-compare-at-price="{{ product.first_available_variant.compare_at_price | default: product.first_available_variant.price | default: product.compare_at_price | default: product.price }}"
data-la-dn-product-compare-at-price-varies="{{ product.compare_at_price_varies }}"
data-la-dn-product-price-varies="{{ product.price_varies }}"
data-la-dn-product-price-min="{{ product.price_min }}"
data-la-dn-product-tags="{{ product.tags | join: ',' | escape | default: '[[--NONE--]]' }">
...
<span style="display:none" data-la-dn-price></span>
...
<div id="my-product-page-image" class="la-dn-collection-badge">
<img>
...
</div>
</div>
Last updated
Was this helpful?