Update: In December 2017, Shopify redesigned the "customize theme" area to add a dropdown menu that makes it easier to switch between pages. Read about this update here. While many store owners will find the new menu easier to use, the functionality described in this article remains active and some store owners may find it more useful.
Shopify recently rolled out a new theme editor interface that has some key differences from the earlier Shopify theme settings panel — but the new interface can be a bit confusing for longtime and newbie Shopify users alike.
However, once you’ve gotten the general idea behind the new editor’s appearance and capabilities, you’ll be able to use it much more efficiently.
Some of the biggest changes you’ll note on the new theme editor include:
Longtime Shopify users may get confused or panicky when first opening the new editor — namely because it appears that most of your setting options have disappeared.
Not to fear, however, if you remember this key concept: To access settings that specifically apply only to a certain type of page in your store, you have to navigate to a page of that type in the live preview area next to the editor’s sidebar.
Once you navigate to a specific type of page, the theme editor’s sidebar will then automatically update. On every page except the homepage, you’ll see three boxes in the sidebar — header, footer and the page type (such as “collections” or “product”).
Clicking each of these lets you access all of the available settings.
In other words, there's no buttons or options in the left sidebar to directly access the settings for collection pages, product pages, blog pages or pages. Instead, you use the site preview to access these settings — and the sidebar contextually updates as you move around your site.
Another important note is that the “header” and “footer” boxes, no matter what page type you access them from, have the same settings. In other words, if you update it on one page type, all of the pages will reflect that change.
It’s also important to remember that in most cases it doesn’t matter which page you go to if you want to modify the overall settings for all of those pages, because changing the setting on one page, whether it be a collection page, product page or regular page, will result in those changes being applied to all pages of that type.
A second common point of confusion with the new theme editor is the “General Settings” tab. This tab and its contents remain the same no matter what type of page you are on.
This tab contains general settings for shop styles and features like colors, fonts, currency conversion, blog post comments, newsletter popups, social media links, search, favicon and the checkout page.
However, this tab also contains settings that you may think would be under another panel — namely the “Product grid” panel. This panel includes settings for collection page layouts, product page layouts, reviews, product galleries and quick shop icons.
So for example, you might be wondering why the “product form” settings aren’t available when you navigate to a product page. One of the main reasons behind this is that the product form appears not only on the product page, but can also appear on collection pages if the quick shop option is active, so the settings for this form are considered to be more ‘global’ in nature; hence they end up in the General Settings rather than associated with just the product page.
Confusing? Yeah, a little. But a good rule of thumb is to remember if you can’t find a setting under a specific page’s sidebar, check “General Settings.”
Despite this confusion, it’s worth noting that the “General Settings” tab is accessible from all page types, so it’s not that hard to click over to it if you find yourself confused.
Finally, keep in mind that the theme editor is generally for configuring shop-wide styles and page elements. There are some instances where text content can be added directly through the editor (e.g. text that displays over banner images) but If you want to edit the actual content of a product, collection description, blog post or page, this cannot be done in the theme editor, but instead should be done just like you’ve always done it: