Media
Add the "Media" section to showcase video/image content with the description.
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Media
Heading
Note! The position of the heading and description can be changed by choosing an option in the "Content" sub-section.
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.
Section link
Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Media
In the "Type" drop-down, determine the media format. It can be changed to "Image", "Video", or "YouTube or Vimeo URL". Additional settings related to each option will be displayed after an option is selected.
"Image". Choose the option and link an image by pressing the "Select" button to display a simple image banner. 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).
The following section provides two methods of displaying a video on a page. Select the one that fits you well:
"Video". Embed a video file apploaded to your Shopify admin -> Content -> Files by selecting the option and pressing the "Select" button in the "Video" source selector.
"YouTube or Vimeo URL". Select the option to display a video from a URL. The video can be placed by simply pasting a link into the "Video URL" field.
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 of height". 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 of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
* For an ideal video aspect ratio (16:9), set the proportion to 56%.
View the example of the Video settings below:
Video settings
Note! The "Cover image" and "Alt text" settings will be displayed after selecting the "YouTube or Vimeo URL" video type.
Press the "Select" button in the "Cover image" source selector to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
In the "Alt text", paste the descriptive text for screen readers. Read more details in the initial documentation.
Use the "Autoplay" function to start a 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 to use the video controls. Otherwise, visitors will be redirected to another page when pressing the video player controls.
Content
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.
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 block includes three available styles that can be applied: "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.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use 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.
Animations
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 "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. The option "None" deactivates the animation.
You can read more about the described options on the following help page.
Image parallax
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.
Colors
Colorize the SVG icons configured in the "List item" block using the "Icons" picker.
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 you to add any informative text, such as address, phone number, hours of operation, etc.
Here is how the block might be displayed in a store:
Last updated