Image

This block allows you to place a banner itself in the section or supplement it with text, and call-to-action buttons overlay the image.

Tip: To add a block, the "Collage" section is required. Press "Add block" and choose the one in Theme Blocks. The following block can be added only once.

Drag and drop the block to the desired placement in the section.

Block link

Once an image is selected, it can be linked to pages/ collections/ products, etc. Choose the destination in the "Link" source selector.

Media

Press "Select" to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).

Media overlay

Note! The "Image" settings described below will only apply to the desktop mode.

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" placeholder to insert a title.

The font size of the title can be changed to "Large", "Medium", or "Small" in the "Heading size" drop-down.

If you need to change a title color, use the "Heading" 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.

Turn on the "Apply color on mobile" option to use the same color on mobile. This option will be shown after selecting a color in the color picker above.

Content box

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.

In the following example, you can view how the described settings might display in a banner with the next layout parameters:

Use the "Height" options to adapt a media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:

• "Adapt to media". Displays an image 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

* For an ideal video aspect ratio (16:9), set the proportion to 56%.

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

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" (read the details above). 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.

Here is how the block might be displayed in the section: