Image with text overlay

Showcase concise marketing messages.

What is the Image with text overlay section?

The Expression Image with text overlay section is a static image with text that can be useful in showcasing important and concise marketing messages. It can be used as a standalone section, or added to the top of different pages throughout the store to make more exciting pages. By using an image in conjunction with a combination of text and buttons, this section can create a real statement that will catch the eyes of potential customers. 

How to set up the Image with text overlay section

Steps

  1. Open the Theme Editor and add the Image with text overlay section to the page.
  2. In the main settings, there are two Image height settings available:

    Natural - The original image height will be maintained so the full image is shown.
    Fixed height - The slider can be used to select a specific px height for both desktop and mobile.

How to optimize the text overlay

When a Heading, a Subheading or some Text is added to this section, it will appear as a text overlay. The Expression theme includes settings to show this text overlay in several positions and styles. Use the settings to find the perfect solution for your store. 

Steps

  1. Open the Theme Editor and add the Image with text overlay section to the page.
  2. In the Overlay settings, there are three Overlay style options to choose from:
    Full image - The entire image will be displayed and the selected Overlay color will cover the entire image. The Overlay opacity setting can be used to adjust the strength of the color.
    Text box - A text box will show over the text content and buttons. To display the text box, choose an Overlay color and use the Overlay opacity slider to adjust its transparency accordingly.
    No Background - The whole image will be shown, the Overlay color and Overlay opacity will not show here.
  3. Also in the Overlay settings, a Text color can be selected. This will change the color of the Subheading, Heading and Text fields.
  4. To change the button colors, go to Theme settings > Buttons > Over image button text and Over image button background. Note that any changes made to these settings will apply throughout the store.
  5. There are nine different Text alignment options available to adjust the text position.

Tip

The setting Show text below image on mobile can be used if there is too much content to fit over the image on smaller screens. When this setting is selected, it will use the standard text, background and button colors set in Theme settings > Colors.

FAQs

Can I use this section with a sidebar?

Yes, if a sidebar is used then the section is reduced in width on larger screens. The sidebar is available on the homepage, blog page and blog post page.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us