Skip to main content
Creating a new Collection Page [Zipify Pages]

Learn how to set up and customize a new Collection Page to effectively showcase your products!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated yesterday

Overview

The Collection Page feature makes it easier than ever to showcase products from a specific Shopify Collection in a way that fits seamlessly into your store's design. The Collection Page automatically publishes to the /collections path on your Shopify storefront. Available for Basic and Advanced plans.

With enhanced flexibility and customization options, you can create visually appealing, high-converting pages that highlight your best-selling or curated products. Whether you're looking to optimize for conversions or improve navigation, the Collection Page ensures a smooth shopping experience while maintaining ease of use.

πŸ“ When you publish a new Collection Page in Zipify Pages, a unique Collection Template (e.g., collection.zipifypages-XX.json) is automatically added to your Theme.

Creating a new Collection Page

Follow the quick and easy steps below to create your new Collection Page template with Zipify Pages:

1. From the Dashboard or Pages sections, click the "Create New Page" button located in the top-right corner:

2. Hover over the Collection option and click on it:

3. Your existing Shopify Collections will be displayed in the popup. Select the Collection(s) to assign to the template, then click "Next":

4. The "Blank Page" template option is selected by default. Click the "Create Page" button in the top-right corner:

πŸ“Pre-built layouts for Collection Pages coming soon!

5. Give your new Collection Page a Name (1) and add any desired Tags (2), then click the "Create" button:

πŸ“ Tags are used exclusively for internal organization within Zipify Pages.

Collection Elements

After clicking the "Create" button, you'll be directed to the Zipify Pages editor to begin customizing your new Collection page.

By default, the collection page template will include the "Collection Section" which is comprised of the following collection elements:

πŸ“Additional Collection elements coming soon!

Collection Grid

The "Collection Grid" element showcases the products that belong to the specific collection being viewed, allowing customers to browse and interact with items grouped together. It works similarly to the Product Grid element β€” modifications in one column are automatically applied to all, streamlining your workflow and maintaining consistency for a polished, professional look.

Layout

In the "Layout" tab of the sidebar, you can set the following:

  1. Product per Line - Set the number of products to display per row, with a maximum of 6 products allowed.

  2. Product Spacing - Adjust the spacing between products by selecting a preset value (S/M/L/XL) or entering a Custom value in pixels using the slider or input field.

  3. Maximum products to show - Set the maximum number of products to display, with a maximum value of 50.

πŸ“Remaining tabs in the sidebar like Alignment, Background, Shape, etc. are common settings included for most elements. More details.

Show More Button

The "Show More" button on the collection page reveals additional products that are hidden after the initial set of products is displayed. When clicked, it loads more items from the collection, allowing customers to view a larger selection without leaving the page or navigating to another page.

In the "Main" tab of the sidebar, you can set the:

  • Call to Action text

  • Font Name

  • Font Size

  • Font Style (Bold/Italic/Underline)

πŸ“Remaining tabs in the sidebar like Styling, Hover State, Shape, etc. are common settings included for the Button element.

Managing Assigned Collections

Your collection page template can be assigned to one or multiple Shopify Collections. The assigned Collection(s) can be managed from the following locations:

Within the Page Builder

By clicking the "Assigned Collections" button in the top-left of the page builder:

You can click the "Edit Collections" button (1) to assign or un-assign collections, and click the πŸ‘οΈ button (2) next to an assigned collection to preview it in the Collection Grid within the builder:

From the Collection Tab

From the "Collection" tab of the Pages table, click the link in the "Assigned to" column to assign or un-assign collections:

What if the Collection is assigned to multiple Templates?

A published collection on Shopify can only use one collection page template at a time. If a particular Collection is already assigned to a collection page template in Zipify Pages, the πŸ“„ icon will be included in the popup with an informative message:
​

When publishing a collection page with a collection that is already assigned to another template, the following popup will appear to confirm the action:

Publishing a Collection Page

Publishing a Collection Page is the final step in bringing your customized collection design to life on your Shopify store.

To publish the collection page template, click the "Publish" button (1) located at the top-right corner of the builder to open the Publish Settings popup. You can edit the Collection Page Name (2) and/or Tags (3) if desired. Finally, click the "Publish" button (4) and the collection page will be published.

Once published, the assigned Collection(s) will seamlessly transition to using the newly created template, replacing the previous template. This ensures that the updated layout and content display on the storefront.

To Unpublish a collection page template, you can either click the "Unpublish" button in the Publish Settings:

Or the toggle on in the "Collection" tab in the Pages table:

Once unpublished, the previously assigned collection template will automatically be reapplied to the Collection(s).

"Collection" tab in the Pages table

In the "Collection" tab of the Pages table, you can view key details and perform various actions, including:

  1. Page Name – Displays the name of the Collection Page for easy identification.

  2. Tags – Used for internal organization within Zipify Pages.

  3. Last Modified – Shows the date the Collection Page was last modified.

  4. Assigned to – Indicates which Shopify Collection(s) the template is assigned to. Click the link to manage assigned collection(s).

  5. Status – Displays whether the Collection Page is published, unpublished or pending updates.

  6. Publish / Unpublish toggle – Allows you to switch the Collection Page between published and unpublished states.

  7. View / Preview – Opens the Collection Page to see how it appears on the storefront. If the page is published, the live collection page URL will be displayed; if unpublished, an internal preview URL will be provided.

  8. Make a Copy – Duplicates the existing Collection Page to create a new version.

  9. Edit Properties – Modify Page Name, Group(s) and Tag(s) of the Collection Page.

  10. Delete Collection Page – Removes the Collection Page from the table.
    πŸ“The page will be moved to the "Recently Deleted" tab, you will have 30 days to restore it before permanent deletion.

  11. Search – Enables you to find specific Collection Pages by name or tag.

πŸ“You can click the Page Name and Last Modified column headers to sort the table in ascending or descending order.

Did this answer your question?