Hi @Thermon92 ,
If you have any further questions, you can contact me.
Happy to help you.
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.