Copy-paste a Liquid snippet for product page - Price, MRP strike-through and discount percentage that updates when the variant changes. Adapted from a real storefront build.
Everyday backpack
1{%- assign v = product.selected_or_first_available_variant -%}2{%- if v -%}3 {%- assign save = v.compare_at_price | minus: v.price -%}4 {%- assign pct = 0 -%}5 {%- if save > 0 -%}{%- assign pct = save | times: 100 | divided_by: v.compare_at_price -%}{%- endif -%}6 <div class="gpl-price" data-gpl-price style="--gpl-accent: {{ accent | default: 'rgb(var(--color-foreground, 15 23 42))' }};">7 <span class="gpl-price__now" data-now>{{ v.price | money }}</span>8 <span class="gpl-price__was" data-was {% unless save > 0 %}hidden{% endunless %}>9 <s>{{ v.compare_at_price | money }}</s>10 </span>11 <span class="gpl-price__off" data-off {% unless save > 0 %}hidden{% endunless %}>{{ pct }}% off</span>12 <span class="gpl-price__note">(incl. of all taxes)</span>13 </div>14 <script type="application/json" data-gpl-variants>{{ product.variants | json }}</script>
Full source is for members
One payment - every snippet, guide and bundle
