It’s been a while since I’ve posted here – life has been pretty busy these past few months, so here’s quick post to get back into the swing of things!
In my new role, I work primarily with Shopify. The most tedious part for me was creating the schema within each template. I’d often find myself accidentally missing a comma, quotation mark, or generally entering invalid JSON – so I created a few useful User Snippets for VS Code to automatically insert valid Shopify schema into my editor.
User Snippets are a great way to speed up development, they’re pretty much your own custom emmet (if you’re not using emmet, what are you doing?!)
You can create a new User Snippet file in VS Code by going to Code > Preferences > User Snippets (File > Preferences > User Snippets on Windows). In my case, I already had the Liquid Languages Support extension for VS Code installed, so once you hit your User Snippets, select Liquid to add snippets just for Liquid files.
The User Snippet file is a JSON file itself, so all the snippets below should be wrapped within { }
Basic Schema
Inserts a base schema tag with a a basic header setting when you type schema + tab
"Basic Schema": {
"prefix": "schema",
"body": [
"{% schema %}"
"{"
" \"name\": \"Name\","
" \"settings\": ["
" {"
" \"type\": \"header\","
" \"content\": \"Description\""
" }"
" ]"
"}"
"{% endschema %}"
],
"description": "Liquid Schema Blocks"
},
Single Schema Item
Useful for quickly creating items within your existing schema by typing schemaitem + tab into your editor.
"Schema Item": {
"prefix": "schemaitem",
"body": [
"{"
" \"type\": \"text\","
" \"id\": \"id\","
" \"label\": \"label\""
"},"
],
"description": "Individual schema item"
},
Schema Blocks
Inserts schema blocks into your editor by entering schemablocks + tab
"Schema Blocks": {
"prefix": "schemablocks",
"body": [
"{% schema %}"
"{"
" \"name\":\"Blocks\","
" \"blocks\":["
" {"
" \"type\": \"handle\","
" \"name\": \"name\","
" \"settings\":["
" {"
" \"type\": \"text\","
" \"id\": \"text\","
" \"label\": \"Label\""
" }"
" ]"
" }"
" ]"
"}"
"{% endschema %}"
],
"description": "Liquid Schema Blocks"
},
That’s it! I’m going to create even more that I think will be useful for settings I frequently use, including block settings (without the entire schema template), select, radio buttons etc.