With the Dawn theme, adding a custom product attribute or textbox was made simple. You can add multiple Shopify UI elements, just make sure the name and ID are unique. Follow instructions below.
If you have Shopify 2.0 FREE themes , please use our FREE enhanced Shopify UI Elements generator tool.
Note: If you have the Dawn-Debut product page, this is also going to work.
If you have a different theme. This will not be applicable but doable. Send me a message if you need help.
1. Go to Shopify UI elements generator.
2. Choose the line-item-property. Make sure you click the "show at checkout" if you want the information shown upon check-out. Click "copy to clipboard"
3. Go to your Online store > Themes > Actions > Edit code
4. Go to Section folder and open the main-product.liquid
5. Find this code below . It is should be under the "{%- when 'buy_buttons' -%}
For Dawn version 8.0 and above, please open the buy-buttons.liquid under the Snippet folder then find the same code.
6. Paste the code after the {% form ...... %}. See image below, where to paste it.
See customize code for custom style.
Add the code in blue to your Shopify UI Element code
For text-short (see image below how it looks):
For text-long (see image below how it looks):
For drop-down (see image below how it looks):
Add a file uploader.
To make the inputs required. You have to find the code below:
Then delete the novalidate: 'novalidate'. Then add the required attribute to your input.
Example:
Other way is to use the Custom liquid block using the Theme editor.
1. Go to your Online store > Themes > Customize
2. Go to the product template. Under product information, click add a block the find the "custom liquid".
3. Inside the textbox, place the code you have for the textfield but add the code below in the textarea, or input. Make sure to add the code before ">", see the sample code below
See example below and added code is in bold
That is it (",)
Copied!
33 comments
How to fetch these values and send in notifications?
I’m using Dawn 9.0 and I know to add the line item code in buy-buttons.liquid in the Snippet folder for it to show in the cart. My problem is my products do not all have the same line item properties. Where would I put the code for my other products?
Hi @Ashley,
I added the instructions for the updated Dawn version.
@Samantha, I hope you are using the Shopify UI elements generator. You might have an error in your code
Thanks so much for this! Maybe I’m missing this part, but when someone checks out and selects items from the drop down, on my order page/order details it doesn’t show what selections they’ve made from this drop down link. PLEASE HELP
Where do I put the code in my custom template? The tutorial says to put it after the line ending in ‘add-to-cart-form’-%} but that is now in the buy-buttons.liquid snippet. So I don’t know where in the custom-product template to put the code for the text box.