Media
Add the "Media" section to showcase video/image content with the description.
Media
Press the "Select image" button in the "Image or cover image" source selector to upload the necessary image for both desktop and mobile. The image can be used as a banner or a cover image for a video. The recommended image ratio is two-to-one (width-to-height respectively). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
The following section provides two methods of displaying a video on a page. Select the one that fits you well:
Shopify-hosted video
Using this option, the Shopify-hosted video will appear within the section. The video can be added by simply pressing the "Select video" button in the "Video" source selector. You can either upload the video to your Store library or utilize one that has already been stored in your Shopify admin -> Content -> Files.
Or embed video from URL
This approach lets you add a YouTube or Vimeo video. The video can be placed by simply pasting a link into the "URL" field.
In the "Video alt text", paste the descriptive text for the screen readers. More details can be read in the initial documentation.
Use the "Autoplay" function to initiate the video display automatically upon a visitor landing on a page without pressing the play button.
Activate the "Loop" option to play your video repeatedly and continuously.
To display the video's Parental Controls, tick the "Controls" option.
Note! Ensure the image link field is empty in order to use the video controls. Otherwise, the visitors will be redirected to another page when pressing the video player controls.
Text
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Note! The position of the heading and description can be changed by choosing another option in the "Layout" sub-section.
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 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 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 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.
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 be displayed 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.
Use the "Height" options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:
"Adapt to image". Displays an image/video in its original aspect ratio.
"Proportion in %". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%.
"Proportion in %" indicators:
*100% = Square image
*Less than 100% = Landscape
*More than 100% = Portrait
*For an ideal video aspect ratio (16:9), set the proportion to 56%.
Animations
Desktop hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image desktop hover animation" drop-down. Read the details on the following help page.
The options "Zoom in" and "Zoom out" place the zooming effect to enlarge or decrease an image on the mouse hover. The "None" option deactivates the animation.
You can read more about the described options on the following help page.
Image parallax
*This option overrides the hover animation settings.
*The Static option is not supported on iOS mobile devices and may cause slowdowns on content-heavy pages due to browser limitations.
Note! The parallax settings need to be rechecked with the altitude settings described above. By changing the block height from auto-adapt to a preset % value, the strength of the parallax effect will adjust accordingly. The parallax effect may be minimal or barely noticeable if the image height is too large.
Activate one of the options from the drop-down list to add an effect that moves images within the container as you scroll up or down a page. The available options are: "Move up", "Move up with delay", "Move down", "Move down delay", and "Static". To disable the parallax effect, choose the "Disable" option.
In the following example, you can view how the section might be displayed 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
The "Icon SVG" field is designed to link SVG icons that come with the theme or your custom SVG icons:
To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons here.
Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following help page for step-by-step instructions on the required modifications.
Leave the field blank to hide an icon.
In the "Icon image", select an image previously added to the Image Library.
The "Text" input field allows adding any informative text like address, telephone number, hours of operation, etc.
Here is how the block might be displayed in a store:
Last updated
