Image gallery
Use the "Image gallery" section to display numerous banner blocks with the description.
Image gallery
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Heading
Use the "Heading" placeholder to add a section title. Start typing text in the field to view the additional settings:
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.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
The number of images per row can be set in the "Images in row" drop-down. Decide whether to display 2 or 4 items in each row.
Choose the appropriate image aspect ratio in the "Image ratio" drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", or "Circle". Check each image ratio here.
Use the "Column alignment" drop-down to decide whether to align the block title and description on the "Left" or "Center".
Enable swipe on mobile
Check the box to add scrollbars instead of displaying the list of images on mobile view.
Here you can apply color settings for the "Heading" and "Text" of the "Column" blocks.
In the following example, you can view how these settings might be displayed in the section:
Button/Second button
Use the settings described below to add or edit buttons that will be displayed in the section. The appearance of the buttons depends on the layout applied below. The button will be displayed underneath the heading and description if selecting the "In-grid heading" option. If using the "Heading on top" or "Heading top center", the buttons will be placed below all other content. For these options, the left or centered position of the button is determined by the position of the text content.
The example of the button when using the "In-grid heading" option can be viewed below:
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three available styles that can be applied in the section: "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, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
The layout settings change the look and feel of the section.
Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.
Use the "Mobile alignment" settings to change the alignment of the heading and description to "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 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 the example view of the section on a desktop and mobile:
Tip: This section includes the "Column" block that can be added more than once. Click the "Add Column" button to add more blocks than given.
Column
Add the block to configure each banner with the description individually.
To redirect visitors to the pre-selected page by pressing the image or block's heading, paste the external link to the field, or use the "Link" source selector to add an internal link.
Use the "Image" picker to attach an image from the Library to the block, or upload media from your device.
In the "Heading", you can paste the block title.
If you need to pair text with the image, paste descriptive details in the "Description" input field.
Here is how the block might be displayed in a store:
Last updated