DEV Community

Ilias Haddad
Ilias Haddad

Posted on • Edited on

7 2

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

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay