Content, Text below the image
To display a banner with the text below the image, use this block.
Last updated
To display a banner with the text below the image, use this block.
Last updated
Tip: To add a block, the "" 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.
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 "" subsection.
Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option .
Adjust the transparency of an image overlay using the "Image overlay opacity" scale from 0 to 100%.
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.
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 button "Create page", you will be redirected to your Shopify admin -> Online Store -> Pages. Read details on how to create pages in the following .
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.
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 "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.
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 following example, you can view how the block might be displayed in the section:
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 .
