How can I create a Shopify theme?

Creating a user-friendly and visually appealing theme for an eCommerce store is one of the main elements of its success. The customers are attracted to the convenient and beautiful shop designs and more likely to take more time browsing it and making purchases. However, sometimes the themes in the store do not fit the needs of a seller or require customization. Luckily, with Shopify, there are multiple ways on how to customize the existing theme, create one from scratch, or use the tools to change the position of the separate elements.

Creating Shopify theme

The development of a Shopify theme from scratch and with more advanced customization requires the knowledge of Liquid. This template language is written in Rudy. A developer who is proficient in HTML, CSS, and JavaScript can easily learn Liquid and start creating a needed theme. In addition, to build a theme, one needs to use Shopify CLI. This command-line interface is designed for the most convenient development experience due to the following features:

• Preview, test, and share changes on the theme development. 
• Reload of CSS changes and sections.
• Uses Dawn theme as a starting point in development.
• It has a theme check.
• Push and publish themes from the command line.

It is important to note that Shopify CLI is used to develop themes on Online Store 2.0. Also, to start working on a theme, you need to login into the Shopify Account and create the development store.

Theme Structure in Theme Kit

Another way to create a theme is to use Shopify Theme Kit, a similar common-line tool. Although the significant development features of Theme Kit have been replaced by the Shopify CLI, it is still used by the Shopify developers. To be more specific, a Shopify theme in Theme Kit has the following structure:  

assets/ – contains all the resources used in the theme, including images, stylesheets, and JavaScript files.

theme.js – the main logic and functionality of the store, js sections, snippets.

vendor.js – all third-party (auxiliary) scripts that are needed. Connect to this file.

theme.scss.liquid – the main table of store styles, sections and snippets.

vendor.scss.liquid – all third-party (auxiliary) scripts that are needed. Connect to this file.

config/ – includes configuration files.

settings_schema.json – values ​​from this file generate store theme settings.

settings_data.json – data of all store settings: basic settings, sections, etc.

layout/ – theme layout templates, which are a file by default.

theme.liquid – default theme layout.

locales/ – languages ​​and translations.

en.default.json – default English localization file.

sections/ – sections of the theme that can be reused to display content on various pages of the site.

snippets/ – for the most part these are pieces of code for reuse, but sometimes it is a necessary and irreplaceable functional solution.

templates/ – contains all other Liquid templates, including for customer accounts.

config.yml – configuration file.

Knowing this structure, a developer can work on the specific elements of a theme and then upload them to the Shopify site. 

Working on Sections

The basics of creating a Shopify theme for a developer is working on sections. In particular, every theme consists of the main sections and modules. The main page sections involve the display of a product, its description, and the elements of the menu (usually, a product page). Meanwhile, modular sections are separate parts that are more complicated because they can be customized to perform different functions and used in the different areas of a store. One can find the sections in the theme directory /sections. The developers perform the most important and complicated work on customization of these sections to implement the needed functions for the store. 

Theme Customization and Page Builders

As it was mentioned above, every developer with the knowledge of Liquid can customize the existing theme with the needed tools. It will allow to expand the features from the theme to fit the needs of the particular store. However, there is an even more convenient way to make changes in the theme. The drag and drop page builders, which are available for Shopify. This method is less technical and can be easily implemented by a store owner without the additional development. For example, an application like Shogun provides the opportunity to build a store and customize every element in it with ease. Moreover, creating themes in such a way also ensures a decent performance of a site.

Online Store 2.0

With the launch of Shopify Online Store 2.0, theme editing and development became much more convenient and accessible. Namely, anyone can create and modify a theme without the code. In addition, one can customize any theme or use the reference theme Dawn as the template to create one. As the developers state, they created this theme with the consideration of the performance. Therefore, you don’t need to additionally work on the optimization of the site. The integrated theme editor provides the tree view of the content and allows users to modify the needed blocks. Besides theme building, Online Store 2.0 provides the tools for app developers to integrate their products into the themes more efficiently. 

Conclusions

Although there are multiple tools available to create a Shopify theme, one may admit that this process requires knowledge of the platform. More specifically, it is important to know Liquid for the development of a theme. Meanwhile, the tools for the theme editors provide the opportunity for the people without the technical expertise to modify or create a theme that will fit the needs of a business.