Quite a few of the current top seller Shopify themes (like Motion, Reformation and Influence) have recently been adding a “collection with tabs” section built-in into their themes. This section varies in design but its functionality is very similar in all of them: you can add up to 3 collections and easily browser their products without having to scroll up and down.

Although it's a beautiful, well thoughtful section, of course, one still has to purchase the theme to use the section. It is certainly a great call if it's within your budget, but for those who are still starting out or are not willing to migrate to a new theme, this can be a deal breaker.

Bearing that in mind, we have built the code snippet section EZFY Collections Tabs. It's a copy & paste code snippet that can be installed into any theme, without any technical knowledge. It allows you to organize products into different collections and display them in a tabbed interface.

This means that customers can easily navigate between different product categories by clicking on the tabs, without having to scroll through a long list of products. Not only this saves customers time and effort, but it also opens massive room conversion optimization since they're viewing much more products in less time.

EZFY Collections Tabs code snippet also ships with 100+ customization options. Not only you can adjust its design to ensure it suits your store perfectly, but you can also test whatever options works with your business model the best.

Here is a live preview of how it looks like.

So, in this tutorial, I'll show you how you can add this section to your theme in less than two minutes. Let's get it started!

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Downloading the code files

You can download the code files clicking here. (live preview)

Getting the code

1. Starting from your Shopify admin, navigate through Online Store > Themes > Actions > Edit Code.
   
   
   
2. Check the .zip you downloaded, inside you'll find the following file:
   
   ezfy-collections-tabs.txt
   
   Open it and copy all the code inside.

Creating the file for the section

1. Go back to the Shopify code editor you just opened and look for the Sections folder.
2. Click on “Add a new section“. Name it exactly:
   
   ezfy-collections-tabs
   
   
   
3. Paste the code that you copied from the ezfy-collections-tabs.txt file and click on save.
   
   

Creating the file for the Customize page

1. Inside the .zip you have downloaded, copy all the code inside the file named “theme.liquid.txt”
2. Now, in your Shopify code editor, find the file named “theme.liquid“.
   
   Make sure it says exactly theme.liquid.
   
   
   
3. Paste the code you have copied at the very bottom of the file and save.
   
   
   
   Attention: if you already have this code there from other code snippets, you don't have to install it again.

Adding the section to your theme

1. On the top left, click on the three dots > “customize theme”.
   
   
   
   
2. Now, on the sidebar on the left, scroll down and click on “Add section”.
3. Search for “EZFY” in the search box and click on “EZFY Collections Tabs”.
   
   
4. You're all set!

Conclusion

This is how you can easily add a tabbed collection section to your current Shopify theme. Overall, this section is a powerful tool that can significantly improve the UX of any e-commerce store, regardless of what products are being sold.

By organizing products into categories, reducing information overload, and improving visual appeal, store owners can create a better shopping experience for their customers, which naturally leads to to increased sales and returning visits, since the website is pleasant to use.

If you had any troubles installing this code snippet, please do not hesitate to reach out to us at ezfycode@gmail.com. We'll be more than happy to help you!