Price

Location

Place the la-dn-price attribute on the HTML element that spans all of the following:

• The section of the theme that renders the standard price of the variant when the variant is not on sale (i.e. the variant does not have a compare-at price in Shopify)

• The section of the theme that renders the discounted price of the variant when the variant is on sale (i.e. the variant has a compare-at price in Shopify)

And, if applicable:

• The “Sold out” text displayed if the variant is out of stock

• The “Sale” badges displayed if the variant has a compare at price

Ensure the attribute class is not placed on a section that renders HTML that is not related to the price, such as:

• Review widgets

• Installments

since all content in the section with the above attribute is replaced with the discounted price when the variant is discounted through Discount Ninja.

Snippet

Use the following snippet to add the data attribute in a Liquid template:

data-la-dn-price

Example

<div class="price" data-la-dn-price>
    ...
    <span class="money">{{ variant.price }}</span>
    <s class="money">{{ variant.compare_at_price }}</s>
    ...
</div>

Style

The style (font, color, size) as well as the format (strikethrough or not, price first or compare-at price first...) can be configured in the app.

In the menu go to Settings > Dynamic Pricing > Price format.

Subscription apps

The attributes described in this section will be supported as of November 2024

Some subscription apps show multiple prices for the selected product variant on the PDP. Specifically, they allow for showing:

• The price of a one-time purchase

• The price of a recurring purchase (subscription)

To support this:

• mark the price of the one-time purchase with the attribute data-la-dn-price-inline as well as an attribute data-la-dn-price-onetime

• and the price of the recurring purchase with the attribute data-la-dn-price-inline as well as the attribute data-la-dn-price-subscription. Finally, add an attribute that indicates the id of the selected selling plan: data-la-dn-price-subscription-sellingplan-id

Example

<div class="price" 
     data-la-dn-price 
     data-la-dn-price-inline
     data-la-dn-price-onetime>
    ...
    One time purchase:
    <span class="money">{{ product.price }}</span>
    <s class="money">{{ product.compare_at_price }}</s>
    ...
</div>
{% assign default_selling_plan_allocation = product.selected_or_first_available_selling_plan_allocation %}
{% assign selling_plan_id = default_selling_plan_allocation.selling_plan.id %}
{% assign selling_plan_price = default_selling_plan_allocation.per_delivery_price %}
<div class="price" 
     data-la-dn-price 
     data-la-dn-price-inline
     data-la-dn-price-subscription 
     data-la-dn-price-subscription-sellingplan-id="{{ selling_plan_id }}">
    ...
    Subscribe and save
    <span class="money">{{ selling_plan_price }}</span>
    ...
</div>

Multiple variants

To display the price of multiple variants of the same product on the PDP, users can use the markup used for products on the PLP in combination with the data-la-dn-product-variant attribute as explained here.

Installments

The app automatically integrates with a number of installment apps, listed here.

To mark HTML elements as installment prices, you can add CSS selectors in the app. These settings are available from the Settings > General > Advanced menu in the Advanced tab.