Featured collage
The "Featured collage" section allows you to spotlight a chosen product by positioning it in a distinct area alongside the predefined collection.
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Featured collage
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.
Layout
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.
If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It 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.
Content
In the "Collection", choose any collection by pressing the "Select collection" button to display products in the section.
The position of the collection on the left or right can be changed in the "Collection position" picker. This option won't work on mobile and can be applied only for 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 the example of the settings that can be applied to the section in the following paragraph:
Button "View All"
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 "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 help page.
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.
Product card
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 here.
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 featured image, activate the option.
Check the following examples of how the section might be displayed on desktop and mobile:
Tip: This section can be enhanced with the "Product" block. Press the "Add block" button to connect it with the section.
Product
Note! The block will be placed over the product grid on mobile by default.
Connect a desired product with the section using the "Product" selector. If you need to create a new product, hit the "Create product" button to navigate to your Shopify admin -> Products.
Use the "Product image" picker to replace the default image with another one.
The "Image ratio" drop-down can be used to change the image size on mobile specifically. Choose the appropriate aspect ratio of the product image 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 here.
Show vendor
Display the product vendor above the product title by simply enabling the checkbox.
Show product rating
To display product reviews, activate the option. Ensure that the reviews app has been installed in your Shopify admin.
Here is how the block might be displayed in a store:
Last updated
