What is the Theme Editor?

The theme editor is a powerful tool that allows you to customize the content and appearance of your store. With the theme editor, you can make changes to your store's design and see them in real-time, without having to publish them first.

Using the theme editor, you can easily make changes to your store's layout, colors, fonts, and more. This allows you to create a unique and personalized shopping experience for your customers.

The theme editor can be accessed through your store's admin panel.

STEP 1

Simply log in to your store's admin panel and navigate to the "Themes" section.

STEP 2

From there, you can select the theme you want to edit and click on the "Customize" button.

The Shopify Theme Editor can be loosely divided into 2 areas: the Top Bar and the Sidebar.

The top bar is where you'll find some controls to help you more easily navigate and view the different theme settings.

The Exit button will quickly take you out of the Theme Editor and back to the Themes admin screen.

Here, you'll find:

You'll find a dropdown list of templates in the middle of the top bar. With this function, you can quickly switch between your theme's templates.

Device previews let you switch between desktop and mobile views. If you wish to temporarily hide the sidebar options, you can also go full screen.

The Mobile preview is a quick way to check that your theme looks good on Mobile devices, but it can't fully replace actual testing on mobile devices. So don't skimp there.

If you want to add the changes back in, you can undo your earlier modifications and redo them using the buttons located here. From here, you can also save your theme.

Save only appears grayed out if no changes have been made. It is no longer disabled and instead turns into a black button if you can save the theme.

We actually dive into the specifics of theme customization in the sidebar.

The name of the template you are seeing and the number of pages it is allocated to are displayed at the top of this sidebar. You can work on unassigned templates to Pages.
​
A preview link for the specific page you are currently browsing will also be visible. The preview can be changed to any page on your website by clicking the "Change" button.

This page may be presently linked to a different template. This offers you a great deal of freedom to experiment with various section and layout arrangements on a template.

A list of every section currently on the template may be seen in the Section Settings. On the page, they are arranged from top to bottom. As an illustration:

Any changes you make to the settings in these global sections will take effect on the whole website.

Here, we can observe that the template-specific components are positioned below the Footer section and above the Announcement Bar and Header sections.
​
The section parameters unique to a template are not global. Consequently, altering a section setting on one template does not transfer to a corresponding part on another template. On the other hand, those sections will update on all of the pages in your collection if they share the same template.
​
You will be able to add more sections to the sections list if your template is equipped with Sections Everywhere.
​
You can click on each section to view the available section settings. These settings should appear in the right sidebar of your screen if it is large enough.

This contains the global (or site-wide) settings that affect the entire website. Theme Settings include:

One of the main features of the theme editor is the ability to customize your store's content. This includes adding or removing sections, rearranging the layout, and adding custom text and images.

For example, if you want to add a new section to your homepage, you can simply click on the "Add section" button in the theme editor and select the type of section you want to add. You can then customize the content of the section to fit your needs.

In addition to customizing your store's content, the theme editor also allows you to make changes to your store's appearance. This includes changing the colors, fonts, and overall design of your store.

With the theme editor, you can easily change the color scheme of your store by selecting from a variety of pre-made color palettes or by creating your custom colors. You can also change the fonts used on your store to match your brand's style.

One of the best features of the theme editor is the ability to preview your changes in real-time. This means that you can see exactly how your store will look before making any changes live.

Once you are satisfied with your changes, you can easily publish them to make them live on your store. This allows you to make changes and updates to your store's design without disrupting the shopping experience for your customers.