The Featured products section makes it possible for you to add a section with your featured products.
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 'Featured products', then click on 'Featured products'.
3) Done, your Featured products section is added.
General settings
The general settings contains the settings for the styling, layout and the products of the 'Featured products' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Products:
Select the products you want to show, in this example we've used the 'Home page' collection.
Products per row:
How many products do you want to show in the row? If you have more products in your list than shown in the row, it will automatically become a slider.
These settings control the background color showing underneath the section:
Background Color scheme:
Select the color scheme for the background.
Background color opacity:
Control the background opacity using the range slider.
Background position:
Control the background alignment left/right.
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 position:
Configure the position of the heading text. You can choose between left and center.
Heading:
Heading size:
Select the size of the heading from a range of small to extra large.
Enable custom styling:
You can enable this checkbox to overwrite the heading color scheme and font weight.
Content:
Share information and details about these products.
Button label:
This text will show on the button, for example: 'All products'
Button color scheme:
Select the color scheme for the buttons.
Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.
In mobile layout you have options to control the background that is showing under the section.
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.