# Add AndOr with code > The theme code library from the app, in the same order. One-line tags for the product page, pasted recipes for product cards, and short developer examples. Source: https://backtrackhq.com/docs/widgets/add-with-code/ Some places in a theme have no slot for an app block, like product cards or a spot inside your theme's own price line. For those, the app has a theme code library with three parts. This page lists the same parts, with the same names, in the same order. In the app, each part has a picker: **Which tag?**, **Which recipe?** and **Which example?** Pick an entry there to copy it. The copy from the app has your store's real details filled in. The recipes and examples on this page say `app----andor_display`, so copy them from the app before you paste. ## Product page: one-line tags 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](https://backtrackhq.com/docs/widgets/app-embed/#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`. - **Cart claim rows tag:** paste it on the cart page, under the cart lines, for example in `sections/main-cart-footer.liquid`. On Horizon, add a **Custom Liquid** block to the cart template. Every attribute of every tag is in [One-line tags](https://backtrackhq.com/docs/developers/one-line-tags/). ### Free shipping callout, one line ```liquid ``` (Screenshot: A product page with the pasted discount callout: a Free shipping pill with a truck icon) What it shows, where to paste it and notes: [Discount callout: Code](https://backtrackhq.com/docs/widgets/discount-callout/code/#free-shipping-callout-one-line). ### Order goal bar, one line ```liquid ``` (Screenshot: The pasted goal bar on a product page: the sentence, the bar and the reward steps) What it shows, where to paste it and notes: [Goal bar: Code](https://backtrackhq.com/docs/widgets/goal-bar/code/#order-goal-bar-one-line). ### Volume discount table, one line ```liquid ``` (Screenshot: The pasted volume tiers tag as a price table with one row per step) What it shows, where to paste it and notes: [Volume tiers: Code](https://backtrackhq.com/docs/widgets/volume-tiers/code/#volume-discount-table-one-line). ### Percentage badge, one line ```liquid ``` (Screenshot: A Horizon product page with the pasted savings badge next to the price, for a product with its own sale) What it shows, where to paste it and notes: [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/#percentage-badge-one-line). ### Sale price, one line ```liquid ``` (Screenshot: The pasted sale price under the theme's price: the struck original price and the sale price) What it shows, where to paste it and notes: [Sale price: Code](https://backtrackhq.com/docs/widgets/sale-price/code/#sale-price-one-line). ### Offer picker, one line ```liquid ``` (Screenshot: A product page with the pasted offer picker showing a bundle card with Add bundle to cart) What it shows, where to paste it and notes: [Bundle card: Code](https://backtrackhq.com/docs/widgets/bundle/code/#offer-picker-one-line), [Buy X get Y: Code](https://backtrackhq.com/docs/widgets/buy-x-get-y/code/#offer-picker-one-line), [Free gift slot: Code](https://backtrackhq.com/docs/widgets/free-gift/code/#offer-picker-one-line). ### Cart claim rows, one line ```liquid ``` (Screenshot: The cart page with the pasted claim tag: a gift slot under the cart items with Choose gift) What it shows, where to paste it and notes: [Buy X get Y: Code](https://backtrackhq.com/docs/widgets/buy-x-get-y/code/#cart-claim-rows-one-line), [Free gift slot: Code](https://backtrackhq.com/docs/widgets/free-gift/code/#cart-claim-rows-one-line). ## Product cards: pasted 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](https://backtrackhq.com/docs/developers/product-card-recipes/). ### Percentage badge, over the image ```liquid {% comment %} AndOr Discount Display: badge over the image. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_percent = andor_item.metafields.app----andor_display.best_percent.value | plus: 0 %} {% if andor_percent > 0 and andor_item.gift_card? != true %} {{ andor_percent | floor }}% OFF {% endif %} ``` (Screenshot: A Dawn collection grid with the pasted savings badge in the top left corner of a product card image) What it shows, where to paste it and notes: [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/#percentage-badge-over-the-image). ### Percentage badge, next to the title ```liquid {% comment %} AndOr Discount Display: badge next to the title. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_percent = andor_item.metafields.app----andor_display.best_percent.value | plus: 0 %} {% if andor_percent > 0 and andor_item.gift_card? != true %} Save {{ andor_percent | floor }}% {% endif %} ``` (Screenshot: A Dawn product card with the pasted savings badge next to the product title) What it shows, where to paste it and notes: [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/#percentage-badge-next-to-the-title). ### Crossed-out original price ```liquid {% comment %} AndOr Discount Display: crossed-out price. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_percent = andor_item.metafields.app----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 %} ~~{{ andor_item.price | money }}~~ {{ andor_item.price | minus: andor_off | money }} {% endif %} ``` (Screenshot: A Dawn product card with the struck original price and the sale price) What it shows, where to paste it and notes: [Sale price: Code](https://backtrackhq.com/docs/widgets/sale-price/code/#crossed-out-original-price). ### Badge that hides when the sale ends ```liquid {% comment %} AndOr Discount Display: badge that expires. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_percent = andor_item.metafields.app----andor_display.best_percent.value | plus: 0 %} {% comment %} The key is ABSENT when the sale does not end, so the default has to be far future. {% endcomment %} {% assign andor_ends = andor_item.metafields.app----andor_display.best_ends_at.value | default: 9999999999 %} {% assign andor_now = 'now' | date: '%s' | plus: 0 %} {% if andor_percent > 0 and andor_ends > andor_now and andor_item.gift_card? != true %} Save {{ andor_percent | floor }}% {% endif %} ``` (Screenshot: A Dawn collection grid with the pasted savings badge in the top left corner of a product card image) What it shows, where to paste it and notes: [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/#badge-that-hides-when-the-sale-ends). ### Price with expiry, the complete one ```liquid {% comment %} AndOr Discount Display: the sale price for one product card. {% endcomment %} {% assign andor_ns = 'app----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 %} ~~Regular price{{ andor_item.price | money }}~~ Sale price{{ andor_item.price | minus: andor_off | money }} {% if badge != false %}Save {{ andor_percent | floor }}%{% endif %} {% endif %} ``` ```liquid {%- 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 -%} ``` (Screenshot: A Dawn collection grid where one card shows the struck original price, the sale price and a Save 10% chip) What it shows, where to paste it and notes: [Sale price: Code](https://backtrackhq.com/docs/widgets/sale-price/code/#price-with-expiry-the-complete-one). ### Storewide sale banner One line across the top of a page when a storewide sale is on. ```liquid {% comment %} AndOr Discount Display: storewide sale banner. {% endcomment %} {% assign andor_percent = shop.metafields.app----andor_display.best_percent.value | plus: 0 %} {% assign andor_ends = shop.metafields.app----andor_display.best_ends_at.value | default: 9999999999 %} {% assign andor_now = 'now' | date: '%s' | plus: 0 %} {% if andor_percent > 0 and andor_ends > andor_now %} {% endif %} ``` (Screenshot: A Dawn collection page with the pasted storewide sale banner above the grid) **Where it goes:** `layout/theme.liquid`, right after the opening `` tag, so it shows on every page. For one page only, put it at the top of that page's section instead. ### "Use code X" chip The discount code a shopper types at checkout. This recipe reads the page's `product`, so paste it on the product page, for example in a **Custom Liquid** block under the price. ```liquid {% comment %} AndOr Discount Display: discount code chip. {% endcomment %} {% assign andor_now = 'now' | date: '%s' | plus: 0 %} {% unless product.gift_card? %} {% for andor_row in product.metafields.app----andor_display.discounts.value %} {% assign andor_starts = andor_row.starts_at | date: '%s' | plus: 0 %} {% assign andor_ends = andor_row.ends_at | default: '2099-01-01' | date: '%s' | plus: 0 %} {% if andor_row.code != blank and andor_starts <= andor_now and andor_ends > andor_now %} Use code {{ andor_row.code }} {% break %} {% endif %} {% endfor %} {% endunless %} ``` (Screenshot: A Dawn product page with a Use code WAX10 chip under the price) **Where it goes:** under the price on a product page, in `sections/main-product.liquid`. ### "Ends in Xh" urgency text ```liquid {% comment %} AndOr Discount Display: hours left on the sale. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_ends = andor_item.metafields.app----andor_display.best_ends_at.value | plus: 0 %} {% assign andor_now = 'now' | date: '%s' | plus: 0 %} {% comment %} Integer division truncates, so round up and say "under" rather than printing "0h". {% endcomment %} {% assign andor_hours = andor_ends | minus: andor_now | divided_by: 3600 | plus: 1 %} {% if andor_ends > andor_now and andor_hours <= 48 and andor_item.gift_card? != true %} Ends in under {{ andor_hours }}h {% endif %} ``` (Screenshot: A Dawn product card with Ends in under Xh urgency text under the price) What it shows, where to paste it and notes: [Countdown: Code](https://backtrackhq.com/docs/widgets/countdown/code/#ends-in-xh-urgency-text). ### Volume discount hint on a card ```liquid {% comment %} AndOr Discount Display: volume hint for one product card. {% endcomment %} {% assign andor_item = card_product | default: product %} {% assign andor_variant = andor_item.selected_or_first_available_variant %} {% assign andor_price = andor_variant.price | plus: 0 %} {% assign andor_now = 'now' | date: '%s' | plus: 0 %} {% assign andor_none = '' | split: '' %} {% assign andor_rows = andor_item.metafields.app----andor_display.discounts.value | default: andor_none %} {% assign andor_shop_rows = shop.metafields.app----andor_display.shop_discounts.value | default: andor_none %} {% assign andor_all = andor_rows | concat: andor_shop_rows %} {% if andor_item == blank or andor_item.gift_card? == true or andor_price == 0 or andor_all.size > 50 %} {% assign andor_all = andor_none %} {% endif %} {% assign andor_best = false %} {% assign andor_best_top = 0 %} {% for andor_row in andor_all %} {% if andor_row.tier_basis != 'quantity' or andor_row.code != blank or andor_row.variant_ids %} {% continue %} {% endif %} {% if andor_row.group_by == 'variant' and andor_item.has_only_default_variant == false %} {% continue %} {% endif %} {% if andor_row.mode != 'badge_only' or andor_row.kind != 'percentage' or andor_row.tiers == blank %} {% continue %} {% endif %} {% if andor_row.v != 1 and andor_row.v != 2 %} {% continue %} {% endif %} {% assign andor_starts = andor_row.starts_at | date: '%s' | plus: 0 %} {% assign andor_ends = andor_row.ends_at | default: '2099-01-01' | date: '%s' | plus: 0 %} {% if andor_starts > andor_now or andor_ends <= andor_now %} {% continue %} {% endif %} {% assign andor_top = andor_row.tiers | map: 'value' | sort | last | plus: 0 %} {% if andor_top > andor_best_top %} {% assign andor_best_top = andor_top %} {% assign andor_best = andor_row %} {% endif %} {% endfor %} {% assign andor_verdict = 'n' %} {% assign andor_off = 0 %} {% assign andor_flag = 0 %} {% assign andor_key = andor_variant.id | append: '' %} {% assign andor_facts = andor_rows | where: 'mode', 'price' | slice: 0 %} {% assign andor_shop_fact = andor_shop_rows | where: 'mode', 'price' | slice: 0 %} {% assign andor_facts = andor_facts | concat: andor_shop_fact | map: 'sale' %} {% for andor_fact in andor_facts %} {% comment %} A sale with no fact, or one that ended before the next sync, is unknown, so hide. {% endcomment %} {% if andor_fact == nil or andor_fact.u <= andor_now %} {% assign andor_verdict = 'h' %} {% endif %} {% assign andor_sale = andor_fact.r[andor_key] | default: andor_fact.r['*'] %} {% unless andor_sale %} {% continue %} {% endunless %} {% if andor_sale[4] or andor_sale[2] > 0 and cart.currency.iso_code != shop.currency %} {% assign andor_verdict = 'h' %} {% endif %} {% assign andor_cut = andor_price | times: andor_sale[0] | divided_by: 100.0 | round | at_most: andor_price %} {% if andor_cut > andor_off %} {% assign andor_off = andor_cut %} {% assign andor_flag = andor_sale[1] %} {% endif %} {% assign andor_cut = andor_sale[2] | at_most: andor_price %} {% if andor_cut > andor_off %} {% assign andor_off = andor_cut %} {% assign andor_flag = andor_sale[3] %} {% endif %} {% endfor %} {% if andor_off > 0 and andor_verdict == 'n' %} {% assign andor_verdict = 'b' %} {% comment %} Both can stack on one line, so hide. {% endcomment %} {% if andor_flag >= 2 and andor_best.with_product and andor_best.class == 'product' %} {% assign andor_verdict = 'h' %} {% endif %} {% endif %} {% assign andor_up_to = 0 %} {% capture andor_steps %} {% for andor_tier in andor_best.tiers limit: 10 %} {% assign andor_value = andor_tier.value | plus: 0.0 %} {% assign andor_gain = andor_price | times: andor_value | divided_by: 100.0 | round %} {% comment %} Skip tiers that do not beat the sale. {% endcomment %} {% if andor_verdict == 'h' or andor_verdict == 'b' and andor_gain <= andor_off %} {% continue %} {% endif %} {% assign andor_up_to = andor_up_to | at_least: andor_value %} {% assign andor_keep = 100 | minus: andor_value %} {% assign andor_each = andor_price | times: andor_keep | divided_by: 100.0 | round %} {% if andor_item.price_varies %} {{ andor_tier.threshold | ceil }}+{{ andor_value | floor }}% off {% else %} {{ andor_tier.threshold | ceil }}+{{ andor_each | money }} each {% endif %} {% endfor %} {% endcapture %} {% if andor_up_to > 0 and part == 'badge' %} UP TO {{ andor_up_to | floor }}% OFF {% elsif andor_up_to > 0 and part == 'info' %} {% endif %} ``` ```liquid {% render 'andor-card-tiers', card_product: card_product, part: 'badge' %} ``` ```liquid {% render 'andor-card-tiers', card_product: card_product, part: 'info' %} ``` (Screenshot: A Dawn product card with the volume discount chip on the image and the info icon beside the title) What it shows, where to paste it and notes: [Volume tiers: Code](https://backtrackhq.com/docs/widgets/volume-tiers/code/#volume-discount-hint-on-a-card). ## Developer examples Short Liquid to start your own code from. Each one keeps the common rules and says what it skips. The tags and recipes above are the complete versions. They are 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](https://backtrackhq.com/docs/developers/examples/). ### Sale price ```liquid {% comment %} AndOr Discount Display: sale price example. {% endcomment %} {% assign andor_data = product.metafields.app----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 %}

