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:
- The main “toolbar” and settings panels have moved from the right side of the page to the left.
- For section-compatible themes, the left sidebar now includes a “Sections” tab and a “General Settings” tab (more on what each of these do in a bit).
- If you aren’t using a sections enabled theme yet, you’ll still see the new theme editor layout with all the same panels you’re used to — they will just be on the left side of the screen now.
- The new theme editor supports drag and drop sections on the homepage as well as section options on pages, blog pages, blog article pages, collection pages and other pages. In most cases on sections-enabled themes, as you make changes to settings, the preview of your theme to the right of the toolbar is updated in realtime.
- Shopify has also made some general design updates including the icons for different settings, though much of the color and general look and feel remains familiar.
The most important thing to remember
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.
For example:
- If you’re looking to make changes to a collection page setting, you’ll need to use your site’s navigation to go to a collection page. On Out of the Sandbox themes, you’ll also see an area near the bottom that lets you drag and drop content in sidebar of collection pages.
- To edit the settings related to pages, simply navigate to any of your pages (such as “About Us” or “Contact”) and use the sidebar options that appear. To change product page settings, go to any product page and select from the options that appear. In some Out of the Sandbox themes, you can also set up a sidebar on a product page, and, if you’ve applied the product.details template to that particular product — you’ll also see settings where you can drag and drop additional content that appears below your product information.
- To update settings related to the search results page, you’ll need to perform a test search using your theme’s search box. Once the page loads, you’ll see the options for the results page and its unique sidebar.
- To update the homepage, navigate to the homepage (clicking the shop logo will always take you there) and you’ll see the sidebar change to display the sections. Keep in mind, too, that the homepage is unique in that you can drag and drop sections around to create endless layouts. By default, the theme editor opens to the homepage.
- To update a blog page, it’s important to remember that a blog’s main page (which generally shows article thumbnails and links to the individual posts) is different than a blog article post pages, even if you only have one blog. Therefore, if you want to edit settings for a blog’s main page, be sure to navigate to one of those pages. If you want to edit the article page settings, go to a post instead.
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.
Another important point
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:
- For product pages, go under Admin > Products and select the product you want to edit. From here you can edit edit the product name, description, variants, tags, collections, inventory, pricing and SEO settings.
- For collection pages, go under Admin > Products > Collections and select the collection you want to edit. From here you’ll be able to edit the collection name, criteria, description and SEO settings.
- For regular pages, go under Admin > Sales Channels > Online Store > Pages and select the page you want to edit. From here you’ll be able to edit the page name, content and SEO settings.
- For blog articles, go under Admin > Sales Channels > Online Store > Blog Posts and select the blog and blog post you want to edit. From here you’ll be able to edit the article name, content and SEO settings.
