0

Your Cart is Empty

by Michael P. Hill February 23, 2017

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.

    Need Support?

    Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



    Also in Shopify Theme Blog

    Section by section: 12 ways to use the slideshow section in your Shopify theme
    Section by section: 12 ways to use the slideshow section in your Shopify theme

    by Michael P. Hill March 28, 2017 0 Comments

    While you might think that the slideshow Shopify theme section is limited to, well, slideshows, it’s actually a versatile section that can be used for a variety of purposes on your store’s homepage. They are a great way to “tease” your shoppers with an intriguing image and bit of text and get them to engage more.

    Read More
    Turbo 2.0 is here — here's what's new and how to get it
    Turbo 2.0 is here — here's what's new and how to get it

    by Michael P. Hill March 22, 2017 0 Comments

    It’s finally here — Turbo 2.0 with sections! This is the first major update to our latest and greatest Shopify theme, Turbo. So, what’s new in Turbo 2.0? How do you get the latest version? Learn about the new present theme style and all the great sections you can use now. Find that out and more in this post, plus learn how to save on this premium Shopify theme for a limited time.

    Read More
    Section by section: 20 ways to use the featured promotions section in your Shopify theme
    Section by section: 20 ways to use the featured promotions section in your Shopify theme

    by Michael P. Hill March 14, 2017 0 Comments

    Featured promotions are simple and straightforward Shopify theme sections that rely on tried and true user interface design principles to pique shoppers’ curiosity into clicking and delving deeper into your site. Learn how to use the section over 20 ways.

    Read More
    News & Updates

    Sign up to get the latest on sales, new releases and more …