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
Top comments (0)