This template is used to render a page where all of the collections (categories) in the shop are listed. If you’ve already created a Categories CMS collection in Webflow, skip the following steps.
- Click on CMS
- Click on Add New
- Select Categories collection and rename it to “Collections”
- Customize the collection adding all the needed fields to have the perfect preview
- Click on Create
- Insert some dummy data
To create the Collection Title insert a Text Block in a Div Block and assign the attributes:
To create the Collection Description insert a Text Block with the attributes:
Insert a Collection List element and connect it to Collections collection.
Select Collection List Wrapper in the navigator and insert these attributes:
Select now the Collection Item and insert a Link Block and assign the attribute:
Now, you can add all elements or only the one you desire to products in your Collections:
This is the title of the Product. You can insert a Text Block, or Link Block if you want also the link. Insert the attribute:
and connect it to name field of the CMS.
This is the description of the product. You can insert a Text Block, a Header or a Paragraph. Insert the attribute:
and connect it to the description field of the CMS.
This is the featured image of the product. You can select a Div Block or an Image. Insert the attribute:
Connect the image or the background image to the field image of the CMS.
Select a Text Block and insert the attribute:
Insert the element you wish. It will only appear when a product is on sale (a Div Block with a text, for example). Insert the attribute:
Insert the element you wish. It will only appear when a product is sold-out (a Div Block with a text, for example). Insert the attribute:
Tags and Collections
Insert a List item and add a link (Tags) within it. The list will have the attribute:
A second list will have a second link (Collections). Assign the following attribute to the list:
The Pagination buttons must be contained in the Parent Div Block necessarily, otherwise the pagination does not work. Assign the appropriate attributes to the corresponding button. They are:
In order to display tags, types and vendors of a given Collection follow these steps:
in the Parent Div Block insert a List item and assign the following attributes;
In this way all the tags contained within that specific Collection will appear.
If you want to display Tags of the whole Shop as well, insert another List item with these attributes:
Same path shall be followed in order to display Collection Types and Vendors: insert List items with the attributes, respectively: