Skip to content

Image with text overlay overlay

This guide describes setting up the Image with text overlay section. Use the section to display an image, overlaid with text, on a store page.

In following image, an image with text overlay section is displayed on a store's homepage. On the left side of the image, the section's menu includes the following settings.

  • To crop the image inside the section, the Height dropdown option is to Full screen.
  • The Content position dropdown is set to Top center, so that the text is displayed at the top of the image.
  • To configure the Shop the Dune series button, the Call to action > Link selector is set to open the Dune (book) collection page.

An Image with text overlay section on an example store page.

For general guidance with modifying sections, refer to Sections overview.

Set up a image with text overlay section

To set up a image with text overlay section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a image with text overlay section. For example, select the Home page template.

    Note

    The image with text overlay section can be added into any page, except Checkout and Giftcard pages. To add a image with text overlay section into the current page, select Add section > Image with text overlay. Refer to Shopify help: Add a section.

  2. From the side menu, select Image with text overlay.

    A image with text overlay section selected in Theme editor.

  3. Select a setting described in the following table.

Section setting nameDescription
ImageUse the Image menu options to set up an image inside the section, for desktop displays.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
On desktop displays, large images are cropped. The recommended image dimensions are 1800 x 800 pixels in .jpg format.
Image - mobileUse the Image - mobile menu options to set up an image inside the section, for mobile displays.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
The recommended image dimensions are 800 x 1200 pixels in .jpg format.
HeightSelect the Height dropdown to set the height of the image inside the section. The options are Natural and Full screen. If height is set to natural, the image is displayed without cropping. If height is set to full screen, a large image is cropped.
Image focal pointSelect the Image focal point dropdown to display a specific area of the image, inside the section. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right. This setting only applies when the image is cropped.
Content > HeadingIn the Heading box, enter text to display as a title inside the section.
Content > TextIn the Text box, enter (body) text to display inside the section. Format the text using the text editor pane.
Content > Content positionSelect the Content position dropdown to align text inside the section. The dropdown options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Content > Content width on desktopSelect the dropdown Content width on desktop to set a width for the text area inside the section. The options are One third, One half, Two thirds, and Full width.
Content > Text colorSelect the Text color dropdown to set a color for the text inside the section. The options are: Primary, Secondary, Tertiary, Black, and White. Refer to Colors.
Call to action > LinkIn the Link box, enter a URL for the section's button to use or select a store page to link to. To remove a link, select the X icon inside the text box.
Call to action > TextIn the Text box, enter text to display as a label for the section's button.
Call to action > Button styleSelect the Button style dropdown to set the style for the section's button to Outline or Solid.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Remove sectionSelect Remove section to delete the section from the current page template.