Make require name surname &checkbox

Topic summary

A Shopify store owner needed help making the first name, last name, and checkbox fields required on their customer registration form, and wanted to improve the checkbox design.

Solution provided:

  • Locate the main-register.liquid file and find the registration form code
  • Replace the existing form structure with updated code that includes required attributes for first name and last name fields
  • Add required after value="Accept" in the checkbox input element to make it mandatory
  • The provided code also includes proper error handling for the required fields

Outcome:

The solution was successfully implemented and confirmed working by the original poster. Multiple users expressed gratitude for the detailed step-by-step instructions.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

Main Register .liquid

Someone can help with this in registration, I want to make required first name last name and checkbox :slightly_smiling_face:

I try put required command but it’s not working pls let me know if someone can fix . and if that will be possible to give this check box better design :slightly_smiling_face:

{{ ‘customer.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{{ 'customer.register.title' | t }}

{%- form 'create_customer', novalidate: 'novalidate' -%} {%- if form.errors -%}

{{ 'templates.contact.form.error_heading' | t }}

{%- endif -%}
{{ 'customer.register.first_name' | t }}
{{ 'customer.register.last_name' | t }}
{{ 'customer.register.email' | t }}
{%- if form.errors contains 'email' -%} {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}. {%- endif -%}
{{ 'customer.register.password' | t }}
{%- if form.errors contains 'password' -%} {{ form.errors.translated_fields.password | capitalize }} {{ form.errors.messages.password }}. {%- endif -%}
If you agree our rules Rules1 2 3 mark this checkbox if not dont make account .
I Agree
{{ 'customer.register.submit' | t }} {%- endform -%}

{% schema %}
{
“name”: “t:sections.main-register.name”,
“settings”: [
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

Hi @Salsberg

You can follow these steps:

  1. Find the file main-register.liquid, find the card:
# 
   {{ 'customer.register.title' | t }}

and remove from this h1 tag to of lastname:

# 
    {{ 'customer.register.title' | t }}

...
....

    

Replace that code with this code:

# 
    {{ 'customer.register.title' | t }}

  {%- form 'create_customer' -%}
    {%- if form.errors -%}
      ## 
        
        {{ 'templates.contact.form.error_heading' | t }}
      
      
        {%- for field in form.errors -%}
          - {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
              
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
              
              {%- endif -%}
          
        {%- endfor -%}
      

    {%- endif -%}
    
    
      
      {% if form.errors contains 'first_name' %}
        {{ 'customer.register.error_first_name' | t }}
      {% endif %}
      
    

    
      
      {% if form.errors contains 'last_name' %}
        {{ 'customer.register.error_last_name' | t }}
      {% endif %}
      
    

  1. Find the code:

  

  

and add required after value=“Accept”


      

      

Click Save and here is the result:

We hope that this can help you.

2 Likes

Its actually working ,thanks for this.

1 Like

Just amazing. thank you so much.