Section by section: 21 ways to use new product and sidebar blocks in your Shopify theme

When Shopify themes first introduced sections and the new theme editor, the feature was primarily aimed at letting store owners create modular homepages — but Out of the Sandbox has leveraged the feature to create new flexible product page and sidebar options as well.

Advanced product page layouts

In the latest versions of Parallax, Retina, Mobilia and Responsive (and coming soon to Turbo), you can now activate an advanced product page layout that lets you add the following elements to the space below your product image gallery and description:

• Rich text and image: A headline and text with an optional image above the header and optional button link below the text, with the whole section either left or right aligned
• Image gallery: Three images of your choice (note that, at this time, you must use all three images)
• Image with text: An image of your choice to the left or right of a text block that includes an optional headline, and button link along with the text
• Divider: Spacing between sections with the option to be white space or a thin line

Check out this page in our Seoul demo shop to see a live example of a product page using this template with all the elements enabled.

You can find out more about activating and setting up your product page layout here.

There are a few important notes about this new feature:

• At this time, by default, every product page must have the same content in this area (see below for ideas on what to place here)
• If you really want to use this template on multiple product pages and have the content on each page be unique, this article does feature instructions on how to customize your theme to do that In order to keep the design as clean as possible, you cannot have both a custom sidebar and advanced product page layout on product pages

Using advanced product page layouts

There’s a wide variety of ways to use the advanced product page layout. Keep in mind that, by default, all products need to have the same advanced product page layout content and all of these suggestions take that into consideration:

• Use this space to tell your customers more about your company’s history
• Create eye-catching layouts to showcase your manufacturing process that apply to your entire inventory
• Showcase the materials and craftsmanship that are used throughout your product line 
• Spotlight any certifications, such as organic and non-GMO that your product line has
• Display customer testimonials and reviews, especially ones that focus on your product line as a whole or your customer service
• Create a mini lookbook that showcase multiple products in use
• If your store uses a unique process or customization options, create a “how it works” section
• Use the space to outline “subscribe and save” or subscription services
• Provide sizing or other purchasing advice that applies to all of your products
• Showcase sales or specials, including themed collections
• Create an eye-catching layout that spotlights your most popular products

Customizable sidebars

The latest versions of the Parallax and Retina Shopify themes introduce the ability to easily create a custom sidebar for your collection, product, blog, blog post and search results pages. This feature is coming soon to Mobilia and Responsive.

Your sidebar can include:

• Tag list: An automatically generated list of tags associated with your products; limit one per sidebar)
• Collection list: An automatically generated list of all the collections in your store; limit one per sidebar
• Type list: An automatically generated list of product types in your store; limit one per sidebar
• Vendor list: An automatically generated list of vendors featured in your store; limit one per sidebar (if you’re confused at the difference between tags, collections, product types and vendors read this post)
• Menu: Any of the menus in your store 
• Text: A simple text widget with header
• Page: The content of another page (which could even include an image)

There are a few important things to keep in mind when working with custom sidebars:

• You can create up to five different sidebars, one that will be used on all of your collection pages, one that displays on all of your product pages, one that will show on all of your blog main pages, one that appears on all of your blog article pages and one that is used on search result pages.
• You cannot have different sidebars for different collection pages, products, blog main pages, page articles or search result pages.
• If you have advanced product page layout activated on product pages, as described above, you cannot have a custom sidebar on product pages.

Using custom sidebars

The flexibility of custom sidebars adds a great opportunity to enhance your store’s navigation:

• Use one or more custom menus to provide quick access to your most popular items or collections
• Let customers drill down and explore products in a more precise way by creating a custom menu that links to tag pages (to do this, add /tag-name to the end of any collection page URL in a Web address link)

• Include promotion and sale banners in the sidebar by adding a page that contains just the banner image you want to show (be sure to link it to the collection or product)
• Showcase blog articles using a custom menu
• Promote a blog post (or several) by creating a small thumbnail, adding the image to a page and linking that image to the article page

• Add trustmarks or certification seals and badges to a page and then include that page in the sidebar
• Call shoppers’ attention to guarantees, warranties or other similar policies to build confidence
• Spotlight special programs such as gift cards, loyalty or rewards that you offer with text or images — or a combination of both
• Use the space to add a bit of holiday cheer to your store throughout the year by adding festive images or messaging and link it to seasonable collections, if applicable
• Create a secondary menu to “about us” content 

Of course, be sure to carefully consider what content you include in the sidebar to prevent it from becoming overloaded and cluttered. Also consider using the “toggle” feature so that each block is collapsed until a shopper clicks on its heading. This toggled state may be especially useful on blog post pages, which tend to be text-heavy to begin with; the toggled format will keep the sidebar tidy and the shopper can click to reveal just the menus or links they’re interested in.

It’s also important to consider the length of the content that appears next to the sidebar. If you have a very long sidebar your pages can look a bit odd if your page content isn’t about the same depth.