Buttons to update quantity when clicked + total price display

[MakeH]

Hi, I have 2 separate questions.

1. I have a normal quantity selector with +/- buttons and a customer can also type in the desired number. Additionally I’d like to add buttos with pre-defined pack sizes like 5pcs and 10pcs. When clicked a button the quantity selector number should update accordingly. I’d like to do that with a custom liquid code added on the product page if possible?

2. I have discount calculation working and I’d like to have line to show total price of the quantity selection on the product page. I’d like to do that also with liquid code on the product page if possible.

So for example:

unit price 20€

if 5pcs selected in the quantity selector a discount is automatically calculated and the unit price is updated to 15€

I’d like to have a line to show to the customer: Total price: 5pcs = 75€ which should update always when the quantity is changed.

Thanks!

[PrivateTimes]

To implement these custom functionalities on your Shopify product page using Liquid code, you’ll need to edit the product template file. Here’s a guide on how to achieve each of the requested features:

1. Adding Buttons for Pre-defined Pack Sizes:

You can add buttons for pre-defined pack sizes and use JavaScript to update the quantity selector accordingly. Here’s how you can do it:

1. Edit the Product Template:

   • Go to your Shopify admin dashboard and navigate to Online Store > Themes.
   • Click on “Actions” next to your theme and select “Edit code.”
   • Find the product template file (usually named “product.liquid”) under the “Sections” or “Templates” folder.

2. Add HTML for Pack Size Buttons:

   • Add HTML buttons for pre-defined pack sizes below the quantity selector. For example:

Add JavaScript to Update Quantity Selector:

• Add JavaScript code to handle button clicks and update the quantity selector accordingly. Here’s a basic example:

2. Showing Total Price Based on Quantity Selection:

You can use Liquid code to calculate and display the total price based on the quantity selection. Here’s how you can do it:

1. Edit the Product Template:

   • Navigate to the same product template file (“product.liquid”) as before.

2. Add Liquid Code for Total Price Calculation:

   • Use Liquid code to calculate the total price based on the selected quantity and the unit price. Here’s an example:

1. Replace product.price with the variable representing the unit price of the product. Adjust the quantity variable based on the selected quantity.

2. Display Total Price Line:

   • Add the Liquid code snippet wherever you want to display the total price line on the product page.

3. Hope it helps.

[MakeH]

Thanks for your fast reply. I got it nicely working based on this with small modifications.