Navigating your Shopify theme

Your Shopify theme is one of the core components of what makes your store unique.

There are free themes, premium themes, Theme Store themes, custom themes, third-party themes, and enough other categories to shake a stick at.

All themes follow a similar format so if you learn how a Shopify theme is organized, you'll be able to go into yours and make changes. Even if you're just copying and pasting code to setup a new app, understanding a theme's organization will help you navigate.

Shopify themes are a collection of folders with various types of files in them. Each folder has a purpose and may contain different files.

Layout: The layout folder is the most important folder for your overall theme structure. It contains a few Liquid files with code that sets up the common structure for your store.

The layout code is where your theme defines if it has a sidebar, two columns or three columns, what kind of SEO fields are shown, etc.

The main layout file is called theme.liquid which is what Shopify uses by default for every page. Some themes will have additional layouts too (e.g. Shopify Plus get a checkout.liquid file to customize their checkout pages).

Templates: The templates folder is the second most important folder for your theme. This contains a couple dozen Liquid files that correspond to the different types of pages in a Shopify store.

When a visitor visits a Shopify page, Shopify will combine a specific template file for that page type with the layout file. For example, the product details page will use the product.liquid template with the theme.liquid layout.

These template files are what lets you customize different types of pages in Shopify.

Sections: Sections are a relatively new feature to Shopify themes and are optional. They let your theme create reusable chunks of code that can appear on your homepage, header, or footer.

Many themes have been moving much of their code from templates to sections because are more flexible for the theme developer. If you find that your templates look rather empty, they might have all of their code in a section instead. Look for a line of code like section 'product-details inside the template. That means the section product-details.liquid is being used.

Snippets: This folder contains more Liquid code. Similar to sections, snippets are reusable chunks of code that can appear anywhere in your theme.

If you need to put some code into multiple places in your theme, creating a snippet for the code is a great option. Typically apps will install these, JSON-LD for SEO uses one to contain all of its code.

You can tell when a snippet is used by the include 'social-icons' code. This would add the social-icons.liquid snippet.

It may seem odd that both section and snippets doe similar things. That's because snippets are older and widely used. Sections are potentially more powerful but they haven't been as widely adopted yet.

(Shopify Theme technology changes slowly since there isn't any easy way to upgrade everyone. That also makes theme upgrades a hairy affair)

Assets: This folder contains images, JavaScript, CSS, fonts, and other files that your theme might use. If it's not HTML code, it'll probably be in here.

Some themes and apps will store files in here. If they do and you ever change themes, you'll need to make sure those get moved to your new theme. So remember that if all of a sudden things start to break in your next theme upgrade, there might be some missing assets you need to copy across.

Config: Inside of this folder are data files that Shopify and your theme uses. If you use the Customize Theme area of Shopify, those settings are saved to these files.

You shouldn't edit these unless you know what you're doing or you have help from your theme developer. Mistakes in here can wreck a store.

Locales: The files in here are used to translate parts of your store into different languages. Usually for button and label like "Checkout" or "Search our site". You can do quite a bit with the right language files.

Shopify has a language editor that is easier to use but if you need to go beyond the basics, you can do it in the files.

That's how your theme is put together. This article alone won't teach you how to design your own Shopify theme but it should give you a map to where to find different pieces of code.

That way, next time an app says to add code to your product template, you'll know what they are talking about.

One great optimization is to make sure your product's structured data is setup correctly for Google's Rich Snippets. With those you'll get more traffic and better converting traffic.

You can either audit your store's structured data by hand or install JSON-LD for SEO and have all the structured data you need.

Eric Davis

Would you like to get a daily tip about Shopify?

Sign up for Eric's Daily Shopify Tips to get my daily email with a tip for Shopify every morning.

Each tip includes a way to improve your store: customer analysis, analytics, traffic, SEO, customer acquisition, Rich Results, CRO... plus plenty of puns and amazing alliterations.

Plus you'll get free access to my Premium Resource Center for free.

Join 4,400+ other Shopify store owners and sign up before the next tip is sent.

I won't send you spam. Unsubscribe at any time. Powered by ConvertKit

Topics: Shopify theme

Would you like a daily tip about Shopify?

Each tip includes a way to improve your store: customer analysis, analytics, customer acquisition, CRO... plus plenty of puns and amazing alliterations.