The Collection list section makes it possible for you to add a section with your featured collections.
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 list', then click on 'Collection list'.
3) Done, your Collection list section is added.
General settings
The general settings contains the settings for the styling, layout and the products of the 'Collection list' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Collections:
Select the collections you want to show.
Image ratio:
Select the ratio of the collection image, this can be Square, Portrait or Landscape.
Show images in circle:
Now you can display images in circle.
Fill images:
Check this option if you want the images to be zoomed in/stretched so they fit in the image block.
Layout:
You have 2 layout options; (a) Slider or (b) Grid.
In case of Grid use the Collections per row settings to controls per row collections.
☑️ Show collection title below image by checking the option.
☑️ Show arrow on hover
Background:
Background Color scheme:
Select the color scheme for the background + text.
Background color opacity:
Control the background opacity using the range slider.
Background color width:
Control the width of background showing in the rich text banner.
Background color height:
Control the height of background showing in the rich text banner.
Heading:
Heading size:
Select the size of the headings 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.
Enable custom styling:
This will overwrite the first header settings above. By enabling this option you will be able to adjust color scheme and font weight.
Heading font:
Select the font family for your first and second heading.
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.
Heading size collections:
Select the size of the collections headings from a range of extra small to extra large. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".
Mobile Layout:
Now you can select mobile layout from Grid or slider options. You can also control the background color width and height showing under the section.
Spacing
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.