Required Text field

Technical Q&A
, ,

Topic summary

A user asks how to make a text field required in a Shopify theme’s schema settings for a “Badge ID” input.

Two solutions are proposed:

  1. JavaScript validation approach: Add client-side validation by attaching a submit event listener to the form that checks if the badge-id field is empty, displays an alert, and prevents submission if blank. This requires adding custom JavaScript to the theme.

  2. Conditional rendering approach: Since Shopify’s schema doesn’t natively support required fields in the customizer, use Liquid’s {% if section.settings.badge-id != blank %} to conditionally render the section/element only when the field contains a value. This prevents empty badges from displaying rather than forcing input.

Key limitation: Shopify theme customizer settings cannot be made truly required through schema configuration alone—workarounds involve either validation scripts or conditional logic.

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

How can I make the shopify theme text field as a required field ?
my liquid file :

{% schema %}
    {
        "name": "Badges & Icons",
        "target": "section",
        "settings": [
            {"type":"text","label":"Badge ID","id":"badge-id"}
        ],
        "stylesheet" : "animation.css"
    }
{% endschema %}
1 Like
2

@weebySagar you can do with JavaScript like this try code

{% schema %}
{
  "name": "Badges & Icons",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "label": "Badge ID",
      "id": "badge-id",
      "default": "",
      "info": "Please enter a Badge ID. This field is required."
    }
  ],
  "stylesheet": "animation.css"
}
{% endschema %}

Script

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector("form"); // Replace with the actual form selector if needed
  const badgeIdField = document.querySelector("#badge-id"); // Use the ID from the schema
  
  if (form && badgeIdField) {
    form.addEventListener("submit", function(event) {
      if (badgeIdField.value.trim() === "") {
        alert("Please enter a Badge ID. This field is required.");
        event.preventDefault(); // Prevent form submission
      }
    });
  }
});

add above script bottom of the your js file

3

Hello @weebySagar

You can’t make this field required in the customize area. However, you can render the desired element only if this text field has value.
To do this, just go to the element you are rendering and wrap it in an if-statement:

{% if section.settings.badge-id != blank %}
  Your section code here
{% endif %}

This will show the section/element only if the text field has value in it.

I hope this is helpful.