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' -%}
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} |
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):
<p class="line-item-property__field"> <label for="your-name">Your name</label><br> <input id="your-name" type="text" name="properties[Your name]" style="width: 100%; line-height: 2;"> </p> |
For text-long (see image below how it looks):
<p class="line-item-property__field"> <label for="your-name">Your name</label><br> <textarea id="your-name" name="properties[Your name]" style="width:100%"></textarea> </p> |
For drop-down (see image below how it looks):
<p class="line-item-property__field"> <label>Your name</label><br> <select id="your-name" name="properties[Your name]" style="font-size: 1.5rem; width: 100%; padding: 2%;"> <option value="Red">Red</option> <option value="White">White</option> <option value="Blue">Blue</option> </select> </p> |
Add a file uploader.
<p class="line-item-property__field"> <label>Upload your image here </label> <input type="file" name="pic" accept="image/*"> </p> |
To make the inputs required. You have to find the code below:
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} |
Then delete the novalidate: 'novalidate'. Then add the required attribute to your input.
Example:
<p class="line-item-property__field"> <label>Upload your image here </label> <input type="file" name="pic" accept="image/*" required> </p> |
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
| form="product-form-{{ section.id }}" |
See example below and added code is in bold
| <p class="line-item-property__field"> <label for="your-name">Your name</label><br> <textarea id="your-name" name="properties[Your name]" style="width:100%" form="product-form-{{ section.id }}"></textarea> </p> |
That is it (",)
33 comments
Please make sure to use the enhanced Shopify UI element tool https://made4uo.com/blogs/journey-to-awesome-shopify-website/enhanced-shopify-ui-elements-generator-tool
I followed your tutorial for Dawn 13.0 and made it “Required field” for proceeding to add it to cart.
But it doesn’t work for Buy Now button, can you help me? I don’t want customers to proceed without selecting the required fields.
Its working perfect for add to cart but users can directly click on “Buy Now” without filling in the required options
Hi ALLIE HEMMINGS,
You need to create a product template and edit that template. Please check our video tutorial on how https://youtu.be/bg7l0lZcyOU?si=4KJ9Hdub0NxPuOns
I’m wanting to add a line item property to one product only, and don’t want it to appear on other product pages. How would I go about doing this? Thanks so much for your awesome tutorials!
Hi Nadia,
We had posted an answer in Shopify community similar to your problem. You can check the solution on the link provided.
https://community.shopify.com/c/online-store-and-theme/custom-liquid-field-in-product-form/td-p/2314479
Hello! I want to add a custom message field to only specific products (one collection). I created a new product template for these products, but I don’t know where to place the code so that it only applies to the new product template that I made. If I add the code as custom liquid in the theme editor, the customization message won’t appear at checkout. Please help!
Hi @Dani,
Please follow the video tutorial. I mentioned this
Hi, thank you for the easy to follow steps. I ran into an issue after adding the code to the main-product.liquid file. The textbox is showing on my product page, however the information doesn’t carry over to the Cart. Any idea why that might be? I am using Dawn 11. Thank you
Hi @HANNAH,
If you want to only apply the textbox to a certain product, I would recommend creating a new product template, and follow the instructions for adding the textbox using custom liquid.
Hi, I am using dawn 11.0 – when I add the code under buy-buttons.liquid like you mention it applies to all my listings – I created a custom-product.liquid so I can apply the custom text box to only certain listings but where would edit the custom template to input the UI Elements code? Being a newer version of Dawn it does not have the standard code within the template mentioned in step 5, only under buy-buttons.liquid