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.
Image
Main image
Press "Select" to upload the necessary image 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.
Note! The "Image" settings described below will only apply to the desktop mode.
If you need to change the "Image overlay background", select the color from the color picker. By default, the color is set to transparent. The option works with the enabled "Add overlay opacity", "Zoom in, add overlay opacity", or "Zoom out, add overlay opacity" in the "Animation" subsection.
Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option here.
Adjust the transparency of an image overlay using the "Image overlay opacity" scale from 0 to 100%.
Heading
Use the "Heading" placeholder to insert a title. The title's font size 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 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
Here you can insert a text paragraph in the "Description" placeholder and connect a page in the "Custom HTML". 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 a paragraph 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.
Layout
The option "Desktop text position" helps to place texts in different areas of the banner: "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.
Mobile settings
The settings described below can be applied for mobile mode regardless of the desktop settings by activating the "Enable mobile settings" option.
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 image" to upload the one you need. The recommended image ratio is two-to-one (width-to-height respectively).
Check the "Show image 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 on mobile can be changed by operating one of the options:
"Same as on desktop". Using the provided option, apply the same image height settings for mobile as for the desktop.
"Adapt to image". Displays the image in its original aspect ratio.
"Proportion in %". Select the option to adjust the image 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%.
"Fixed in px". This option helps to change image size in pixels by setting the parameters on the "Fixed height" scale. The height can be adjusted between 100 and 700 pixels.
The text position can be adjusted using the options in the "Text position" drop-down: "Below image", "Over the image, top", "Over the image, middle", and "Over the image, bottom".
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:
Last updated
