Skip to content
Smootify Logo
Design the collections page

Collections Page

The Dynamic Collections Template page that you will find in your Webflow project, should show up a list of all the products that are inside the current collection. Naturally you can add more custom fields to the Collection CMS collection in order to further style up this page according to your needs.

Products filtered by Collection

To show up products of the current vendor, you have just to use native webflow tools, no code is required!

  1. Add a new Collection List element to the canvas and connect it to the Products Collection.

    Smootify Docs

  2. Copy & paste the following element into the Collection Item. (Is just a simple card example)

Product Card

Copy Webflow element

  1. Select the Smootify Product DOM Element and go to Settings> Attributes and you will find a data ID. You need to associate this data ID to the Shopify ID CMS field created in the Webflow Products Collection. This action will automatically add your Shopify store ID to Webflow.

    Smootify Docs

    Smootify Docs

  2. Select the Collection List Wrapper and add the Filter: “Collections Contains Current Collection”

Smootify Docs

  1. Before focusing on the design, connect each element of the product card to the Products CMS Fields. In detail for our pre-built card you’ve to connect with the Webflow CMS fields:

    - Product Title
    - Vendor
    - Price
    - Compare at price
    - Description
    - Image

    Smootify Docs