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

by Michael P. Hill

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

Shopify theme product page

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

Advanced Shopify product page layout

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.

To set up your custom sidebars, check out this support article.

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)

Custom Shopify theme sidebar promo

  • 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

Shopify sidebar trustmark

  • 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 

Shopify theme collapsable sidebar

    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. 

    Michael P. Hill
    Michael P. Hill

    Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.

    Also in Shopify Theme Blog

    Stretch your creative muscles with our latest Shopify theme release: Artisan 1.1.0
    Stretch your creative muscles with our latest Shopify theme release: Artisan 1.1.0

    by Michael P. Hill

    Jumpstart your ecommerce journey by buying an existing Shopify business
    Jumpstart your ecommerce journey by buying an existing Shopify business

    by Michael P. Hill

    Although starting a Shopify store from the ground up with your own products or services can be a great way to begin a side hustle or even a full time job, there’s another way to get your piece of the ecommerce pie — by purchasing an existing ecommerce store.
    Boost your affiliate commissions this month referring Shopify theme sales to us
    Boost your affiliate commissions this month referring Shopify theme sales to us

    by Michael P. Hill