Make a field required on product page

[monami]

I am using the Ella Shopify theme and am trying to make the following code required before a customer can add a product to the cart:

{% if customer and customer.metafields.customer_fields.dogs -%}
  
  
  
    
    

    
    
  

{%- endif %}

Since this code is not part of the Add To Cart form, the customer can add the product to the cart without making the desired selection. Any recommendations would be greatly appreciated.

[AK_Design_Dev]

You need to a js devloper then this problem solve otherwise customer can’t product but or add to cart

[BSSCommerce-B2B]

Hi @monami ,

I hope you are doing well. I don’t know how Ella theme structures its codes, so I use Dawn as a reference. Try to follow these steps

1. Find buy-buttons.liquid

2. Open file and search for form ‘product’

3. Add your code right after like this

[monami]

Thank you for the information. Here is the code for the product-button.liquid file:

    {%- if gift_card_recipient_feature_active -%}
      {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
    {%- endif -%}

    {%- assign product_form_installment_id = 'product-form-installment-' | append: product.id -%}
    {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
        
        {{ form | payment_terms }}
    {%- endform -%}
    {%- assign product_form_id = 'product-form-' | append: product.id -%}
    
    {%- if settings.show_notify_form -%}
        
 1 %}style="display: none;"{% else %}{% if product.available %}style="display: none;"{% endif %}{% endif %}>
            {% render 'halo-notify-sold-out', id: product.id, current_variant: current_variant %}
        

    {%- endif -%}

I’ve tried entering my select code in various places, but I don’t seem to have it correct. The select options appear; however, the required option does not prevent the product from being added to the cart even though no dog was selected.

[BSSCommerce-B2B]

Hi my friend @monami ,

It is because the Shopify form is rendered with novalidate attribute, you need to add some JS to remove it. Try this

    {%- if gift_card_recipient_feature_active -%}
      {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
    {%- endif -%}

    {%- assign product_form_installment_id = 'product-form-installment-' | append: product.id -%}
    {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
        
        {{ form | payment_terms }}
    {%- endform -%}
    {%- assign product_form_id = 'product-form-' | append: product.id -%}
    
    {%- if settings.show_notify_form -%}
        
 1 %}style="display: none;"{% else %}{% if product.available %}style="display: none;"{% endif %}{% endif %}>
            {% render 'halo-notify-sold-out', id: product.id, current_variant: current_variant %}
        

    {%- endif -%}

Here is the diff if you want to know

[monami]

Thank you for your assistance. Unfortunately, this did not require the selection of the dog name.