followed your steps and it works great! now is it possible to make the price update according to the button? I have “6 pack”, “12 pack”, and “24 pack” buttons, can the price on the top change with the button selected including the discount related to each button?
my website - https://cestlave.com/products/cest-la-ve-italian-charcuterie-pack-italian-style-deli-mozzarella-cheese-mini-bruschette-raw-almonds-dried-cranberries
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.
1 Like