How to create a Collection list page


This article will guide you through the steps to create a collection list page using GemPages with absolutely no coding.



What is a Collection list page?

A Collection list is a page where all of your collections are listed, allowing viewers to quickly see how all of your products are categorized. Designing one with Shopify requires advanced coding with design limits. No worries - GemPages takes all the troubles away!

Follow the steps below to create a Collection list page and link it to your store.


Prepare your collections

Before creating the Collection list, make sure you have a few collections in hand.

Go to Shopify Admin > Products > Collections to edit your existing collections or create new ones. Hit “Save” when you are finished. 

Afterward, it’s time to start building the page in GemPages.


Create the Collection list page

To design the list in a grid format, we’ll use the Hero Banner and Row elements.

Step 1: Go to GemPages Dashboard > Landing Pages and create a new page. You can select a pre-designed template or start from scratch.

Step 2: In the GemPages Editor, drag & drop a Row element onto your page. The Row will act as a container for your collections.

Step 3: In the Settings tab on the left sidebar, choose a suitable layout.

This will be the layout of your collections. The number of columns is the number of collections the Row will display. In this example, we will choose the layout of 4 even columns.



Step 4: Drag & drop a Hero Banner element into one of the columns. Make size adjustments if needed.

Step 5: Duplicate the Hero Banner element and nest it inside the rest of the columns. These elements will then display your collections.

Step 6: Replace the Hero Banner’s image with your collections’ thumbnail images. Make sure you have the same height for your images, or else they will not align properly.

Step 7: Link each banner to its own collection by going into the Hero Banner’s Settings tab, then paste the collection’s URL into the Link section.


You can get your collection’s URL by heading to Shopify Admin > Products > Collections, find the collection and open it. Right-click on the “View” button and select Copy Link/Copy Link Address (depending on the browser).


Step 8: Use the Heading element to name your collections.

Drag & drop a Heading element into a Hero Banner. Make adjustments as needed and then duplicate the Heading for the remaining banners.

Afterward, edit the Headings’ text to match your collections.

Hit “Save” and “Preview” to check how the page looks on the live page. When you are happy with the result, hit “Publish”.

*If you have a large number of collections, feel free to duplicate the Row and repeat the steps as many times as you need.


Link your Collection list to store menu

Now it’s time to link the page to your store menu. You can link the Collection page to either:

And there you have it, no coding required as promised! Should you need any further assistance, please reach out to our GemPages Support Team at any time. We’re available via email or live chat.


Was this helpful?