Tutorial on How to Use Shopify Theme Editor – Convertify Support Center

Shopify's Theme Editor is used to:

Customize your theme's settings (i.e. colors, typography, etc.),
Create your site's home page (there's no page for this within the main Shopify admin panel),
Modify the "template" for various types of pages on your site (i.e. product pages, collection pages, the Cart page, blog pages, informational pages, etc.), and
Preview what pages on your site will look like (even if the theme isn't published - or "live" - yet).

For someone who has never used Shopify Theme Editor before, the interface can be a little bit intimidating. In this tutorial, we'll provide an overview of how the Theme Editor interface works and go over the basics of how to use it.

How to Launch Theme Editor

To launch the Shopify Theme Editor, navigate to the Online Store > Themes page in your Shopify admin panel and click on the 'Customize' button towards the top of the page (in the 'Live theme' section of the page).

Quick Tour of Shopify Theme Editor

Once you launch Theme Editor, you'll see that there are 4 panels (or sections) of the interface:

Top Panel - primarily used for navigation
Left Panel - shows the sections making up the content of the page
Middle Panel - shows a preview of the page
Right Panel - lists the settings and options for the selected section/block

Important Note: If you are viewing the Theme Editor on a somewhat narrow screen (i.e. less than about 1,620 pixels wide), the right panel won't appear on the screen. Instead, when you click something in the left panel that would cause the right panel to update, the right panel's content will actually appear in the left panel (with a 'Back' button in the top-left corner of the panel to "close" the right panel and go back to the left panel content). Whenever possible, it's easiest to use a screen wider than ~1,620 pixels so you actually have a right panel for showing right panel content. In this tutorial, we'll assume that the right panel actually appears on the right side of the screen.

Let's now take a closer look at each of these 4 panels.

As shown above, the top panel spans the full width of the page and contains the following (from left to right):

Exit button - Clicking this button closes the Theme Editor and takes you back to the main Shopify admin panel.
Theme name - This is the name of the theme you're editing.
Live / Unpublished button - This little button indicates whether the theme is published (i.e. "live") or not.
"..." Menu button - When clicked, this menu lists options to edit the theme's code (which is not recommended - do this instead), edit languages (i.e. the wording for system-generated text), view documentation, and get support (which would bring you here to the Support Center). These links are rarely needed.
Page navigation dropdown - Use this dropdown menu to select which type of page you want to preview and edit (home page, collection page, product page, cart page, blog post, etc.). Alternatively, you can just navigate to the page you want to preview/edit by clicking on links, buttons or menu options within the site preview itself (just like you'd do if you were on the actual website). This is how most users navigate within Theme Editor.
Desktop / Mobile toggle button - Click this button to toggle the site preview between desktop and mobile.
Undo & Redo buttons - Click to undo the last change (or to redo it after undoing it).
Save button - Changes you make are not saved (even if you navigate to another page within the Theme Editor interface) until you click the 'Save' button. Make sure to click it often so you don't lose any work.

Shopify_Theme_Editor_-_Left_Panel__Page_Sections_-2.png

The left panel contains the following (from top to bottom):

Page type - This is the name of the page you are currently previewing and editing (i.e. home page, collection page, product page, cart page, blog post, etc.).
"Sections" making up the content of the page - This portion of the page is divided into 3 parts, separated by grey horizontal lines:
1. Header sections,
2. Page body sections (for the type of page you're currently viewing), and
3. Footer sections.
(See below for more information about adding, editing, deleting and re-ordering sections.)
"Theme Settings" link - Clicking the 'Theme settings' link at the bottom of the left panel will open up universal/site-wide theme settings in the right panel.

Middle Panel (Page Preview)

The main middle panel (which takes up most of the page) shows a preview of the page on your website that you're currently viewing/editing. As mentioned above, you can click the desktop/mobile toggle button in the top panel to switch the preview between desktop and mobile view.

It's also worth repeating that most users simply click links, buttons and menu options within this site preview to navigate from one page to another (as if they're on the live website), rather than using the navigation dropdown in the top panel.

Shopify_Theme_Editor_-_Right_Panel__Settings___Options_-3.png

The right panel shows settings and options for whichever section/block/menu you have selected in the left panel. It's essentially a "sub-menu" of the left panel. For example, if you click on the 'Theme settings' link at the bottom of the left panel, the right panel will show the theme settings. Similarly, if you click on one of the page section titles in the left menu, the right panel will show the settings and options for that particular section.

As mentioned above, if your screen isn't wide enough, the right panel will actually appear on the left side of your screen after you click a link in the left panel. To exit the right panel, you'll simply click the < button in the top-left corner of the panel to see the left panel again.

Note: The very bottom of the right panel will show a 'Remove section' or 'Remove block' link if you're viewing a section or block that can be deleted from the page you're viewing. Clicking this link will permanently delete the section or block, so if you think there's a reason you may want to use it again in the future, you're better off hiding the section/block (which you can do by clicking the eye icon in the left panel).

Now that we've provided an overview of how the Theme Editor interface is laid out, let's talk about how to use it to customize your website.

Components of a Page

Each page on your website is made up of sections. For example, product pages typically have the following sections (at a minimum):

'Product information' section - shows product images on the left & key product info on the right
'Description' section - shows the product description
'Product recommendations' section - shows a grid of related products

Some sections (but not all of them) are made up of several blocks. You should think of blocks as "building blocks" that make up a section. For example, the right side of the 'Product information' section is made up of several blocks: 1) Title, 2) Product rating, 3) Price, 4) Variant picker, 5) Add to Cart buttons, etc.

