Hero Image With Text

About Hero Image with Text SectionClick to copy 2222

The hero image with text section can be the first thing that visitors see when they land on your online store. It is a large, high-quality image that is paired with text to introduce your brand, products, or services. The hero image is important because it can make a big impression on visitors and influence whether or not they stay on your site and explore further.

Hero Image With Text

Access Hero Image with Text SectionClick to copy 2222

From any page, please click on ‘Add Section’ on the left side bar, then choose ‘Hero Image with Text’.

Hero Image With Text

Hero Image with Text ConfigurationClick to copy 2222

GeneralClick to copy 2222

Firstly, you can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.

Hero Image With Text

LayoutClick to copy 2222

There are 2 option for Content alignment of this section here: Left and Center:

Hero Image With Text

You can also enable ‘Remove padding top’ and ‘Remove padding bottom’ to delete the spacing at the top and bottom between the section and the elements inside it.

Hero Image With Text

TextClick to copy 2222

To add content in the Section Subheading, Heading and Description, click on the text box and insert the content. If you want to remove these contents, just delete the text in the text box.

Hero Image With Text

ImageClick to copy 2222

You can click on the ‘Select image’ button to upload the image to the section.

Hero Image With Text

After that, you can change the image ratio from these option: Square, Portrait (2:3), Landscape (3:2) and Adapt to image:

Hero Image With Text

ButtonsClick to copy 2222

To add button text and button link, click on the placeholder and insert the content. If you want to remove the button, you just need to leave the button text blank.

Hero Image With Text

Prominent badgeClick to copy 2222

The Prominent Badge of this section has the same setting with the Icon With Text section.

Highlighted collectionsClick to copy 2222

This list display a list of collections next to the menu for improved catalog navigation, you can enable or disable these collections by selecting the checkbox.

Hero Image With Text

Next, you can add content for the heading on the content tab. If you want to remove the content, you just need to leave it blank.

Hero Image With Text

Click on the ‘Select Collections’ button to choose which sections to display on this list. The maximum number of collections is 50. On desktop, it will automatically display as a slideshow if there are more than 6 collections.

Hero Image With Text

After that, you can add text for the button here, this button will be direct to the collection list page.

Hero Image With Text

The last option: you can enable to Show navigation on mobile here:

Hero Image With Text

Navigate this category

Previous