Content, Text on image

Use this block to display the image with the text and button overlay in the section.

Tip: To add a block, the "Featured promotions" section is required. Press "Add block" and choose the one in Theme Blocks. The following block can be added numerous times.

Drag and drop the block to the desired placement in a 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

Image

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

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 title's font size can be changed to "Large", "Medium", or "Small" in the "Size" drop-down.

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

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.

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

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.

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