See it in action Sale price: Code
On this page
Use this code where your theme has no slot for the app block, like product cards or a spot inside your theme’s own price line. It comes from the theme code library on the app’s Storefront blocks page. To open it, go to Promotions > More actions > See all blocks.
In the app, each entry has your store’s real details filled in. The
recipes and examples here say app--<app-id>--andor_display, so copy
them from the app before you paste.
For every widget’s code in one place, see Add AndOr with code.
One-line tag
Each tag is one line. The app embed fills it in with the same widget as the matching app block.
Note Every tag needs the AndOr Discount Display app embed turned on. With the embed off, the tag shows nothing. See what works without the app embed.
Where to paste a tag:
- Horizon: in the theme editor, add a Custom Liquid block to the product template and paste the tag into it.
- Dawn and similar themes: paste the tag into the product section
code, usually
sections/main-product.liquid.
Sale price, one line
The sale price block as a single tag: struck original, sale price, and your theme’s own price hidden while it shows.
<andor-price></andor-price>
Where it goes: On a product page, INSIDE the element that holds your theme’s price, as its last line. In Dawn that is sections/main-product.liquid, inside <div id="price-{{ section.id }}">, just after the {% render 'price' %} line. Do not use snippets/price.liquid. Product cards render that file too, so every card would show this page’s price. On Horizon, do not use blocks/price.liquid either, for the same reason. Instead, add a Custom Liquid block to the product template that holds <andor-price data-hide="#shopify-section-{{ section.id }} product-price"></andor-price>. Horizon’s sticky add-to-cart bar still shows the theme price. To hide it too, add its price element to that data-hide selector, after a comma.
More: Sale price in One-line tags.
Product card recipes
Longer Liquid for the product cards on collection, search and home pages, where apps cannot add a block. These recipes work with the app embed off.
- Dawn and similar themes: most go in
snippets/card-product.liquid. Each recipe says exactly where. - Horizon: do not paste these. Horizon builds its product cards from blocks, so add the AndOr Sale price or AndOr Savings badge app block to the card in the theme editor instead.
The numbers and the full notes for each recipe are in Product card recipes.
Crossed-out original price
Recipe 3. The struck original beside the discounted price.
{% comment %} AndOr Discount Display: crossed-out price. {% endcomment %}
{% assign andor_item = card_product | default: product %}
{% assign andor_percent = andor_item.metafields.app--<app-id>--andor_display.best_percent.value | plus: 0 %}
{% assign andor_off = andor_item.price | times: andor_percent | divided_by: 100.0 | round %}
{% if andor_off > 0 and andor_item.gift_card? != true %}
<span class="andor-card-price" style="display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0.4em">
<s class="andor-card-price__original" style="color:#6d7175">{{ andor_item.price | money }}</s>
<span class="andor-card-price__sale" style="color:#c0392b;font-weight:600">{{ andor_item.price | minus: andor_off | money }}</span>
</span>
{% endif %}
Where it goes: Beside your theme’s price line in snippets/card-product.liquid, or on a product page in sections/main-product.liquid.
Price with expiry, the complete one
Recipe 5. Struck price, sale price, savings chip, expiry, storewide sales and gift cards, all handled.
Save this as snippets/andor-card-price.liquid.
{% comment %} AndOr Discount Display: the sale price for one product card. {% endcomment %}
{% assign andor_ns = 'app--<app-id>--andor_display' %}
{% assign andor_item = card_product | default: product %}
{% assign andor_percent = andor_item.metafields[andor_ns].best_percent.value | plus: 0 %}
{% assign andor_ends = andor_item.metafields[andor_ns].best_ends_at.value | default: 9999999999 %}
{% assign andor_shop_percent = shop.metafields[andor_ns].best_percent.value | plus: 0 %}
{% assign andor_shop_ends = shop.metafields[andor_ns].best_ends_at.value | default: 9999999999 %}
{% comment %} Pick the best sale. {% endcomment %}
{% if andor_shop_percent > andor_percent or andor_shop_percent == andor_percent and andor_shop_ends < andor_ends %}
{% assign andor_percent = andor_shop_percent %}
{% assign andor_ends = andor_shop_ends %}
{% endif %}
{% assign andor_now = 'now' | date: '%s' | plus: 0 %}
{% assign andor_off = andor_item.price | times: andor_percent | divided_by: 100.0 | round %}
{% if andor_off > 0 and andor_ends > andor_now and andor_item.gift_card? != true %}
<span class="andor-card-price" style="display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0.4em">
<s class="andor-card-price__original" style="color:#6d7175"><span class="andor-card-price__label" style="position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0">Regular price</span>{{ andor_item.price | money }}</s>
<span class="andor-card-price__sale" style="color:#c0392b;font-weight:600"><span class="andor-card-price__label" style="position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0">Sale price</span>{{ andor_item.price | minus: andor_off | money }}</span>
{% if badge != false %}<span class="andor-card-price__badge" style="background:#c0392b;color:#ffffff;border-radius:0.25em;padding:0.15em 0.55em;font-size:0.85em;font-weight:600">Save {{ andor_percent | floor }}%</span>{% endif %}
</span>
{% endif %}Where it goes: Save it as its own snippet. Then render it from your card template inside this wrapper:
{%- capture andor_card_price -%}
{% render 'andor-card-price', card_product: card_product %}
{%- endcapture -%}
{%- if andor_card_price != blank -%}
{{ andor_card_price }}
{%- else -%}
{%- comment -%} Leave your theme's own price line here. {%- endcomment -%}
{%- endif -%}
Developer example
Short Liquid to start your own code from. Each one keeps the common
rules and says what it skips. It is written for the product page. On a
product card, change product to card_product.
The same examples, with notes for developers, are in Developer examples.
Sale price
The struck original price beside the sale price.
{% comment %} AndOr Discount Display: sale price example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign percent_off = andor_data.best_percent.value | plus: 0 %}
{% assign ends_at = andor_data.best_ends_at.value | default: 9999999999 %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% if percent_off > 0 and ends_at > now_seconds %}
{% assign amount_off = product.price | times: percent_off %}
{% assign amount_off = amount_off | divided_by: 100.0 | round %}
<div class="andor-sale-price">
<s style="opacity: 0.6;">{{ product.price | money }}</s>
<strong style="color: #c0392b;">
{{ product.price | minus: amount_off | money }}
</strong>
</div>
{% else %}
<span class="andor-regular-price">{{ product.price | money }}</span>
{% endif %}
Where it goes: On a product page, in sections/main-product.liquid. On a product card, change product to card_product. It prints a price, so use it in place of your theme’s price line.
Skips: storewide sales, amount-off deals, gift cards. For the full rules use <andor-price></andor-price>.