Add a Drop-Down Menu to Collection Pages

Our previous blog post discussed creating collections of products in Shopify that make browsing easier for your customers. By creating collections and assigning tags, you can group items according to any criteria you deem appropriate. You can group products by price, size, colour, manufacturer, etc. In this post, we will explain how to add drop-down menus to your collection pages.

Add a Drop-Down Menu to Collection Pages

The reason for this tutorial is simple: some themes use category links instead of drop-down menus or radio buttons. So the first step is to enable the collection feature in your theme by following the instructions in the previous post. Then open your browser and navigate to one of your collection pages. If a drop-down menu or radio button is enabled by default, you are all set. If you have links instead, you’ll need to make a few coding changes.

Like the instructions in our previous post, you will be cutting and pasting code. You can find the code by visiting the Shopify site, navigating to the documentation page, and searching “filter collections with product tags.” You can also just follow the sources link at the bottom of this post to get the code. The code you are looking for is about halfway down the page.

Editing the File

The file you will need to edit is named ‘collection-template.liquid’ if you’re using either the Brooklyn or Jumpstart themes. If you are using any other theme, the file you are after is named ‘collection.liquid’. The file can be found in the following directories:

  • Brooklyn – Snippets directory
  • Jumpstart – Sections directory
  • Other Themes – Templates directory

To edit the Brooklyn file, open it and then scroll down until you see the </header> tag. Place your cursor in the line above, then open a new browser window and retrieve the code from the Shopify documentation. Copy that code and paste it into this space above the </header> tag.

To edit the Jumpstart file, open it and scroll until you find the <div class=”wrapper wrapper–margins”> tag. Create a new line below it and paste the code into that line. It is important that you get this right. Pasting the code above this tag will not only fail to produce drop-down menus, it will also cause your category pages to display improperly.

Finally, open the collection.liquid file from the Templates directory if you are using any other theme. You are looking for the {% section ‘collection-template’ %} tag in this document. You are going to create a new line above that tag in which to paste the code.

In all three cases, you need to click ‘Save’ to make your changes permanent. Now you should be able to go to any of your product pages and find drop-down menus for sorting.

One last thing to note is that the Shopify documentation page containing the code for drop-down menus also offers code for radio buttons. If you prefer radio buttons over drop-down menus, just follow the instructions on that page. It is all fairly simple.

Leave a Reply

Your email address will not be published. Required fields are marked *