Collections list: Add a View All button to your Collections list

In this tutorial we will add a customizable button to your Collections list page. Here's an example of the result:

This will help your customers know there are additional items in your collections. The button text and style can be changed as well:

New Button options in your section settings:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Copy new section code

Copy all the code from this file:

Click to view code

Use Select all the code in that file (Command-A on Mac or Control-A on Win to select all) and then Copy (Command-C on Mac or Control-C in Win to copy).

2

Replace section code in theme

From the sections folder in the Code Editor, open the list-collections.liquid file:

Quick link if the theme is live/published:
Open file

Select all the code in the right code area (Command-A on Mac or Control-A in Windows to select all):

Replace with all the code from Step 1. Use Paste (Command-V on Mac or Control-V in Win to paste). 

Save the changes. 

3

Use the theme editor to customize

We are ready to use the new code. Open your Theme Editor:

Open the Theme Editor:

Quick link if your theme is live/published:
Open Theme Editor

Use the top drop-down menu and change to Collections list:

Use the Button settings to customize your button:

Notes:

The Margin below button slider allows you to choose how much space you want below the button. 

If you decide you don't want to show a button, clear all the Button Text, that will remove the button completely.

Remember to Save your theme editor changes. 

Still need help? Contact Us Contact Us