Adding Custom Text Field to Product Page

[Boundless1]

Please help! I have searched & searched but cannot seem to be able to add the code to my Craft theme Product Pages so that customers are able to enter Custom Text.

Liquid codes seem to be blank so I'm assuming i should be using json but unsure on codes etc for this as most documentation seems to be around .liquid coding. It was all working fine when i was using the Debut theme but now that ive changed to Craft, I can't get it to work.

Is anyone please able to assist?

[Ujjaval]

@Boundless1  Follow below link for adding custom field into product page

https://www.shopify.com/partners/blog/metafields

[PageFly-Victor]

Hi @Boundless1,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file main-product.liquid,

Step 3: Paste the below code same as my screenshots -> Save

Result: 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

[Boundless1]

Hi, Thanks for your response. Unfortunately I can't see any screenshot.

Are you able to send through the code in text format by any chance?

[PageFly-Victor]

you can add code

 <div style="margin:8px 0">  
                      <label for="custom-field" >Custom Field : </label>
                     <input name="properties[custom-field]" style="outline: none !important;border: none;min-height: 4rem;padding: 0 8px !important;border-radius: 5px;" placeholder="Enter Text" id="custom-field">
                    </div>

[Boundless1]

Thank you! That worked however has now added the field for all my products.
I actually wanted to add it as a template so that I can select which
products to apply it on?

[PageFly-Victor]

you can try to add a tag for the product that you want to show a custom field

and replace old code

{% if product.tags contains "show_customField" %}
                        <div style="margin:8px 0">  
                          <label for="custom-field" >Custom Field : </label>
                         <input name="properties[custom-field]" style="outline: none !important;border: none;min-height: 4rem;padding: 0 8px !important;border-radius: 5px;" placeholder="Enter Text" id="custom-field">
                        </div>
                    {% endif %}

[Khushkar1]

Hi, PageFly-Victor.

Having the same issue want to add input field like  Dropdown and Redio Button on product page so customer can add there details related to products.
I as your suggestion I open my main-product.liquid page but it don't have Form tag. 

[Iviyan]

Hi @PageFly-Victor 

this is my code, I'm using the refresh theme

  {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

                  <div style="margin:8px 0">  
                      <label for="custom-field" > Personalized text: </label>
                     <input name="properties[custom-field]" style="outline: none !important;border: none;min-height: 4rem;padding: 0 8px !important;border-radius: 5px;" placeholder="Iviyan" id="custom-field">
                    </div>

                  <div style="margin:8px 0">  
                      <label for="custom-field" > link for nfc tag: </label>
                     <input name="properties[custom-field]" style="outline: none !important;border: none;min-height: 4rem;padding: 0 8px !important;border-radius: 5px;" placeholder="https://instgram.com/iviyan" id="custom-field">
                    </div>
                  
                  {{ form | payment_terms }}
                {%- endform -%}

I can see the text fields in the product page though I don't see them and the information I have entered in the cart. 

[Iviyan]

for anyone looking for a https://youtube.com/watch?v=KgXiUPh_O9Q