Collage
Use the "Collage" section to display the mixed content: an image, products, and a video.
Tip: This section can be edited by blocks: "Image", "Collection products", and "Video".
Each block can be added individually and customized in different ways.
Heading
Use the "Heading" placeholder to add a section title.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Media
In the "Position", set whether to display the media large block on the left or right on the desktop. The desired "Left" or "Right" options can be selected in the picker.
Product cards
Note! The "Add to Cart" button ("Pre-order" button), "Quick View" button, and "Quantity selector" should be activated individually in the current section to display for product cards on the entire store.
In the "Buttons layout" drop-down, select the option that fits your store design:
"Use global settings". Apply the option if you want to use the settings configured in Theme settings -> Product cards.
"Icon with text". The "Add to Cart"/"Pre-order" and "Quick View" buttons appear as overlays on the product card after hovering over it, with "Quick View" positioned below "Add to Cart"/"Pre-order" by default. The option is designed to display text for an inactive button and an icon with text when hovering over the "Add to Cart"/"Pre-order" or "Quick View" buttons. On mobile devices, both buttons remain hidden.
"Icon only". This option displays only the icons for "Add to Cart"/"Pre-order" and "Quick View" when hovering over a product card positioned next to each other in a line. To reveal the selected button, the icon will be scaled on mouse hover. Both buttons are hidden on mobile.
"'Add to cart' below".
"Add to Cart"/"Pre-order" button: Use the option to move the button underneath the product card. This option displays text for an inactive button and shows an icon with text on hover in desktop mode. On mobile, an icon with text is displayed.
Using the "Add to Cart"/"Pre-order" button and quantity selector, the design and position of buttons in sections with collections are predefined and can not be changed in the Theme settings. The "Add to Cart" button is located below or next to the quantity selector, depending on the section or screen size.
"Quick View" button: On the desktop, the icon can be viewed by hovering over the product card. This button is not displayed on mobile devices.
Section layout
The layout settings change the look and feel of the section.
To change the position of the title, choose one of the "Heading on top" or "Heading top center" options in the "Layout" drop-down.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden when you select the "None" option.
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.
Here is how the section might be displayed when choosing each option:
Last updated