The Collection Navigation Section in the Xpert theme allows you to display up to 50 collections with images on your store. This section provides an easy way for customers to navigate to specific collection pages by simply clicking on the desired image.
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Collection navigation', then click on the section.
3) Done, your section is added.
Section settings:
Simply click on the 'section' to open the settings. On the sidebar, the following settings will show:
Collections: Select the collections you want to show.
Image ratio: Control the image size using the range slider.
Show images in circle: Check this option if you want to show images in circle, it is only applicable when image ratio is set to 100%.
Fill image: Check this option if you want the images to fill/stretch and cover the containers.
Collection Size: Control the collection size, you can choose between Small, medium and large.
Border: Check this option if you want a border around images and below that select the border color.
Layout: Control the layout choosing from Slider or grid.
Heading:
Fill in the titles of your section.
Heading font family and font weight:
Choose the font family and font weight for your heading.
Heading size:
Select the size of the primary and secondary heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal.
Button label:
This text will show on the button, for example: 'All categories'
Link:
Enter a link for the button, for example to the full collection page.
Button color scheme:
Select the color scheme for the button.
Show link instead of a button:
Check this box if you don't want a button to show, but only a clickable text.
This section of settings control the collection titles i.e. their font size, font family and alignment.
Choose from slider or grid for your mobile layout.
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.