How to create a Shopify Collection page

In this article, you’ll learn how to enrich the content of your collection page to convey more information about collections and increase your conversion rate accordingly.

Relationship between default Shopify and PageFly collection page

The default Shopify collection page contains just a few pieces of information. With that in mind, PageFly allows you to add more information about your collections so increase your chances of converting your visitors to customers.

Install PageFly for Free here.

It’s worth remembering that a PageFly collection page does not thoroughly replace the Shopify collection page, but it will be appended into the default collection page and will re-use all the parts from the default collection page. Below is how we used PageFly elements to empower a default Shopify collection page.

You can watch this video to know about the fundamentals of PageFly Collection page

Create a new collection page

  • Step 1: On the PageFly dashboard, click on the Collection page in the Page List
  • Step 2: Click on the Create a collection page button

Assign collection(s)

After creating a collection page, you need to assign one or many collections for this collection page

  • Step 1: Click on the 3 dots icon to open the Page Setting modal
  • Step 2: Click on the Type section. There is a Page Assignment option, you need to select one or many collections for the collection page. You can assign all collections of your store.

Add a hero banner

You can add a hero banner to introduce your store’s collection

  • Step 1: In the Element Catalog, click on the Add element icon (the first icon)
  • Step 2: Choose the Layout element. Drag and drop the Full Section onto the page editor
  • Step 3: Switch to the Styling tab, scroll down to the Background parameter and choose a background image for the section. Click on the More Settings button:
    • Choose the position: Center
    • Choose the size: Cover
  • Step 4: Scroll up to the Spacing parameter. Add 300px for the padding-top and bottom

Add a heading to introduce the collection

  • Step 1: In the Element Catalog, click on the Add element icon (the first icon)
  • Step 2: Drag and drop a Heading element.
  • Step 3: In the General tab, change the content for the heading in the Heading Text box
  • Step 4: Switch to the Styling tab, change the content color for the heading and font size

Add a product list

In a collection page, you need to show all products of the collection you assigned before.

You can assign to all or custom collections, or choose the auto option, it will display the collection you assigned before

  • Step 1: In the Element Catalog, click on the second icon which is Add Shopify element
  • Step 2: Drag and drop the Product List element
  • Step 3: In the General tab, choose the Auto option in the Product Source.

Add a heading of the product list

  • Step 1: In the Element Catalog, click on the Add element icon (the first icon)
  • Step 2: Drag and drop a Heading element.
  • Step 3: In the General tab, change the content for the heading in the Heading Text box
  • Step 4: Switch to the Styling tab, change the font size

Hide the default collection details

There is a collection preview section on top of the page. It’s a default section when you create a new collection page. This is the placeholder of the collection details generated by your theme. Here you can hide it from the Page Settings > Page Layout.

If you use Dawn theme of Shopify Online Store 2.0, you can click on More Action icon in the top right corner then click on Visit Theme Editor

In the theme editor, you will see product list from the collection twice, one from theme and another from PageFly

You can hide one of them by clicking on the eye icon

Finally, you can move the section made with PageFly freely on the product page. Click and hold the six-dot icon next to each section in the theme editor to move around.

Finally, click Save to save your changes

Add You May Also Like section

Add a product list

  • Step 1: In the Element Catalog, click on the second icon which is Add Shopify element
  • Step 2: Drag and drop the Product List element
  • Step 3: In the General tab, choose the Custom Collection option in the Product Source. Now you can select the collection you want to promote.

Add a heading

  • Step 1: In the Element Catalog, click on the Add element icon (the first icon)
  • Step 2: Drag and drop a Heading element.
  • Step 3: In the General tab, change the content for the heading in the Heading Text box
  • Step 4: Switch to the Styling tab, change the font size

Click on the Save & Publish button to see the page on live view.

With PageFly, your store’s collection page will give you more benefits than you think, this guide will let you know this.

You can check this video to know to assign a product page template and apply the same with the collection page template

Navigate this category

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!