Shopify themes, liquid, logos, and UX
Hi, I have added some custom code to my product page and I am trying to make it required, so the customer can’t add to cart until something is in the text field. I am using the Dawn theme and this is the code I’m using:
<p class="line-item-property__field">
<label for="initial">initial</label><br>
<input required class="required" id="initial" type="text" name="properties[initial]">
</p>
Adding the required attribute alone will not work since the form is set to not validate. You can enable form validation like this:
Go to the code editor and open the file sections/main-product.liquid. Look for code around line 289 that looks like this:
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
Remove the novalidate part so that that line looks like this:
{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}
Now the required attribute on the line item property field should work and customers should get an error message from the browser if they try to add the product to the cart without filling in that field.
Worked like a charm- thank you so much!!!
Hi! I have the same issue, but I'm using the dawn theme. I've added a custom field on the product page, using custom liquid code, but cannot find similar code in the sections/main-product.liquid area but cannot find the novalidate code to remove it. Any help? Thanks!
This code has moved to snippets/buy-buttons.liquid
Cheers mate, this helped a lot.
has this moved again?
No. Still in same place as last mentioned. Works like a charm
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025