In this article we discuss about Shopify theme Development tutorial to build Shopify theme. If you are new shopify theme building your first impression might be every collection and product page is controlled a single template. This isn’t the case and there are, in fact a number of ways can apply different or “alternate” templates to these various page types.

Shopify tutorial run you through basics of creating first alternate Template, So that you start customizing Shopify themes even further. Creating an alternate template. There are two approaches.

> Building themes

Whether you’re building a theme for a client, yourself, or the Shopify Theme Store, this section will guide you in building a bulletproof theme. If you’re new to Shopify, this section will introduce you to the right tools you need to start working with Shopify themes.

> Getting started

There are a number of tools and resources to help you get started building Shopify Themes:

> Theme editor

The theme editor is a tool for changing and previewing theme settings in real-time. Merchants access the theme editor by clicking Customize theme for a theme on the Themes page of their Shopify admin.

> Theme layouts

Layout files are very important for your theme because every other template file is rendered inside the active layout. There is only ever one active layout on your store at any given time. The active layout changes when your online visitors begin the checkout process.

> Theme templates

Shopify themes are made up of Liquid template files, each serving their own unique purpose. For example, collection.liquid is used to display multiple products, and product.liquid is used to show the details of a single product. Shopify themes also include a settings_schema.json file, which is a form that makes it easy for the user to customize the look-and-feel of the theme.

> Internationalizing themes

If you’re planning to submit a theme to the Shopify Theme Store, it must be internationalized. An internationalized theme is a theme that enables merchants to use the Shopify Language Editor to translate their storefront content into another language.

> Theme requirements for Shopify’s Theme Store

If Shopify’s Themes team approves your theme designs for further development, follow our requirements checklists while building your theme.

If you are using the Shopify Theme or uploading theme using a zip file, you can simply add a file to themes templates folder using.

Shopify designers and developers to build beautiful ecommerce solutions for business owners around the world. Shopify Web Design and Development blog features several articles that teach how to work with Shopify platform. Tutorials showcasing how to work with API to advanced Liquid techniques, Shopify theme development tutorial has everything you need to start build Shopify Theme with Shopify.

Shopify Cheat Sheet is a resource for building Shopify Themes with Liquid

One of the powerful features of Liquid is the layout file. Layout file as a “master template”. Typically this file will include HTML declarations, branding, navigation and footer essentially the common elements of shopify site that want to appear on every page. All pages in a Shopify Theme, unless stated will be based on template. By default this is “theme.liquid” file which resides in layouts folder. Shopify micro templates, located in the templates folder will be rendered at point Shopify encounters the “{{ content_for_layout }}” Liquid placeholder in their layout file. A layout file in a Shopify theme include two Liquid output tags “{{ content_for_header }}” & “{{ content_for_layout }}”. The first one is used by Shopify in code for analytics to provide quick access to shop’s admin area. The second “{{ content_for_layout }}” will be replaced by the template from their templates folder, e.g. the “product.liquid” template will be injected when they are viewing detail page.

Layouts are a great feature help keep themes nice and dry. However, there will be times that the elements of default layout file need to change. Perhaps you want to produce a splash page that doesn’t require the “normal” branding and navigation. It’s possible may be able to achieve the desired with CSS, but more likely l want to produce different markup. Here’s alternative layouts come into play.

Liquid variables for building Shopify Themes

Creating alternative layout is very straight forward. The first thing to do is create a file and give it a relevant name and the liquid extension. The filename is up to you. What’s important is that save it in the layouts folder in theme directory. In this file can place any HTML need (i.e. HTML declarations, CSS, JS links etc) with the two placeholders discussed above.

In order to use this layout file and effectively override the default theme. Liquid layout file, use the following Liquid syntax in any of the micro templates.

Theme Documentation

Shopify theme store is full of free themes that can download and learn from. When it comes to starting build shopify theme might prefer something more available Tutorial on GitHub.