Important: This blog post only refers to theme versions that do NOT support Shopify theme sections. If you purchased or installed your Out of the Sandbox theme around January 2017, please see this post for more information.
One of the biggest updates in our update to the Responsive Shopify theme is a dynamic new approach to controlling the layout and content of the homepage — but this new feature, which is also available in the Parallax Shopify theme, does require a few extra steps to use effectively on your Shopify store.
In this post, you’ll learn the basic concepts behind how this new approach works and how to use it best for your store.
There are now two distinct types of Homepage panels under Sales Channels > Online Store > Themes > Customize theme.
Instead of just having a single “Homepage” customization and settings panel in the right toolbar, there is now one “main” one titled simply “Homepage” and then multiple additional ones, each starting with the word “Homepage.”
When navigating this area, keep these points in mind:
It’s also helpful to understand the main types of content and the terminology used to described each one:
As discussed, any customization panel in the right hand sidebar that begin with “Homepage” controls the content for that one particular part of the homepage.
For example, “Homepage - slideshow” will control the large slideshow, which you may have set to appear at the top of the homepage via the more general “Homepage” setting.
Within each of these control panels are numerous other settings you can use to define a wide variety of content and options, including:
It’s definitely worthwhile to take some time to explore all of the options under each of these sections. There is a lot to take in — but it also gives you incredible flexibility!
Meanwhile, the “Homepage” customization panel (the one without any other words after it), lets you do two important tasks: Activate and order your homepage content.
When you first open this panel, you’ll see multiple dropdown menus stacked on top of each other.
In order for most homepage content to appear, it must be “activated” in this panel. A section is assumed to be active when it is selected in at least one of the dropdown menus. If a section has “None” in one of them, then that section is “deactivated” and will be “skipped” over.
The second task that this panel lets you do is determine the order of your homepage content.
To understand how this works, think of these stacked dropdown menus as simplified “blocks” or modules that represent the various sections of the page from top to bottom — you could even think of it like building a layered sandwich, and you’re deciding on the order of the ‘ingredients’, i.e. which comes first, then what’s next, as you scroll down the homepage.
Note that in the Parallax theme, banner 1 will always be at the top of the page and therefore you won’t see it in any of the dropdowns — which is by design.
If you decide you want to reorder the content on your homepage, you’ll need to shuffle the order, from top to bottom, of how you want content placed.
If you’re doing heavy duty rearranging, it can get tricky to handle swapping out what section is in what location and keeping your page in order. One handy trick here is to simply “start over” and begin reordering everything from top to bottom.
It’s also easy to accidentally include the same section twice, which the theme will technically allow you to do, but would likely look a bit odd to visitors, so it’s a good idea to double check that you haven’t repeated a section before saving.
Another possibility is, if you’re not using all of the sections, to leave every other or every third dropdown set to “none” between active modules. This will allow you to quickly “swap in” another module without having to do extensive reordering.
The key advantage to this new approach to controlling the homepage layout is, of course, more flexibility. Before, changing the order of the content required either customizing code or making a series of confusing setting updates.
No more — you can now quickly experiment with moving or adding sections on your homepage, which can be a great way to test different designs and layouts and how conversion rates are affected.
It can also be a great way to quickly add temporary content, such as sales, contests or general announcements or to spotlight a particular group of seasonal products.