The Featured collection displays products from a selected collection on a page.
Section Settings
Click the Featured collection section to customize its general settings.
Headings
Add an optional Heading and Subheading with the provided fields.
Colors
Choose an optional Section heading color, Section subheading color, and Section background color.
Section spacing
Use the Desktop section spacing and Mobile section spacing sliders to adjust the padding for desktop and mobile devices.
Select collection
Assign the Collection to display in this section by clicking Select collection.
Select a Layout
There are two options for the section's layout: Slideshow and Grid. Select one of these options using the Layout dropdown.
Slideshow Layout
The Slideshow option is the original display for the section, combining four products with a Call-to-action block.
Grid Layout
The Grid option is a more-recent layout option, displaying the section's products in rows of five. Additional rows (up to five total rows) are stacked below.
Include a title card for the grid layout
Include a Title card for your section's Grid layout by selecting (+) Add title card. Just like the CTA for the Slideshow layout, this connects customers with the collection page to continue browsing.
Set the Position using the labeled dropdown. Add a Preheading and Heading to add messaging.
Adjust the colors for Text and Overlay, then control the level of Overlay opacity using the slider.
Customize the call to action
The Call to action (CTA) is the "View all" tile that falls at the end of the collection row.
To change the text color, simply click the swatch next to Text color.
Customize the Call-to-action Link
The Call-to-action portion of this section is found at the end of the product row. To use color settings separate from the Colors settings, click the color picker beside Text color.
To include a custom image in place of the solid background color, click Select Image. Images used here should be 500 x 750px.
Customize Section Background
Connect an image to use as a Background image for the section by clicking Select Image.
Focal point
Adjust how the image fits into the section container by selecting an option from the Position dropdown.
The options are:
- Top left
- Top center
- Top right
- Center left
- Center middle
- Center right
- Bottom left
- Bottom center
- Bottom right
Overlay
Add a Background overlay for the section to increase the contrast between the background image and the section's content. Select Gradient or Solid from the Overlay style dropdown, then select an Overlay color.
Overlay opacity
Use the Overlay opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting to 0%.