Checkout Page

261Designs
New Member
2 0 0

Hello! 

How can I add a required field for my checkout page? I will need my customers to enter a specific detail at the checkout page. I just need a text field and make it required. Thanks! 

0 Likes
Ninthony
Shopify Partner
1804 261 712

You can't edit the checkout unless you're a shopify plus member, you can alternatively add your field to the form on the cart page and make that required.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
261Designs
New Member
2 0 0

Thank you but how? I don't see the option to add a form at the cart page.

0 Likes
Ninthony
Shopify Partner
1804 261 712

It'll need to be done inside your code, sorry I was assuming you had a little code editing knowledge. You'll need to open your cart-template.liquid (likely what the file is called, I can't be entirely sure) in your sections folder. You'll see an HTML form that's either defined with an opening form tag (<form action="/cart">) or something like a liquid opening form tag, something like:

{% form "product", product %}
  // all the code for your form in here
{% endform %}

 

Inbetween those two tags you'll need to add an input field, whatever kind you are going to require for them to check and place it in there and give it a required attribute. So lets say you wanted to know if you wanted to authorize dropoff at their home if no one answered the door. You could put a checkbox:


{% form "product", product %}


// all your other code for your form


<p class="line-item-property__field">
  <input type="hidden" name="properties[Authorize Drop Off]" value="No">
  <input id="authorize-drop-off" required class="required" type="checkbox" name="properties[Authorize Drop Off]" value="Yes">
  <label for="authorize-drop-off">Authorize Drop Off</label>
</p>
{% endform %}

 

This would pass information to the back end of your website on the customers order. On the right hand side of the admin, there'll be a space for additional information and you'll see "Authorize Dropoff: Yes" or something to that extent if they checked the box. You can generate your input fields with this tool:

https://ui-elements-generator.myshopify.com/pages/line-item-property

 

Make sure you check the required field so that it adds the required attribute to the HTML element.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes