Adding an Overlay text column section in the Hero theme

With the Overlay text column section, you can add color overlay filters that add a color tint to your text displayed to improve the readability of your content. It can display pictures while highlighting text content. Colors and opacity are fully adjustable with the color palettes in this section.

This section is useful when:

  • You want to display images and text content at the same time to improve customers' reading experience when browsing your store pages.
  • You want to add more color contrast to intrigue customers.

In this guide, we will demonstrate how to create an Overlay text column section in the Hero theme.

Creating an Overlay text column section

1. From your Shoplazza Admin > Online Store > Themes, click Customize next to the Hero theme.

2. Click Add section to see more available sections for this theme.

3. Under Theme sections, select the Overlay text columns section for customization.

4. Click and drag the sections using the drag and drop icon to reposition them as needed.

Setting up the Overlay text column section


In the added Overlay text column section, edit the title for this section.

Section padding

1. The padding editor is used to generate extra space around the section you create. Activate the "linkage icon" and type a value (measured in pixels) in any of the 4 columns to add buffers around the section or you may manually adjust each input by disabling the "linkage icon" in the centered area.

2. The screenshot below is an example use of 100px spacing on each side.

3. Here, you can select to preview the page on desktop or mobile ends.

Editing the image sections

1. Refer back to the main editing page to manage each block separately.

2. In each block, you are given more options to edit the image content.

3. Use the Image Width drop down menu to resize your images.

Color overlay

Enable this feature to turn on color overlay to enhance readability of your text content.

Headings and text

The Heading section and Text section is where you can re-edit your writing content.


1. Here, you are also given options to set up optional buttons to redirect customers to other pages of your store.

2. Customize the overlaying color in the color palatte.

3. Here, you have more options to customize the color of your text and buttons.

Having an Overlay text column section is a great way to reduce visual stress through color shading. An effective Overlay text column section also makes your text more readable.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.

Live chat