Re: Dawn Theme Add A Text Field Option for a specific product

Solved

Dawn Theme Add A Text Field Option for a specific product

echapman24
Tourist
5 0 1

I would like to add a custom text field for one of my products, not all of them. We offer a duffel bag that can be customized with a name and number. So, we would like to add two custom fields for this product. One for Name and one for Number. Any solutions?

Accepted Solution (1)

Van_Nguyen_GSG
Shopify Partner
161 23 44

This is an accepted solution.

Hi Echapman24,

 

I used product metafields to do this before.

1. From Admin > Settings > Custom data > Metafields > Products > Add definition

2. Fill in "Name", "Description", Select Type "True or false". You can edit the "Namespace and key" as well

Example on my store:

Screenshot 2023-04-27 at 14.25.14.png

3. Go to the Product you want to add this custom text field > Scroll down to bottom > Metafields > Enable Product Personalization: select True

 

4. Go to Online store > Edit Code > Open main-product.liquid

Find this code

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
Place this code right below that:
{%- if product.metafields.custom.enable_product_personalization.value -%}
<textarea
name="properties[product_personalization]"
placeholder="Your customization (Ex: name)"
></textarea>
<textarea
name="properties[product_personalization]"
placeholder="Your customization (Ex: number)"
></textarea>
{%- endif -%}
 
By using metafields, you can choose which product to enable that custom fields, you can bulk edit as well.
Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!

View solution in original post

Replies 13 (13)

adsrole
Shopify Partner
53 1 5

Hello @echapman24 

 

This link might help solve your problem:- https://community.shopify.com/c/shopify-design/product-pages-get-customization-information-for-produ...

​Austin | Shopify Partner at AdsRole
shopify@adsrole.com | +1 (855) 855-0990
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Van_Nguyen_GSG
Shopify Partner
161 23 44

This is an accepted solution.

Hi Echapman24,

 

I used product metafields to do this before.

1. From Admin > Settings > Custom data > Metafields > Products > Add definition

2. Fill in "Name", "Description", Select Type "True or false". You can edit the "Namespace and key" as well

Example on my store:

Screenshot 2023-04-27 at 14.25.14.png

3. Go to the Product you want to add this custom text field > Scroll down to bottom > Metafields > Enable Product Personalization: select True

 

4. Go to Online store > Edit Code > Open main-product.liquid

Find this code

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
Place this code right below that:
{%- if product.metafields.custom.enable_product_personalization.value -%}
<textarea
name="properties[product_personalization]"
placeholder="Your customization (Ex: name)"
></textarea>
<textarea
name="properties[product_personalization]"
placeholder="Your customization (Ex: number)"
></textarea>
{%- endif -%}
 
By using metafields, you can choose which product to enable that custom fields, you can bulk edit as well.
Helping Shopify merchants build stores that convert.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- If you still need help, feel free to reach out to me at: van@glue.sg
Cheers!
echapman24
Tourist
5 0 1

Thank you!

J_MoS
Visitor
1 0 1

Thank you for sharing! I was able to add to my store as well. 

cguweb
Shopify Partner
4 0 3

this sounds great, but when I get to the  Metafields > Enable Product Personalization step, I see nothing about "enable personalization" any where 😞

 

What am I missing, please & thank you

MsFelecia
Visitor
1 0 1

Hi. I'm hoping someone can help me. I have dawn theme ver 11.0.0. Do these instructions work for my version? I was able to make all of the changes in the metafields. Then I attempted to follow step #4 but I was unable to find the code listed once I opened main-product.liquid. Should I be searching in a different area to find the required code or am i doing something wrong? Thanks. Felecia

jonboy1
Visitor
2 0 1

Managed to follow all the steps until you have to find the code:

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

I've gone through the main-product.liquid code several times and can't find it unfortunately.

Is the solution still viable on Dawn theme version 9.0.0? I don't want to update my version as it says I'm going to lose certain code i've added already on other sections of the website.

Thanks for any help!

cguweb
Shopify Partner
4 0 3

there's no need to search for all that, and probably different across most people's use of the theme... just search for the simplified string below, you'll find it 😉

 

{%- form 'product',

jonboy1
Visitor
2 0 1

Thank you I managed to get there but the code isn't the same as stated above:

jonboy1_0-1693390927998.png



it works when you add it under that snippet of code but it also works when using custom liquid as a box on the product page which seems easier! and it only shows on the products where i've used the metafield and turned it on specifically for the product. Thanks for everyone's help 👍

coastnerdchic
Tourist
6 0 1

It's under buy-buttons.liquid

dev22
Shopify Partner
34 1 10

Thank you for providing this piece, it works great.

I want to confirm that the data that the user enters gets submitted together with the order.

How does it look on the admin end?

EasifyApps-Zoe
Shopify Partner
582 14 47

Hi @echapman24,

Although you have already received a solution for creating a text field, I would like to suggest another simpler alternative that requires no coding 🤗. This way, in case you encounter a similar issue in the future or other community members face the same challenge, they can consider this solution as well.

 

To achieve this, you can utilize the free Easify Product Options app to effortlessly create and assign custom options to your desired product 💪.

 

Here's a quick demonstration on how to set up your custom options (name and number) using the app:

1. Create your custom options:

  • For the Name, you can utilize the Text box option type.
  • For the Number, you can utilize the Number text box option type.

EasifyAppsZoe_0-1688050612874.png

EasifyAppsZoe_1-1688050623977.png

 

You can also set some conditions for your Name & Number field if you want (e.g.: text length - min & max characters for Name, min & max value for Number).

 

Besides Text box & Number text box, the app also provides 20+ option types such as dropdown, checkbox, radio button, image swatches, color swatches, dimension, ect...

 

2. Assign your options to your product:

You have the flexibility to manually or automatically assign your custom options to one or multiple products. Since you mentioned that these two custom options are specific to one of your products, you can manually select the product for assignment.

 

EasifyAppsZoe_2-1688050816952.png

 

As you can see, the Easify Product Options app is user-friendly and doesn't require any coding ✌️. It will save you time and effort while enabling you to effectively manage your custom options. 

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Zel_Minimate
Shopify Partner
48 0 3

Hello, 

Mini:Customization Fields App allows you to add as many fields as possible to your selected products/collections. 

Here you can create a new field easily in a specific format like datepicker etc. 

Screenshot 2024-03-01 at 17.00.42.png

MINIMATE APPS - CUSTOMIZATION & SCARCITY MADE SIMPLE!
Mini Customization Fields: Effortlessly create and manage custom product fields for a personalized product options.
Mini: Cooming Soon | Waitlist : Maximize revenue through waitlists and pre-orders.
Hey! Scarcity Low Stock Counter: Boost sales by displaying low stock message to create a sense of urgency.
Explore Our Apps for Free | 24/7 Dedicated Support for Shopify merchants