Image

Add the block to place a custom image in the full height of the section.

Image

Tip: The "Image" settings described below can be used for the desktop and mobile.

In the "Main image" selector, press "Select image" to upload the necessary animation for both desktop and mobile. 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.

If you need to change the "Image overlay background", select the color from the color picker. By default, the color is set to transparent.

Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option here.

Adjust the transparency of an image gradient overlay using the "Image overlay opacity" scale from 0 to 100%.

You can read more about the described options on the following help page.

Heading

Use the "Heading" field to insert a title. The "Heading size" can be changed to display in "Large", "Medium", or "Small" sizes.

If you need to change a title color, use the "Heading 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 connect a page in the "Custom HTML". Or just connect a page with the block using the "Custom HTML" selector. Press "Select page" to choose the created page from the list or add a new one by pressing the button "Create page". 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.

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 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.

Activate the "Apply color on mobile" checkbox to set the same color for mobile.

Layout

The option "Desktop text position" helps to place texts in different positions: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option that best fits your needs in the drop-down.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the "Desktop text alignment" drop-down.

In the "Text box desktop background", you can set the color from the color picker. By default, the color is set to transparent.

Use the "Text box desktop opacity" scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.

The "Text box desktop width" scale allows setting the text width from 30% to 100%.

You can read more about the described options on the following help page.

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%.

Animation

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. You can activate the opacity over the image by choosing "Add overlay opacity" and selecting a color for the "Image overlay background" or "Image overlay gradient" (read the details above). To use this option, make sure that the "Image overlay opacity" is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active "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

*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.

Here is an example of how the block might be displayed in the section: