add checkbox to product page

discky
Shopify Partner
25 1 0

please check this 

https://shahniazstore.myshopify.com/collections/store/products/habibi%C2%AE-embrace-eau-de-parfum-1-...

 

using turbo theme.

here i want to add a checkbox so 

Customer must click checkbox if they want items to be gift wrapped.

0 Likes
leinaD
Shopify Partner
40 1 4

I'm not familiar with the turbo theme but first you need to add an input field for your checkbox value to your form:

 

image.png

 

Something like ...

<input type="hidden" name="properties[_gift]" value="yes">

* the underscore will hide this property in your checkout

 

You need to set the value using JavaScript depending on your checkbox status.

 

This property will be added to your cart item, but as I don't know turbo theme you might want to check where you preferably want to evaluate this property. But even if you won't do any further processing, it will be shown in your admin order overview.

0 Likes
discky
Shopify Partner
25 1 0

@leinaD wrote:

I'm not familiar with the turbo theme but first you need to add an input field for your checkbox value to your form:

 

image.png

 

Something like ...

<input type="hidden" name="properties[_gift]" value="yes">

* the underscore will hide this property in your checkout

 

You need to set the value using JavaScript depending on your checkbox status.

 

This property will be added to your cart item, but as I don't know turbo theme you might want to check where you preferably want to evaluate this property. But even if you won't do any further processing, it will be shown in your admin order overview.


in code section where i can found this FORM , can you please locate me that file ?? which directory have this ?

2nd thing , if i add this check box and a customer place order so where i will see on order details that the checkbox was checked ??

0 Likes
Katy
Shopify Staff
Shopify Staff
769 42 163

Hey, @discky !

 

Katy here from Shopify. I hope all is well with you!

 

To echo @leinaD here it would be best to check on this specific to your theme. You may like to have a chat with your theme developer about this directly

 

There are however alternatives which you may like to consider too:

 

I do hope this helps to point you in the right direction. If not, perhaps some of our Community members may be able to chime in to assist, as Leina has done above. 

 

Cheers, 

Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

0 Likes
leinaD
Shopify Partner
40 1 4

Regarding your first question:

It is within your product template (Templates / product.liquid). Search for any of these to locate it in the html-code 'form', 'action="/cart/add'" or 'class="shopify-product-form"'. But I can see you just added it already correctly. It only needs to be within the <form> tag. But I would align it next to the other <input> fields (form_type, utf8, id) you already have there.

 

About your second question:

 

navigate to 'Order > All Orders' and within details of any specific order you will something like this (see screenshot). In my example we '_img' and '_onstock' as property added to our line item.

 

image.png

0 Likes
Amanda88r
New Member
1 0 0

How do I do this so it only impacts one product?

0 Likes
leinaD
Shopify Partner
40 1 4

Wrap the affected code in liquid like ...

{%- if product.id = '123' -%}
  <input type="hidden" name="properties[_gift]" value="yes">
{%- endif -%}


Of course you can choose product.handle, product.title, ... as well 

0 Likes