Image with text overlay

Showcase concise marketing messages

What is the image with text overlay section?

The Image with text overlay section is a static image that can be useful to showcase important and concise marketing messages. By using an image in conjunction with a combination of text, buttons and product label links, this section can create a real statement that will catch the eyes of potential customers. 

Iconic-sneaker-image-with-text.png

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. Select Image, add an Image link and choose the Image height method.
    Natural - the original image height will be maintained so the full image is shown.
    Fixed height - When the height is fixed then the image will be cropped on some screen sizes. A slider can be used to select a specific px height on desktop and mobile. Use image focal points to ensure the important parts of the image are still shown. 
  3. In the Overlay settings, manage the overlay colors, alignment and positioning. The text overlay can be partially opaque on larger screens so the image underneath shows through. This is managed using the Background opacity slider. 
  4. In the Overlay settings, choose Show overlay below image on mobile to allow more of the image to be seen on smaller screens. The text overlay box will then appear under the image with a slight overlap. This setting is recommended when product label links are used. 
  5. In the Overlay - heading settings add a Heading and choose whether to add a Stencil or Highlight any of the words.
  6. Add buttons and set the Button style.
  7. Configure up to two Product labels links. These are mini labels that link to products. They can be positioned over the image. Refer to our product label links article for more information.

Tip

The setting Show overlay below image on mobile can be used if there is too much content to fit over the image on smaller screens. We recommend selecting this option if product label links are used.

How to style the overlay heading text

The Boost theme includes additional settings to style the overlay heading and make it more playful and engaging. Use a moving highlight or stencil some text to draw attention to key words and phrases.

Image-with-text-overlay-flourish2.png

Steps

    1. In the main Image banner settings, navigate to the Overlay - heading setting.
    2. Enter the Heading text and Heading width.
    3. Create interest by choosing a Word style for all or some of the words used in the Heading. Enter the Words to style taking care to match the case. The word style Stencil will create an outline effect.
      Difference.png
      When animations are enabled the Highlight word style will show a colored background. Control the Highlight vertical position to account for different font heights. Flourish-highlight.gif
    4. Set the Word color which is used for both the Stencil and Highlight and Highlight color for the highlight background.

 Tip

Additional typography settings to control Line height and Letter spacing across the store can be found in the Typography area of the Theme Settings tab.

How to use the product label links

In the Boost theme, product label links can be added on top of images to connect your customers straight to the products shown. Product labels can be added to the slideshow, image with text overlay, split image and background video sections. A useful way to link to products directly from your lifestyle images. Refer to our Product label links article to find out more. 

Sign up for Shopify today for $1

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