How can I make custom variant options required on my product page?

Solved

How can I make custom variant options required on my product page?

Chisty
Excursionist
18 0 5

I have some custom "options" on my product page to personalise the product beyond the normal variants and I can pass the info through to the shopping basket, but how do I make those fields "required"?

 

I have tried a simple "required" command but to no avail

     {% for tag in product.tags %}
        {% if tag == 'Ash' %}

     <label class="form__label" for="custom-name"style="padding-top: 15px;">Their Name (Name of loved one lost)</label>
<input type="text" id="custom-name" form="{{product_form_id}}" name="properties[Name Of Loved One Lost]" placeholder="Just For Info" style="padding: 20px; font-size: 20px;width: 400px;">

       {% endif %}
      {% endfor %}

 

thanks in advance

 

here is a sample input box that I am trying to make required 

Accepted Solution (1)

PaulNewton
Shopify Partner
6350 582 1355

This is an accepted solution.

Line-item Scripts are checkout scripts only available to Shopify Plus plans.

Please do not label things arbitrarily.

 

Your on the right track all it normally takes for a required input is the required attribute

 

<input required type="text" .....

 

 Though in some themes there is a novalidate attribute on the forms that needs to be removed.

For themes based on the dawn reference theme that should be in buy-buttons snippet https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L47 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 8 (8)

PaulNewton
Shopify Partner
6350 582 1355

This is an accepted solution.

Line-item Scripts are checkout scripts only available to Shopify Plus plans.

Please do not label things arbitrarily.

 

Your on the right track all it normally takes for a required input is the required attribute

 

<input required type="text" .....

 

 Though in some themes there is a novalidate attribute on the forms that needs to be removed.

For themes based on the dawn reference theme that should be in buy-buttons snippet https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L47 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Chisty
Excursionist
18 0 5

Thank you. I have tried that but it doesn't resolve the issue. 

Chisty
Excursionist
18 0 5

Apologies, I never read the bit about the "nonvalidate" That has sorted it and it works perfectly, thanks very much. 

Klpye01
Tourist
11 0 0

Hi. How did you resolve this?  I am not finding a "nonvalidate" attribute in my Dawn Theme main-product.liquid.  I was able to add the field just fine but cannot make it required.

Chisty
Excursionist
18 0 5

Its on the "buy buttons. liquid". click on the githib link above

 

Klpye01
Tourist
11 0 0

Thank you SO much!  That worked perfectly!!

djortiz
Shopify Partner
1 0 0

Hi, I've removed the "nonvalidate" attribute on the buy buttons. liquid code snippet. Do I also need to add required attribute? If so, where does that need to be added?

EasifyApps-Zoe
Shopify Partner
582 14 44

Hi @Chisty,

I noticed that you have already received a suggestion on how to make custom options "required," but I'd like to offer an alternative solution that is simpler and doesn't require any coding. This way, if you encounter similar issues in the future or if other members have similar concerns, they can consider this solution as well 🤗.

 

You can utilize the Easify Product Options app (free plan available), to create and manage your custom options more effectively. When setting up each custom option, there is a simple configuration option that allows you to designate whether it is required or not.

 

Here's a quick demonstration of how you can set a custom option as required or optional using the app 👌:

 

required.jpg

 

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