How can I display percentage discount based on selected variant?

Technical Q&A

Topic summary

A Shopify developer seeks to dynamically display percentage discounts that update when customers select different product variants. The original code only calculates discounts on page load and doesn’t respond to variant changes.

Initial Problem:

  • Static discount display using Liquid templating
  • Percentage doesn’t update when users select different variants

Proposed Solutions:

  • PageFly-Victor suggests combining Liquid code with JavaScript event listeners to detect variant changes and recalculate discounts dynamically
  • Code checks if variant == selected_variant and uses formula: (compare_at_price - price) * 100 / compare_at_price

Complications:

  • GolfCenter reports the solution doesn’t work, possibly due to conflicts with the Bcpo app (Variant Options Product Options from RelentlessApps)
  • Third-party variant selector apps may interfere with standard Shopify variant change detection

Resolution:

  • GolfCenter eventually solves their specific display formatting issue (posts #10)
  • User ‘alphabeta’ shares a working solution using DOMContentLoaded event listener that monitors [name="id"] radio buttons and triggers discount recalculation on change
  • The working code includes initial page load trigger and updates a <span id="discount_product_page"> element

Status: Multiple working solutions provided, though implementation depends on specific theme/app configuration.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
13

it working

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign percentage = 0 %}

{% for variant in product.variants %}
{% if variant == selected_variant %}
{% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
{% assign percentage = saving | at_least: percentage %}
{% endif %}
{% endfor %}

{{ percentage }}% OFF