Create a PageFly Collection Page

About PageFly Collection Page

With PageFly, you can customize the layout and design of your collection pages without any coding skills.

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

Relationship Between Shopify And PageFly Collection Page

The default Shopify Collection page contains just a few pieces of information.

Therefore, PageFly allows you to add more information about your collections to 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 to 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 learn how to create a Shopify Collection page in PageFly.

How To Create A Collection Page With PageFly

Create New PageFly Collection Page

• Step 1: On the PageFly dashboard, click on Pages.
• Step 2: Click on the Create blank page button > Select Collection in the dropdown menu

Assign Collection(S)

After creating a collection page, you need to assign one or many collections for this collection page.
There are many ways to quickly head to assign collection(s) for your collection page.

First, in the Page Editor: Click on the tag icon to open the Page Assignment modal.
You need to select one or many collections for the collection page. You can also assign all collections of your store. Please check this GIF for detailed instructions:

After assigning, you can also manage the quantity of collections assigned for each collection page directly on the PageFly Dashboard. Moreover, you can click in the quantity to quickly head to Page Assignments. Kindly check this GIF for details:

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 first tab which is the PageFly elements
• Step 2: Choose Layout, then 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 200px for the padding-top and bottom

Add A Heading To Introduce The Collection

• Step 1: In the Element Catalog, click on the first tab which is the PageFly elements
• 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

On 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 tab which is Shopify elements.
• Step 2: Drag and drop the Product List element.
• Step 3: In the General tab, choose the Auto option in the Product Source.

Add “You May Also Like” Section

1. Add A Heading

• Step 1: In the Element Catalog, click on the PageFly elements.
• 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 styling of the heading.

2. Add A Product List

• Step 1: In the Element Catalog, click on the second tab which is Shopify elements.
• 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.

Publish The Page

Click on the Save button to save all changes that have been made on the page.

After the page has been saved, the “Publish” button will show up. Click on it to make the page show on the collection page in your store.

Hide The Default Collection Details

There is a collection preview section on top of the page. It’s the default section when you create a new collection page. This is the placeholder of the collection details generated by your theme.

If you are using a Shopify OS 2.0 theme like Dawn, you will need to hide default collection in Shopify Admin Dashboard.

• Step 1: Click on the More Action icon in the top right corner > Click on Go to theme editor.

• Step 2: In the theme editor, you will see the product list from the collection twice, one from your theme and another from PageFly.

• Step 3: You can hide one of them by clicking on the eye icon.

• Step 4: You can move the section made with PageFly freely on the collection page. Click and hold the collection block in the theme editor.

• Step 5: Click Save to save your changes.

Frequently Asked Questions

1. What is a collection page?

Collection page is the place to gather your products living in the same context: For Black Friday (Flash Sale), Summer, Winter seasons, etc. They also could include different types of content, such as blog posts, help articles and landing pages.

2. How do I create a collection page from scratch in PageFly?

On the PageFly dashboard, click on Pages, then choose the ‘Create blank page’ button, and select ‘Collection’ in the dropdown.