~~{{ product.price | money }}~~ {{ product.price | minus: amount_off | money }}

{% else %} {{ product.price | money }} {% endif %} ``` (Screenshot: The sale price developer example on a product page) What it shows, where to paste it and notes: [Sale price: Code](https://backtrackhq.com/docs/widgets/sale-price/code/#sale-price). ### Savings badge ```liquid {% comment %} AndOr Discount Display: savings badge example. {% endcomment %} {% assign andor_data = product.metafields.app----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 %} Save {{ percent_off | floor }}% {% endif %} ``` (Screenshot: The savings badge developer example on a product page) What it shows, where to paste it and notes: [Savings badge: Code](https://backtrackhq.com/docs/widgets/savings-badge/code/#savings-badge). ### Volume table ```liquid {% comment %} AndOr Discount Display: volume table example. {% endcomment %} {% assign andor_data = product.metafields.app----andor_display %} {% assign shop_data = shop.metafields.app----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 %} {% 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 %} {% endfor %}

{{ discount.title }}
Quantity	Discount	Price each
{{ tier.threshold }}+	{{ tier.value \| floor }}% off	{{ price_each \| money }}

{% break %} {% endfor %} ``` (Screenshot: The volume table developer example on a product page) What it shows, where to paste it and notes: [Volume tiers: Code](https://backtrackhq.com/docs/widgets/volume-tiers/code/#volume-table). ### Sale ends soon ```liquid {% comment %} AndOr Discount Display: sale ends soon example. {% endcomment %} {% assign andor_data = product.metafields.app----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 %}

{% if hours_left <= 48 %} Sale ends in under {{ hours_left }} hours {% else %} Sale ends in under {{ days_left }} days {% endif %}

{% endif %} ``` (Screenshot: The sale ends soon developer example on a product page) What it shows, where to paste it and notes: [Countdown: Code](https://backtrackhq.com/docs/widgets/countdown/code/#sale-ends-soon). ### Offers list ```liquid {% comment %} AndOr Discount Display: offers list example. {% endcomment %} {% assign andor_data = shop.metafields.app----andor_display %} {% assign now_seconds = 'now' | date: '%s' | plus: 0 %}

{{ offer.title }} {% 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 %}

``` (Screenshot: The offers list developer example on a product page) What it shows, where to paste it and notes: [Current offers: Code](https://backtrackhq.com/docs/widgets/current-offers/code/#offers-list).