Some sections "stand alone" and don't have any blocks in them. For example, the 'Full-Width Description' and 'Product recommendations' sections don't have any blocks within them; the section itself is the content.

As mentioned above, the left panel lists all of the sections that make up the page being viewed, organized into 3 parts (separated by a grey horizontal line):

Header sections
Page body sections (for the page you're currently viewing)
Footer sections

Any section that has a dark grey caret > icon to the left of it is made up of blocks. When you click on the caret > icon or on the section title, the section will expand to list all of the blocks within it (along with an 'Add block' link you can click to add an additional block to the section). (Note: If a section doesn't have the grey caret > icon in front of its name, it is a stand-alone section that isn't made up of blocks.)

When you click on either a section title or a block title in the left panel, the right panel will update and show all of the settings & options for that section or block.

In the left panel, you can re-order the sections making up the page body by clicking the 'move' icon and dragging & dropping the section to its new location. You can also hide a section by clicking on the 'eye' icon (which toggles it off). You can add a new section to the page by clicking the blue 'Add section' link at the bottom of the list of page body sections.

Theme Settings

The bottom of the left panel has a link titled 'Theme settings'. This link is always visible, regardless of what page you're viewing. When you click this link, the right panel will show several categories of theme settings.

The 'Theme Settings' menu contains settings & options that affect your entire website. This is where you'll choose your site's color scheme, buttons, font type, page width, product grid layout, etc. Think of it this way... If a setting or option affects multiple pages, sections, or blocks, it will most likely be located in one of the 'Theme Settings' menus.

As noted above, you will sometimes also see a tab called 'THEME SETTINGS' (all caps) at the bottom of the right panel. If you click this 'THEME SETTINGS' (all caps) link in the right panel, it will expand and show only the theme settings that are relevant/applicable to the specific section/block that you've selected for the specific page you're previewing. Essentially, you're viewing a filtered list of the theme settings that affect the selected page/section/block.

Header and Footer

Let's talk about the header and footer together since they're so similar. The header and footer are universal for the entire site (other than checkout pages), so any changes you make to one of the header or footer sections while viewing any page in Theme Editor will be applied universally to the entire site. So it doesn't matter which page you're viewing when you click one of the header or footer sections and make changes to it... the changes you make will update the header or footer section site-wide.

Another thing to be aware of is that the header and footer sections cannot be re-ordered. (You'll notice when you mouse over one of them, the "move" icon to drag and drop the section into a different location does not appear.)

Home Page

The home page is unique from all the other pages on your site in that you'll use the Theme Editor to create the entire home page: its sections, blocks of content within some of those sections, the page layout, textual content, banners, buttons, everything! Unlike virtually all of the other types of pages (i.e. collection pages, product pages, policy/help pages, etc.), there isn't a place within the main Shopify admin panel to create the content for your home page. It's ALL done inside the Theme Editor (other than specifying the page title and meta description SEO settings).

You'll automatically be taken to the home page when you launch the Theme Editor. But if you've navigated away from it, simply select 'Home page' in the navigation dropdown in the top panel or click a link (such as your site's logo) in the site preview.

The left panel will contain a list of all the sections (components) making up the home page, separated into 3 sections (top to bottom) separated by grey horizontal lines:

Header sections
Home page body sections
Footer sections

The home page body sections (in the middle of the left panel) make up the content of the home page. The sections can be dragged & dropped into a new location to change the order they appear on the home page. You will also notice that there is an 'Add section' link you can click to add a new section of content to the home page.

When you click on the name of the one of the sections in the left panel, you'll notice that 2 things usually happen (the 2nd won't happen if the section isn't made up of blocks):

The right panel will show settings/options related to that section; and
If the section is made up of blocks, the section will expand in the left panel to show the blocks within that section (along with an 'Add block' link to add additional block(s) to the section).

Depending on the type of section you've selected in the left panel, the right panel will sometimes also show a tab titled 'THEME SETTINGS' (in all caps) below the list of the various settings/options. If you click on the 'THEME SETTINGS' tab in the right panel, it will expand and show only those theme settings that are relevant/applicable to the page you're viewing. This is quite handy if you're trying to quickly find an option/setting related to a particular page. (The alternative is clicking the 'Theme settings' link at the bottom of the left panel, which opens up ALL of the theme settings for the site... in which case you'd then have to go through ALL theme settings to try to find the setting you're looking for.)

Ready to start creating your site's home page? Click here to begin!

Collection Pages

If you're new to Shopify, you may be confused about what a collection page is (and you might also be wondering why you don't see anything in the Shopify admin panel about creating category and sub-category pages). These two mysteries are related. :-) Collection pages are category pages.

As discussed above, the actual content of each of your collection pages is created in the Shopify admin panel. There, you'll enter the title of each collection page, specify which products belong to it, select/upload a representative image for it, and enter the textual description for the collection page.

Here in Theme Editor, you will only edit the template that will be used for all of the collection pages. You'll specify what all sections will appear on collection pages (and the order they'll appear), and you'll also configure various settings & options that determine how the page will look.

Click here for step-by-step instructions on customizing the template for collection pages.

Product Pages

Just like with collection pages, almost all of the actual content for product pages is created in the Shopify admin panel and dynamically pulled in to create each unique product page. Here in Shopify Theme Editor, you're really just specifying how you want product pages to look and where you want all of that product information to be displayed. In other words, you're modifying the product page template (but not the product information itself). Changes you make to the product page template will be applied universally to all product pages (not to just one or a few products). As discussed in this guide, though, it is possible to create multiple product page templates so you can use one template for certain products, another template for other products, and another template for others.

Click here for step-by-step guidance on customizing your product page template.

Other Pages

Other types of pages (including collection pages, informational pages, the blog home page, blog posts, the cart page, the search results page, checkout pages, etc.) can also be customized in Theme Editor. Just navigate to the type of page you want to customize, then click on the section title in the left panel (or click 'Add section' to add a new section to the page template). In some cases, there will only be a single section listed in the page body section. But if you click it, any available settings/options for it will appear in the right panel.