How to build a custom Shopify theme in 2020 — Introduction
In the fifth article of the #4weeksOfShopifyDev challenge, I’ll be talking about how to build a custom Shopify theme in 2020
What is a Shopify theme?
Shopify theme is a combination of HTML, CSS, and JavaScript code with liquid language which is a Shopify template language that adds dynamic to your HTML code on the server-side
Shopify theme architecture
In a Shopify theme, we have several folders with specific files
- Config folder which contains:
- settings_schema.json: Shopify themes global settings like font-family, primary color, and many other settings
- settings_data.json: a registry file of what you have done in the Shopify theme editor
- Layout folder which contains:
- theme.liquid: all other templates are rendered inside this file and contain a static section like header and footer
- password.liquid: a template for password-protected Shopify store
- gift.liquid: a template renders the gift card issued to a customer upon purchase.
- Templates folder which contains:
- product.liquid: a template renders the product page
- page.liquid: a template renders a Shopify page
- cart.liquid: a template renders the cart page
- customers/account.liquid: a template renders the account page
- customers/order.liquid: a template renders a specific order content
- customers/register.liquid: a template renders the create account page
- customers/login.liquid: a template renders the login page
- customers/reset_password.liquid: a template renders the reset password page
- and other templates
- Assets folder which contains the CSS, JS, SVG files and images
- Snippets folder which contains reusable code (components)
- Sections folder which contains files to have a dynamic section in templates with data from Shopify theme editor
Local Shopify theme development
To create a custom Shopify theme and from my research, you have 3 options
- Shopify Theme Kit with webpack:
You can write your webpack config that fit your needs and upload your theme files using themekit. for example, you can use this repo as a starting point or for inspiration
- Shopify Slate v1:
Even with Shopify ends support for Slate in January 2020. it still a great tool with great features out of the box like code splitting over templates and sections.
With the launch of the new Shopify architecture, Shopify is planning to launch also a developer tool to work with this architecture
If you want to start with Slate, you can use this starter-theme with Shopify slate folders architecture
The taproom is a well known Shopify dev agency and I found their tool through a Shopify dev twitch Livestream. I think this tool will be very helpful for new Shopify theme developers because this tool used by Taproom themself in building custom Shopify themes
Ressource and tools to use
- Shopify Liquid Code Examples — A searchable library of code examples based around theme components that can be added directly into themes, to allow you to build and customize themes faster and more reliably.
- Shopify Theme Template Documentation — The go-to resource for learning the ins and outs of building Shopify themes, including detailed breakdowns of typical Liquid template files used as the basis for most Shopify themes.
- The Shopify Liquid Cheat Sheet — A simple and detailed cheat sheet for Liquid markup. This page includes examples of most Liquid syntactical elements and descriptions of their purpose.
- The Shopify Liquid Docs: The go-to resource for learning Shopify liquid language
- Official Shopify Twitch Channel: I found many tips and tools through Shopify live streams
