How to show % discount on a product using debut theme

Shopify Discussion

Topic summary

Goal: show percentage discount on product and collection views in Shopify (Debut theme), and improve qty/Add to Cart layout.

Core approach (Liquid = Shopify’s templating language):

  • Compute % off when compare_at_price (original price) is greater than price (current price). Example placement:
    • Product page: Sections > product-template.liquid.
    • Collection/listing: theme file handling item price (often product-price.liquid or equivalent).
  • Guard against “SAVE 0%” by wrapping output in an if condition: only render when compare_at_price > price.
  • Calculation tweaks: some reported inverse/incorrect results if operands reversed; ensure (compare_at_price - price) / compare_at_price * 100. Suggestions to round down (floor) to avoid overstating; examples use split or floor. Several users note theme-specific differences (Debut, Brooklyn, Atlantic, Canopy, Dawn) and missing files, requiring locating equivalent sections/snippets.

Related requests:

  • Variant changes don’t auto-update %; needs JS to re-render on variant selection.
  • Show % badge on collection image top-left; requires CSS/markup placement in collection item template.
  • Size/color swatches: follow Shopify help guide for swatches.
  • Custom “Pay 25% now” button showing computed amount; requires dynamic price calculation in button text.
  • An app alternative (Codeboost) avoids code edits.

Status: Mixed success confirmed; many theme-specific, unresolved implementation issues remain. Screenshots were referenced but not essential.

Summarized with AI on January 13. AI used: gpt-5.
2

@Lovelyn12

Add following code where you want to display like “17% off” in your product page:

{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}

Also, I can help you to fix Qty and AddToCart button, just mail me with store details.

Thank you,

Tejas

5 Likes