Image
Add the block to place a custom image in the full height of the section.
Block link
Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the "Link" source selector.
Media
Tip: The "Image" settings described below can be applied to both desktop and mobile.
In the "Image" selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).
Media overlay
Turn on the "Enable" option to display the related settings.
Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.
In the "Type" picker, select one of the options: "Background" or "Gradient".
By selecting the "Background" option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Heading
Use the "Heading" field to insert a title.
The "Size" can be changed to display in "Large", "Medium", or "Small" sizes.
If you need to change a title color, use the "Color" picker. The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option.
Text
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading.
Additionally, you can insert a text paragraph in the "Description" placeholder and select a page in the "Custom HTML". Alternatively, connect only a page with the block using the "Custom HTML" selector. Press the "Select" button to choose the created page from the list or add a new one by pressing the "Create page" button. If you press the "Create page" button, you will be redirected to your Shopify admin -> Online Store -> Pages. Read details on how to create pages in the following article.
If you need to change the description color, use the "Text" picker.
The same color as for the desktop can be applied to the mobile view by enabling the "Apply color on mobile" option. This option will be shown after selecting a color in the color picker.
Button/Second button
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.
Activate the "Apply color on mobile" option to set the same color for mobile.
Content box
Tip: Use the options in the "Mobile settings" subsection to modify the section layout on mobile. Read details here.
The "Position" option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs.
If you need to align the text for the desktop to "Left", "Center", or "Right", select one of the options in the "Alignment" picker.
The "Width" scale enables you to adjust the width of the text box, allowing you to change the parameters from 30% to 100%.
Activate the "Enable background" option to view additional background settings.
Use the "Opacity" scale to adjust the text box background transparency from 0% to 100%, where 0% represents an invisible background and 100% represents an opaque background.
In the "Background", specify the color from the color picker. By default, the color is set to transparent.
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 in its original aspect ratio.
"Proportion of height". Select the option to adjust a media height as a percentage using the corresponding scale. The parameters can be changed from 10% to 210%.
*The "Proportion of height" option is applied to mobile by default. To modify the height specifically for mobile, activate the "Mobile settings" in the subsection below.
"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.
Mobile settings
The settings described below can be applied to mobile mode regardless of the desktop settings by activating the "Enable" option.
Image
Here you can select an image for mobile individually. Otherwise, the same image as for the desktop will be shown on mobile view. Press on "Select" to upload the one you need. The recommended image ratio is two-to-one (width-to-height).
Check the "Show media overlay" option to display the color overlay of the image. This option works with the configured settings of the image overlay in the block. Find more details here.
The "Height" of an image can be changed by operating one of the options. The corresponding settings will be shown after selecting the relevant option:
"Same as on desktop". Select the option to apply the same settings as on the desktop set in the main section.
"Adapt to image". Displays the image in its original aspect ratio.
"Fixed in px". This option sets the image size in pixels by establishing the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
"Proportion of height". Select the option to adjust the image height as a percentage using the corresponding 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.
The "Text position" can be placed "Below the image" or "Over the image". Display text over the image in the "Top", "Middle", or "Bottom". Select the desired option in the drop-down list.
The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.
If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Text alignment" drop-down. To clarify the use of parameters, check the following help page.
Animation
Desktop hover animation
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. You can activate opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Background" or "Gradient" in the "Media overlay" block. To use this option, ensure that the "Opacity" is set to transparent. The overlay opacity and zooming effect on an image can be achieved by selecting the "Zoom in, add overlay opacity" or "Zoom out, add overlay opacity". 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.
Here is an example of how the media block:
Last updated