Featured collage
The "Featured collage" section allows you to spotlight a chosen product by positioning it in a distinct area alongside the predefined collection.
Last updated
The "Featured collage" section allows you to spotlight a chosen product by positioning it in a distinct area alongside the predefined collection.
Last updated
Tip: This section can be enhanced with the "" and "" blocks. Press the "Add block" button to connect it with the section.
*Only one additional block can be displayed in this section. To add a new block, first remove the default block by clicking the trash icon next to its name.
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Use the "Heading" placeholder to add a section title. It will be placed on the top of the section.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading.
The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.
In the "Collection", choose any collection by pressing the "Select" button to display products in the section.
The collection's position can be set to the left or right in the "Collection position" picker. This option won't work on mobile and can be applied only to the desktop.
The number of products per row can be set in the "Products in row". Choose if to display 2, 3, 4, 5, or 6 items in each row.
By adjusting the "Image or product column width" slider from 25 to 75, you can determine the width of the product grid relative to the featured product. Settings the point to 25 on the slider results in a wider display of the collection compared to the product. As the input number changes, the width of the featured image increases accordingly.
Here is an example of the settings that can be applied to the section in the following paragraph:
The layout settings change the look and feel of the section.
Choose one of the options "Heading on top" or "Heading top center" in the "Layout" picker.
Use the "Mobile align" settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the collection contains more products than is displayed in the column.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.
Show second image on hover
Use the option to display a second product image when hovering over the product card.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Show variants
To showcase the available product variants for the product cards and a featured image, activate the option.
Check the following examples of how the section might be displayed on desktop and mobile:
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following .
Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio you can check .
