The Featured collections section shows products from several collections, one tab per collection. Customers click a tab to see the products of that collection.
Products can slide in a carousel or sit in a grid, and you choose each layout separately for desktop and mobile. A View all products button under the products opens the full collection.
Click Featured collections in the left sidebar to see the section settings on the right-hand sidebar.
These options sit at the top of the panel and control where the header, tabs and arrows appear.
Center section header: Turn on to center the header and the tabs. When it is off, they are aligned to the left.
Tabs on right: Turn on to move the tabs to the right side of the header. Appears when Center section header is off and Navigation is set to Arrow and progress, or to Arrows and numbers with Navigation position set to Bottom.
Choose how many products to show and whether they slide or sit in a grid.
Maximum products to show: Set how many products each tab shows, from 2 to 25 (8 by default).
Number of columns on desktop: Set how many products fit in one row, from 2 to 5. On screens from 768px to 1149px wide, at most 3 columns are shown.
Carousel on desktop: Turn on to show the products in a slider on screens 768px wide and larger. Turn it off to show them in a grid.
Mousewheel control: Turn on to let customers move the slider with the mouse wheel or touchpad. Appears when Carousel on desktop is on.
Carousel on mobile: Turn on to show the products in a slider on screens narrower than 768px.
Mobile slide width: Set the width of each product on mobile, from 50% to 100%. Below 100%, customers can see part of the next product. Appears when Carousel on mobile is on.
Navigation: Choose the slider controls. Appears when Carousel on desktop or Carousel on mobile is on.
Default: Arrow buttons next to the tabs. On mobile, dots are shown instead.
Arrow and progress: Arrow buttons with a progress bar, placed under the products.
Arrows and numbers: Arrow buttons with the current position, such as 1 / 5.
Navigation position: Place the arrows and numbers at the Top, next to the tabs, or at the Bottom, under the products. Appears when Navigation is set to Arrows and numbers.
When both carousel options are off, the products are shown in a grid. The image below shows the grid on desktop.
Number of columns on mobile: Show 1 or 2 products per row on mobile. Appears when Carousel on mobile is off.
If a collection has no more products than the number of columns, its products are shown in a single row without arrows, even when the carousel is on.
Add a button under the products that opens the collection of the selected tab.
Show button view all: Turn on to show the button. It appears only when the collection has more products than Maximum products to show.
Button label: Enter the button text, such as View all products.
Style: Choose Solid, Outline or Link. In the example shown, Outline is selected.
Custom width: Turn on to set your own button width with Min width, from 50 to 400px.
The button opens the collection of the selected tab, or the Link you set in that tab's Collection block.
Choose how the product cards in this section look.
Style: Keep Default to use the product card style from the theme settings, or choose Normal, Minimal or Card for this section only. Any style other than Default shows these options:
Image ratio: Choose Adapt to image, Portrait or Square.
Title uppercase: Turn on to show product titles in capital letters.
Title font size: Choose Text Base, Text LG or Text 2XL.
Title font weight: Choose Normal or Semi bold.
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
Each Collection block adds one tab. To add another one, click Add block under Featured collections and choose Collection. The tabs appear when the section has two or more Collection blocks.
Collection: Select the collection whose products are shown in this tab.
Title: Enter the tab name. If you leave it empty, the tab shows the collection title and its number of products, such as Face (50).
Link: Paste a link or search for a page for the View all products button of this tab. If you leave it empty, the button opens the collection.
Each Collection block contains a Product card block. It has no settings of its own; change the card look in the Product card group of the section settings.
The Section header holds the text above the tabs, such as our editor choice and Trending now. 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 Heading block. Click it to edit the Text, choose a Preset for its size and an HTML tag (this affects SEO, so use a paragraph tag when unsure), and set its Width (Auto, or Custom with a Max width).