DEV Community

Ilias Haddad
Ilias Haddad

Posted on • Edited on

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.

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)