How to Create Unique Sidebars for Separate Collections

Supported Versions

The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.

Different Sidebars for Different Collections

The Collections pages within all of our themes let you enable a sidebar. Sometimes, you may want to configure a different sidebar for a different collection, or possibly, not have a sidebar at all for a specific collection! 

Duplicating the Collection Template

If you'd like to display a unique sidebar on a specific collection, you will need to duplicate and create an alternate Collection template! We have a helpful video guide on duplicating templates, but you can also follow the specific steps here below as well. 

• Turbo/Parallax/Retina/Responsive/Mobilia/Artisan
• Flex

• Turbo/Parallax/Retina/Responsive/Mobilia/Artisan

  Step 1: Head into your  Shopify Admin > Online Store > Themes > Actions > Edit Code > Templates > Add a new Template.
  
  Step 2: Select 'collection' as the template type, and name it something memorable, like 'alternate' or 'skirts'.

  Step 3: Within the new collection.alternate.liquid template, look for this code:

  {% section 'collection-template' %}

  ... and replace it with this code:

  {% section 'collection-template-alternate' %}

  ... where you are calling on an alternate copy of the collection section code.
  
  
  
  Step 4: Then, in Edit Code > Sections > Add a new section, and name the section to match the change you made to the alternate collection template (collection-template-alternate in this example).

  

   

  Step 5: In Edit Code > Sections open the original collection-template.liquid and COPY ALL the code to your clipboard.

  Step 6: Next, open your alternate collection section code (collection-template-alternate.liquid), delete all the existing code, and PASTE the code you just copied from the original collection section code.

  

  Awesome! You just created an alternate collection template, calling on an alternate copy of the collection section code. Now you're ready to assign this alternate template to one of your collections.

  Step 7: To do this, head into your Shopify Admin > Online Store > Products > Collections. Select the Collection to which you would like to add your unique sidebar. In the bottom right corner of the Collection page, select collection.alternate as the template, and save:

  

   

  Adding the Sidebar to the Collection

  Once you've created and assigned your alternate collection template, you can now set up your unique sidebar!

  Step 8: Head into the Customize (your Theme Editor), navigate to your collection so the Section tabs will update to show the Collection tab!

  Step 9: By clicking the Collection tab, you can scroll down to 'Sidebar' and 'Add Content' to build out your sidebar: 

  

• Flex

  In order to use unique sidebars for different collections within the Flex theme, you have a two different approaches you can use!

  The first approach will involve duplicating the collection__sidebar.liquid section file, but will also involve editing the collection.liquid template file with some additional code.

  If you aren't comfortable with editing code, we also have a second approach that is similar to the method for our other themes where you will duplicate the collection.liquid template file, duplicate the collection__sidebar.liquid section file and copy/paste code from the originals into your duplicates.

  Here are the steps for each:

  First method to create unique sidebars for different collections

  Step 1: Once you have your Collections created through the Shopify Admin, head into Online Store > Themes > Actions > Edit Code > Sections > Add a new Section. 

  For this method, it is easier to manage if you name the alternate collection__sidebar section after the collection that you will assign it to. For example, if you have a 'sale' collection, we suggest naming the duplicate sidebar 'collection__sidebar-sale'.

  Step 2: In this example, it will be assigned to the 'dresses' collection, we'll name this section collection__sidebar-dresses, once you've named it, click the 'create section' button:  

  

  Step 3: Then, we'll delete all the code in the collection__sidebar-dresses section, and replace it with the code from the original collection__sidebar section and save:

  

  Step 4: Next, head into your collection.liquid template file. Here's where you'll need to edit a bit of the code! 

  Step 5: Locate this line of code {% section 'collection__sidebar' %} and replace it with an if statement:

  {% if collection == 'dresses' %}
  {% comment %} Custom sidebar for dresses collection {% endcomment %}
    {% section 'collection__sidebar-dresses' %}
  {% else %}
  {% comment %} Falls back to the default sidebar {% endcomment %}
  {% section 'collection__sidebar' %}
  {% endif %}
  

  Step 6: Save your template.

  

  Note: if you had created multiple duplicates of collection__sidebar for multiple collections, the if statement would look something like this:

  {% if collection == 'dresses' %}
  	{% comment %} Custom sidebar for dresses collection {% endcomment %}
  	{% section 'collection__sidebar-dresses' %}
  	{% elsif collection == 'mens' %}
  	{% comment %} Custom sidebar for mens collection {% endcomment %}
  	{% section 'collection__sidebar-mens' %}
  	{% elsif collection contains 'women' %}
  	{% comment %} Custom sidebar for any collection that contains the word 'women' {% endcomment %}
  	{% section 'collection__sidebar-mens' %}
  	{% else %}
  	{% comment %} Falls back to the default sidebar {% endcomment %}
  	{% section 'collection__sidebar' %}
  {% endif %}
  

   

  Second method to create unique sidebars for different collections

  If you don't feel comfortable editing code in the first method to create unique sidebars in Flex, you can follow along this second method.

  Step 1: Once you have your Collections created through the Shopify Admin, head into Online Store > Themes > Actions > Edit Code > Templates > Add a new Template. 

  Step 2: Select 'collection' as the template type, and name it something memorable. You can just simply use 'alternate' but it is easier to manage if you name it after your collection that you'll be assigning it to, so we'll name it 'shoes,' once you've named it, click the 'create template' button: 

  

  Step 3: Next, under Sections > Add a new Section, you'll need to create a duplicate section for the sidebar.

  Step 4: Since it will be assigned to the 'shoes' collection,  we'll name the duplicate sidebar section collection__sidebar-shoes. Once you've named it, click the 'create section' button:  

  

  Step 5: Then, we'll delete all the code in the collection__sidebar-shoes section, and replace it with the code from the original collection__sidebar section and save:

  

  Step 6: Next, head back into your duplicate template file (in our case, collections.shoes.liquid), locate this line of code: 

  {% section 'collection__sidebar' %}

  and replace it with the name of your duplicate sidebar section:

  {% section 'collection__sidebar-shoes' %}

  Step 7: Save your template.

  

  Step 8: Finally, you'll need to navigate to your Collection to assign the duplicate template: 

  

  Adding the Sidebar to the Collection

  Once you've created and assigned your alternate collection template, you can now set up your unique sidebar!
  
  Step 9: Head into the Customize (your Theme Editor), navigate to your collection so the Theme editor updates with the Collection settings. 
  
  Step 10: Click into the 'Collection Sidebar' tab, enable the sidebar and click 'Add Content' to add content blocks!