Video Tutorial of Collection Page Design
You can access the collection page on the homepage of your app design.
Through this feature, you can display all the collection categories you choose to showcase to your customers.
You can also add banners and link them to specific collections or products.
On the Swipecart dashboard, hover over the design you want to edit and click on the edit icon.
The design opens. Now go to the ‘Home’ tab.
Here, in the left section of your screen, click on the ‘Collection’ page under the system-defined page.
A blank collection page design opens.
To display collections on this page, select the Collection List, Collection Grid, or Collection Slider widget from the drop-down widget list.
The Collection List widget allows you to add collections and sub-collections. Let’s see how to add this widget.
Select ‘Collection List’ from the drop-down widget list.
You get two variations- Collection List View 1 & Collection List View 2. Let’s see each of them in detail here.
How to add collections to Collection List View 1?
Drag and drop Collection List View 1 on the Collection View page.
Hover over it and click on ‘Add/Edit Content’.
In the opened popup, click on ‘+Add Collection’.
Link the collection to your store’s collection or the collection you have created.
Click on “Upload” to upload a banner for the collection.
Upload an image from your file.
Click on ‘+Add Custom Collection Name’ if you want to add a new name to the collection. Click on ‘Submit’.
The new collection is now displayed on the popup.
Click on ‘+Add Collection’ to add another collection to the list.
Repeat the same process to add collections.
How to add Sub Collection to Collection List?
Now, Hover over the collection created in the list. Click on the arrow (Add Sub Collection) icon.
A popup opens. Repeat the process of adding a collection category under it and uploading an image. Give a custom name if needed and click on ‘Submit’. A sub-collection is now created.
You can create any number of collections and sub-collections through the Collection List View 1 &2.
💡 Note: Hover over a collection in the list and click/press/drag on the hamburger icon to change the order/position of collections in the list.
How to add collections to Collection List View 2?
Drag and drop Collection List View 2 on the Collection View page.
Hover over it and click on ‘Add/Edit Content’.
In the opened popup, click on ‘+Add Collection’.
Link the collection to your store’s collection or the collection you have created.
Click on “Upload” to upload an icon for the collection.
Upload an icon image from your file.
Click on ‘+Add Custom Collection Name’ if you want to add a new name to the collection. Click on ‘Submit’.
The new collection is now displayed on the popup.
Click on ‘+Add Collection’ to add another collection to the list.
Repeat the same process.
Now, Hover over the collection created in the list. Click on the arrow (Add Sub Collection) icon.
Click on the arrow (Add Sub Collection) icon.
A popup opens. Repeat the process of adding a collection category under it and uploading an image.
Give a custom name if needed and click on ‘Submit’. A sub-collection is now created.
You can create any number of collections and sub-collections through the Collection List View 1 &2.
Note: Hover over a collection in the list and click/press/drag on the hamburger icon to change the order/position of collections in the list.
To add a Collection Slider or Collection Grid, select them from the drop-down widget list.
Drag and drop your preferred style variant inside the Collection View page.
Hover over the dropped widget and click on ‘Add/Edit Content’ to select the collection categories you want to display on the widget.
Hover over the widget and click on ‘Edit Style’ to customize the style of the widget.
Click here to learn more about Collection Grid
Click here to learn more about Collection Slider.
You can also add banners to your collection page. For this, click on the drop-down list. Select Banner Grid, Banner Slider, or Single Banner from the widget list.
Drag and drop any style variant inside the collection view page design.
Hover over the dropped widget and click on ‘Add/Edit Content’ to add images to the banner and link them to relevant collection categories. Click here for more information on how to add content to these widgets.
Hover over the widget and click on ‘Edit Style’ to customize the widget style. Click here for more information on how to style the widgets.
Hurray! You have now completed designing the collection page on your Swipecart app.
Hurray! 🎉🎉🎉
What's Next?🤔
Explore the next article Product List View