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

Store Design
,

Topic summary

A user wants to add an email input field before the “Add to Cart” button, but only for products in a specific collection (Wix templates). The store uses an outdated Shopify Dawn theme.

Solution Provided:

  • Create a metafield named “Display input field” with type True/False
  • Add custom code to snippets -> buy-buttons.liquid that conditionally displays the input field based on the metafield value
  • Enable the metafield only for products that should show the input field

Implementation:

  • One helper (Guleria) provided step-by-step guidance and ultimately accessed the store via collaborator code to implement the solution
  • The solution was successfully tested on a sample product
  • Code uses Liquid templating to check if product.metafields.custom.display_input_field is true before rendering the input field

Status: Resolved. The user confirmed it “worked like butter.”

Follow-up Question: The user also asked about displaying collection titles instead of banner images when metafields are left blank, which would require additional customization.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

3

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

1 Like
4

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

5

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

6

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

7

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

1 Like
8

You need to use type Text – Short

1 Like
9

not really sure how to do it

10

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

Your name

11

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

1 Like
12

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.

1 Like
13

Request sent!

1 Like
14

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.

1 Like
15

thanks a lottt for your help :))))

1 Like
16

  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 %}
             
              
            
            

          {% endif %}

Regard
Guleria

1 Like
17

that worked like a butter, thank you :slightly_smiling_face:

1 Like
18

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.

19

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.

20

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