Collection List

How to add section Collection List to website

The collection list displays a quick list of desired collections to catch visitors' attention.

#

Demo of Collection List on website
In the theme editor (Customize), Add section Collection List.

Configure section Collection List

Collection Settings

In the theme editor (Customize), click section Collection List then locate Collection Settings. Here you can make the necessary configurations.

#

Collection Settings
  • Skin : Choose skin for collections.
  • Hover style : Select hover style for image when hovering.
  • Hover style : Select image effect when hovering.
  • Aspect Ratio : Configure aspect ratio for collections images.
  • Image Size : Configure image size for collections. See more about the sizes attribute .
  • Masonry Layout : Turn on if you want to display Masonry layout.Only works with skin grid.
  • Items Gap : Configure the distance between card items.

Collection Style

In the theme editor (Customize), click section Collection List then locate Collection Style. Here you can make the necessary configurations.

#

Collection Style
  • Title color : Configure color for collection title.
  • Count Color : Configure color for count product in collection.
  • Button Color : Configure color for button.
  • Image spacing (px) : Configure the distance of image.
  • Count margin top (px) : Configure the distance of image.
  • Count margin top (px) : Configure the distance of count.
  • Button margin top (px) : Configure the distance of button.

How to add collection to section

Each block will be 1 collection. You can add collection by adding block.

#

Add collection to section

After adding the new block, You can configure the collection according to your requirements.

In the theme editor (Customize), click section Collection List, Click the block you want to edit. Here you can make the necessary configurations.

#

Config block
  • Collection : Select the collection you want to display.
  • Custom title : Fill in if you want to customize the title of collection.
  • Custom Featured image : Select photo if you want to customize collection featured.

Build layout section

Layout slider

You can display block layout grid or slider.If you want to use layout slider see Section Slider Layout

#

Switch slider or grid

Layout grid

If you use layout grid.At the settings section, You can configure items to display on 1 row for each screen device.

#

Configure items to display on a row of layout grid

Other configurations of section

You can see the documentation for other section configurations such as: Heading, container, background, animation, padding...

On this page
Check
No recent searches
No results for ""