Media
Add the "Media" section to showcase video/image content with the description.
Media
Tip: To hide the title, description, or button, leave the corresponding fields blank.
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 "Heading font size" drop-down.
If you need to set up the color of the section title, use the "Heading color" picker. You can paste the hex code to the corresponding 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 lines to the section.
The position of the heading and description can be changed by choosing another option in the "Layout" sub-section.
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.
Button/Second button
Use the settings described below to add or edit buttons that will be displayed under the descriptive text of the section:
Change the button text in the "Button" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Button link". Use the link from the resource 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 six styles that can work out in your store: "Primary", "Secondary", "Third", "Fourth", "Fifth" or "Link style". Each button style can be viewed on the following help page.
Use the "Button color" picker to change the button background color for the "Primary", "Third" and "Fifth" styles. For styles "Secondary" and "Fourth" 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.
Layout
The layout settings change the look and feel of the section.
Choose one of the options "Horizontal", "Reverse horizontal", "Vertical, heading-on-top", "Vertical in-grid heading", or "Vertical, heading top center" in the "Layout" drop-down.
In the following examples, you can view how the layouts might display in a section:
You can see more examples of the layout settings here.
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
The cover image is required if you use the video content. To choose the image, press the "Select image" button in the "Image or cover image".
The video can be placed by simply pasting the URL into the field. Use YouTube or Vimeo to display the content.
In the "Video alt text", paste the descriptive text for the screen readers.
The "Height" setting allows you to decide if to use the default image size by choosing the "Adapt to image" option. Or select the option "Fixed aspect ratio" to change the image size using the "Fixed aspect ratio" scale. The parameters vary from 50% to 150%, where 50% is a square image, 100% - is a landscape, and 150% is a portrait.
In the following example, you can view how the section might display on desktop and mobile:
Tip: Use the "List item" block to edit the section with the text content. You can add several blocks by pressing the "Add List item" button if you need to display a few text lines that will be placed in a column.
List item
If you need to use the SVG icon, paste the icon name to the corresponding field. The list of icons you can view here.
In the "Icon image", select an image previously added to the Image Library.
The "Text" input field allows adding the informative text.
Here is how the block might display in a store:
Last updated