How can I implement quantity selection buttons for discounts?

Topic summary

Implementing quantity selection buttons for tiered discounts on a Shopify product page (Dawn 8.0). The solution involves template, CSS, and JS changes to create clickable quantity tiles.

Key implementation steps:

  • Edit main-product.liquid: locate ‘quantity-input’ and replace per provided screenshots (images are central to this step).
  • Add CSS in section-main-product.css to style buttons (.quantity_button, .quantity_buttons, .qty-selected) and labels.
  • Add JS in global.js: a custom element (QuantityCheckbox) handles clicks, toggles the ‘qty-selected’ class, and updates the associated quantity input’s id/form attributes.

Outcomes:

  • Multiple users confirm the buttons work as intended; original request is resolved for UI selection.

Open requests/limitations:

  • Several users ask to dynamically update the displayed product price based on the selected quantity (e.g., 6/12/24 packs, unit/pair). The responder states this is more complex—especially with variants—and does not provide public step-by-step guidance, suggesting private collaboration or hiring an expert.

Status: Quantity button UI implemented successfully; dynamic price-update feature remains unresolved publicly and moved to private messages.

Summarized with AI on January 8. AI used: gpt-5.

Hi @Thermon92 ,

If you have any further questions, you can contact me.
Happy to help you.