The Collection Button List Section in the Xclusive theme allows you to display collections in the form of buttons. These buttons, when clicked, redirect users to their respective selected collection pages. This documentation will guide you on how to set up and customize the Collection Button List Section in your Shopify store.
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.
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.
Button color scheme: Select the colors for the collection buttons.
Button styling: Choose from fill or no fill if you want the button background to fill the button.
Content position: Control the alignment of the section content including the text and buttons.
Heading:
Fill in the title of your banner. You can also add a subheading. Don't want to show headings? Simply leave the field empty!
Heading font:
Choose the font for your primary and secondary 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.
Fill in the text that you want to show underneath heading. Don't want to show a description/text? Simply leave the field empty!
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.
Enable this option to have custom styling for your section.
Choose between grid or slider;
Grid:
Slider:
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 70px and the default for mobile is 30px.