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.
Two types of homepage settings
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:
- The panel titled “Homepage” controls the layout of the page only, not the content or settings of what appears on the homepage (more on that soon).
- Any panel that starts with the word “Homepage” and is followed by a hyphen and additional text are used to control the actual content or settings of the homepage sections, e.g. “Homepage - featured content”
- All of the panels you’ll need to control the sections of the homepage are grouped together to make them easier to find.
- You can click the name of each panel to expand it to see more options.
Types of homepage content
It’s also helpful to understand the main types of content and the terminology used to described each one:
- Slideshow: This is a looping image carousel that can show multiple sets of pictures with optional headlines and buttons, each of which can link to a separate location, though this feature is not available in Parallax.
- Banners: These areas feature large images that can have text laid on top of them. These are typically full width and are different from slideshows in that only one image, headline and other content can be featured in each area.
- Featured links: This area allows you to link to any page, product or collection in your shop. To define what appears in these locations, you will need to create a menu in your navigation section.
- Featured promotions: Although similar to featured links, featured promotions give you more freedom to include images, text and links.
- Featured content: These areas are actually created using the page tool under Sales Channels > Online Store > Pages — however, you should think of the pages as simply “holding areas” for the content. The theme will take whatever you enter in the page description editor (which might include images and or text) and place it as the content for that section on the homepage. These sections are great for “about us” type content.
- Collection in grid: This area lets you spotlight a collection of products on your homepage in a grid-like format that’s nearly identical to how they appear on a collection page. If you have quick shop activated, this feature will work here as well.
- Collection in detail: Similar to the grid approach, this option lets you create a wider version that features the product image on one side, with variants, quantity and “add to cart” elements shown on the other side; you can optionally include the full product description as well. This is a particularly good option for stores with only a few products or if you want to “sell directly from the homepage.”
- Featured blog: This area lets you spotlight the latest posts from one of your blogs. Note that this homepage setting is different from the “Blog page” theme setting, where you would set things like displaying the author name, comments, a sidebar on the main blog page, etc.
- Social feeds: This area lets you define the various social media widgets that appear on the homepage. Note that this homepage setting is different from the “Social media” setting, which is where you would actually define all your social channel URLs.
Homepage section customization and settings
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:
- Images used in the banners, slideshow or featured promotions
- The headline, sub headline and button text and links
- Fields to enter your own “one off” content or to link to content pulled from a page
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!
Homepage panel
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.
Advantage
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.
