See it in action Developer examples
These are short examples to start your own theme code from. Each one reads the app’s metafields and prints one thing. They are easy to read and easy to restyle. The app shows the same examples in its theme code library, under Developer examples. Pick one in Which example?
They are starting points, not finished widgets. Each one keeps the rules that matter in the common case, like hiding a sale once it has ended. It skips the rarer rules, and says which ones at the end. The complete versions are the one-line tags and the product card recipes.
Before you paste:
- Replace
<app-id>with your app id. The app hands you each example with your own namespace already in it. - The examples are written for a product page and read
product. On a product card, changeproducttocard_product. - Each example reads the namespace once, as
andor_data, and then reads each key from it.
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>.
Savings badge
A “Save 20%” chip while a sale is on.
{% comment %} AndOr Discount Display: savings badge 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 %}
<span class="andor-savings-badge"
style="background: #c0392b; color: #fff; padding: 0.2em 0.6em;">
Save {{ percent_off | floor }}%
</span>
{% endif %}
Where it goes: On a product page, in sections/main-product.liquid. On a product card, change product to card_product.
Skips: storewide sales, amount-off deals, tiered and code discounts, gift cards. For the full rules, use <andor-badge></andor-badge>.
Volume table
One buy-more-save-more ladder: quantity, discount and price each.
Show the code
{% comment %} AndOr Discount Display: volume table example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign shop_data = shop.metafields.app--<app-id>--andor_display %}
{% assign no_rows = '' | split: '' %}
{% assign product_rows = andor_data.discounts.value | default: no_rows %}
{% assign shop_rows = shop_data.shop_discounts.value | default: no_rows %}
{% assign ladders = product_rows | concat: shop_rows %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% for discount in ladders %}
{% if discount.tier_basis != 'quantity' or discount.code != blank %}
{% continue %}
{% endif %}
{% assign starts_at = discount.starts_at | date: '%s' | plus: 0 %}
{% assign ends_at = discount.ends_at | default: '2099-01-01' %}
{% assign ends_at = ends_at | date: '%s' | plus: 0 %}
{% if starts_at > now_seconds or ends_at <= now_seconds %}
{% continue %}
{% endif %}
<table class="andor-volume-table">
<caption>{{ discount.title }}</caption>
<tr><th>Quantity</th><th>Discount</th><th>Price each</th></tr>
{% for tier in discount.tiers %}
{% assign keep_percent = 100 | minus: tier.value %}
{% assign price_each = product.price | times: keep_percent %}
{% assign price_each = price_each | divided_by: 100.0 | round %}
<tr><td>{{ tier.threshold }}+</td><td>{{ tier.value | floor }}% off</td>
<td>{{ price_each | money }}</td></tr>
{% endfor %}
</table>
{% break %}
{% endfor %}
Where it goes: On a product page, in sections/main-product.liquid. It reads the product’s ladder or a storewide one, so keep it out of product cards.
Skips: sales that do or do not combine with the ladder, spend ladders, variant-only discounts, code discounts, gift cards. For the full rules, use <andor-tiers></andor-tiers>.
Sale ends soon
“Sale ends in under 5 hours”, worked out on the server.
{% comment %} AndOr Discount Display: sale ends soon example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign ends_at = andor_data.best_ends_at.value | plus: 0 %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% assign seconds_left = ends_at | minus: now_seconds %}
{% if seconds_left > 0 %}
{% comment %} Round up and say "under", so it never reads 0. {% endcomment %}
{% assign hours_left = seconds_left | divided_by: 3600 | plus: 1 %}
{% assign days_left = hours_left | divided_by: 24 | plus: 1 %}
<p class="andor-ends-soon" style="color: #c0392b;">
{% if hours_left <= 48 %}
Sale ends in under {{ hours_left }} hours
{% else %}
Sale ends in under {{ days_left }} days
{% endif %}
</p>
{% endif %}
Where it goes: On a product page, in sections/main-product.liquid. On a product card, change product to card_product.
Skips: a ticking clock (the text is fixed when the page is built), storewide sales, gift cards. For the full rules, use the AndOr Countdown block.
Offers list
Every live deal in the store, with its code if it has one.
{% comment %} AndOr Discount Display: offers list example. {% endcomment %}
{% assign andor_data = shop.metafields.app--<app-id>--andor_display %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
<ul class="andor-offers">
{% for offer in andor_data.offers.value %}
{% if offer.v > 2 %}{% continue %}{% endif %}
{% assign starts_at = offer.starts_at | date: '%s' | plus: 0 %}
{% assign ends_at = offer.ends_at | default: '2099-01-01' %}
{% assign ends_at = ends_at | date: '%s' | plus: 0 %}
{% if starts_at > now_seconds or ends_at <= now_seconds %}
{% continue %}
{% endif %}
<li>
<strong>{{ offer.title }}</strong>
{% if offer.scope != 'all' %}on selected products{% endif %}
{% if offer.code != blank %}with code {{ offer.code }}{% endif %}
{% if offer.tier_basis == 'quantity' %}
when you buy {{ offer.tiers.first.threshold }}+
{% elsif offer.mode != 'price' and offer.no_minimum != true %}
on qualifying orders
{% endif %}
</li>
{% endfor %}
</ul>
Where it goes: Any page. Near the top of a section, or in layout/theme.liquid just after the opening <body> tag.
Skips: the value of each deal, collection names, the minimum spend. For the full rules, use the AndOr Offers block.