Shopify recently rolled out a change to the "Customize theme" interface that is key to getting your Shopify theme set up and looking the way you want.
This update represents an update from the March 2017 changes Shopify made to this part of the Shopify admin.
This area is still accessible from under Sales Channels > Online Store > Themes area of your Shopify admin. You can click the indigo "Customize" button on your active theme or text link on inactive themes to access the settings for the corresponding Shopify theme.
A key point of confusion
When previous version of the interface was launched back then, one of the key points of confusion among many store owners was how to access and change settings for pages other than the homepage, which is what clicking "Customize" would load by default.
Under the old interface, store owners had to navigate to pages in the main preview window — and that, in turn, would trigger the left sidebar to update with settings specific to that type of page.
No more
With this latest update, that pain point is gone.
The new interface now features a dropdown menu in the header bar just to the right of the sidebar that, when clicked, lets you jump quickly to different pages on your site.
Options listed here include:
- Home page: The default view — this lets you set up basic homepage settings as well as create and edit sections on your homepage
- Product page: Clicking this will take you to a product page, where you can adjust the settings that affect all product pages
- Collection page: Options here are reflected on all collection pages storewide
- Collection list: This option lets you change settings to the page at
/collections, which typically displays a series of links or thumbnails to all of the collections on your site. - Blogs: This option controls the main page of all of your blogs, which typically include headlines, images and links to full posts; if you have more than one blog, settings made here will affect all of the blogs' main pages
- Blog posts: Distinct from blogs, this page type lets you make changes to how the actual posts (or articles) appear
- Cart: Selecting this will let you change settings on your cart page (note this is separate and distinct from the settings for checkout pages)
- 404 page: Here you can change the settings for pages that are shown when a user follows an invalid or outdated link
But wait, there's more!
Unfortunately, one thing that's not inherently obvious is that there are actually more options below the page types.
To see these options, you'll need to scroll down within the dropdown menu. Depending on what browser you use and how your device is set up, this may involve using the mouse wheel, clicking a scrollbar or moving your finger vertically on your mouse or trackpad.
The options "hidden" here are for individual pages and you'll see one for each page you've created under Sales Channels > Online Store > Pages. It's important to remember these are distinct and separate from, for example, product pages or collection pages, which are controlled by the options above.
If you are using your theme's page.details template, this is how you can access these pages and make changes to the sections used on each one.
Where did 'general settings' go?
You may also notice that there is no longer as "general settings" tab next to the "sections" tab in the top of the left sidebar.
That tab has been renamed to "theme settings" — but the functionality remains the same.
Some final notes
Although the new dropdown menu is definitely handy for faster toggling between page types and pages, it's worth noting that, each time you change what page type or page you are viewing, the title of the dropdown becomes the name of the current page or page type you are on.
Clicking the name of the current page type or page will always reveal the same dropdown menu, however.
It's also worth noting, if you've become accustomed to navigating pages within the preview area to trigger different options to become available, this method is still available and, depending on your workflow, it might be easier to continue using this approach.
The options for previewing your store on different screen sizes has also been relocated to the top center of the customize window.
The leftmost icon simulates a mobile device preview, while the center one, which is the default view, shows your site in a desktop view. While there isn't a distinct option for tablets, a good way to simulate this, especially if you have a very large desktop monitor, is to simply make your browser narrower.
The final icon, on the far right, lets you hide the left sidebar, an option that can be particularly helpful if you work on a laptop or other smaller screen and find the sidebar makes the preview are too small to accurately see what your theme looks like.
Another change is the "theme actions" menu moving to the lower left of the screen. Use this menu to edit your Shopify theme's code directly or make updates to the language file.
You'll also notice the "Save" button has a new home as well, in the upper right corner of the screen. Near here's you'll also see a "live" indicator to let you know the theme you're tweaking is published.
Finally, it's also not entirely clear that clicking the Shopify icon in the upper left of the page takes you back to the main theme admin page. Be sure to save your work before clicking here, though!
