Tejas, I am trying to do a similar thing can you help me with my website?
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.