The Shopify Schema Components is a Node.js script designed to provide a more convenient developer experience when working with Shopify sections. These sections have a schema that is managed within each individual file, often making theme development cumbersome due to the manual copy-pasting of shared controls for shared Liquid UI between files.

schema-util.config.js

{
	...
	"VisibilitySettings": [
	    {
	      "type": "checkbox",
	      "id": "{{ id_prefix }}_display",
	      "label": "Show on {{ label_prefix }}"
	    },
			{
				"type": "text",
				"id": "{{ id_prefix }}_title",
				"label": "{{ label_prefix }} Title"
			}
	  ]
	...
}

Shopify Section Import

{% schema %}
	{
		"name": "Example Section",
		"settings": [
			{
				"content": "@include VisibilitySettings, id_prefix:desktop, label_prefix:Desktop",
				"type": "paragraph"
			},
			{
				"content": "@include VisibilitySettings, id_prefix:mobile, label_prefix:Mobile",
				"type": "paragraph"
			}
		]
	}
{% endschema %}

Shopify Section after settings are injected

{% schema %}
	{
		"name": "Example Section",
		"settings": [
			{
				"content": "@include VisibilitySettings, id_prefix:desktop, label_prefix:Desktop",
				"type": "paragraph"
			},
			{
				"type": "checkbox",
				"id": "desktop_display",
				"label": "@global Show on Desktop"
			},
			{
				"type": "text",
				"id": "desktop_title",
				"label": "@global Desktop Title"
			},
			{
				"content": "@include VisibilitySettings, id_prefix:mobile, label_prefix:Mobile",
				"type": "paragraph"
			},
			{
				"type": "checkbox",
				"id": "mobile_display",
				"label": "@global Show on Mobile"
			},
			{
				"type": "text",
				"id": "mobile_title",
				"label": "@global Mobile Title"
			}
		]
	}
{% endschema %}

The advantage of this workflow

This workflow allows the SLTWTR theme to build Shopify theme liquid partial files with admin settings in a way that feels more like a modern development environment.

Clients also have enjoyed this approach because from an admin perspective the settings that they have are uniform and what they expect to find section to section.