Appearance
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.
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:
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.
From the side menu, select Image with text overlay.
Select a setting described in the following table.
| Section setting name | Description |
|---|---|
| Image | Use the Image menu options to set up an image inside the section, for desktop displays.
1800 x 800 pixels in .jpg format. |
| Image - mobile | Use the Image - mobile menu options to set up an image inside the section, for mobile displays.
800 x 1200 pixels in .jpg format. |
| Height | Select 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 point | Select 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 > Heading | In the Heading box, enter text to display as a title inside the section. |
| Content > Text | In the Text box, enter (body) text to display inside the section. Format the text using the text editor pane. |
| Content > Content position | Select 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 desktop | Select 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 color | Select 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 > Link | In 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 > Text | In the Text box, enter text to display as a label for the section's button. |
| Call to action > Button style | Select the Button style dropdown to set the style for the section's button to Outline or Solid. |
| Theme settings | Select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Remove section | Select Remove section to delete the section from the current page template. |