how to add a inout text filed before add to cart button for specific collection's products

[Advertfox]

hi,

i want to create input text filed before add to cart button on product page to get email of client before making purchase, i want it for specific collection's products. not for all products.

any suggestion ? 

below is my store link and pswd and i want for my wix templates collection

https://advertfox.myshopify.com/

pswd: advertfox

[qasim-devloper]

You are using outdated vision of Shopify Dawn theme. Please update the theme with the latest virsion so that I provide you updated code.

Thanks

[Advertfox]

do i need redo all the design if i update the theme ? thank you

[qasim-devloper]

No,
You have to make a copy of your theme and then you can update the theme.

[qasim-devloper]

When It's done Let me know I will provide you code.

[Advertfox]

not really sure how to do it

[Guleria]

Hello @Advertfox ,

Please follow to add field in PDP page https://ui-elements-generator.myshopify.com/pages/line-item-property

To make it available for specific collection, you can use meatfiled to make it conditional.

or use an alternate template for specific collection products.

Regards
Guleria

[Advertfox]

hi,

thank you for the response, can you please help me with more steps, i'm not sure which metafield i have to select since not showing any for the custom code. 

thanks for your help

[Guleria]

You need to use type Text -- Short

[Advertfox]

well, in that case do i need to paste below code on product.liquid page ?

<p class="line-item-property__field">
<label for="your-name">Your name</label>
<input id="your-name" type="text" name="properties[Your name]">
</p>

[Advertfox]

i have assigned one text metafield to one of my the product and pasted given custom code within in it.

but not sure what to do next on the product page 

[Guleria]

Find the form tag in sections -> main-product.liquid
or snippets product-form.liquid

and paste the code there.

If you need further help you can drop an email or PM the store collaborator code and I'll do it for you.

[Guleria]

Request sent!

[Guleria · Accepted solution]

Done, check it with tproduct https://advertfox.myshopify.com/products/candy-pastel-instagram-story-template
It will display only show with the product where metafield Display input field is enabled.

[Advertfox]

thanks a lottt for your help :)))) 

[Guleria]

1) Created metafield with name Display input field and type True or false.

2) Code in snippets -> buy-buttons.liquid

Just after this code

{%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
        novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}

Here is the code

         {% if product.metafields.custom.display_input_field %}
            <div class="fields custminut"> 
              <label for="email">Email</label>
            <input required class="required field__input" placeholder="Email" id="email" type="email" name="properties[Email]">
            </div>
          {% endif %}

Regard
Guleria

[Advertfox]

that worked like a butter, thank you 🙂

[Advertfox]

hi,

also i wanted to ask something, i have created metafield to assign different banners collection vise. however in some collection i just want to keep titles. is there any suggestion ?

thanks again for all your help. 

[Guleria]

I think if you leave meatafield blank for specific collection then by default it will pick the collection title. 

btw if such option is not available in theme theme you re using then you need to write that logic. 

[Advertfox]

Hi, when i try to keep metafield blank then it shows default image on the collection page instead of title. 

[Guleria]

hmm then it needs customization.

[Advertfox]

alright