The Collection list: split section shows a list of large collection titles next to an image. When customers point to a title, or click it, the image changes to that collection.
Each title has two buttons, such as Face and Body. Each button has its own image and link, so one title can lead to two collections.
Click Collection list: split in the left sidebar to see the section settings on the right-hand sidebar.
Image ratio: Choose the shape of the image: Adapt to first image, Square, Portrait, Landscape, 4:3 or 3:2. In the example shown, Portrait is selected.
Adjust how the collection titles look and how customers switch between them.
Preset: Choose the text style of the titles, from Heading 2XL to Heading 2XS. You can edit these presets in the theme settings. Choose Custom to set your own style with these options:
Font: Use the Body or Heading font. Appears only when the theme uses different body and heading fonts.
Size and Mobile size: Set the text size in pixels.
Line height: Set the space between lines of the same title.
Letter spacing: Set the space between letters, in %.
Case: Keep the titles as you typed them (Default) or show them in capital letters (Uppercase).
Space between tabs: Set the space between the titles on screens 992px wide and larger, in pixels.
Space between tabs (mobile): Set the space between the titles on screens narrower than 768px, in pixels.
Interaction: Choose how customers switch to another collection.
Hover: The image changes when the pointer moves over a title.
Click: The image changes only when a title is clicked.
With either option, clicking the title that is already selected opens its link.
Control the colors and the width of the section.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Width: Choose Page to keep the section within the page width, or Full to stretch it across the full screen width.
Use these settings to adjust the space above and below the section.
Available options:
Padding: Top and Bottom, used on screens 768px wide and larger
Mobile padding: Top and Bottom, used on screens narrower than 768px
Theme Settings: Change the Page width without leaving the section. This is a theme-wide setting, so the new value applies to every section that uses it.
Custom CSS: Add custom styles to this section only. To add styles to your entire online store, use Custom CSS in the theme settings.
Each Collection block adds one title to the list. To add another one, click Add block under Collection list: split and choose Collection.
Heading: Enter the title shown in the list.
The block has two groups of settings, Button 1 and Button 2, one for each button under the title. Each group has the same options:
Collection: Select the collection for this button.
Image: Select the image shown when this button is active. If you leave it empty, the collection image is used.
Button label: Enter the button text on desktop. Leave it empty to hide the button.
Mobile button label: Enter the button text on mobile. If you leave it empty, the Button label is used.
Link: Paste a link or search for a page. If you leave it empty, the button opens the collection.
When customers point to a button or click it, the image switches to that button's image.
The Section header holds the small title above the list, such as CATEGORIES. It has no settings of its own. Click Add block under Section header to add a Subheading, Heading, Text or Spacer block.
The example uses a Subheading block. Click it to edit the Text and choose its Color (Secondary is lighter than Primary) and Width (Auto, or Custom with a Max width).