Appearance
Image with text
This guide describes setting your store's Image with text section to display an image and text, side-by-side, on a store page.
In the following video, a store's homepage contains an image with text section. The option is enabled to resize the image to match the size of the text.
For general guidance with modifying sections, refer to Sections overview.
Set up an image with text section
To set up an image with text section on a store page:
Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the image with text section. For example, select the Home page template.
Note
The image with text section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.
Select Add section > Image with text.
From the side menu, select image with text.
Select a setting described in the following table.
| Section setting name | Description |
|---|---|
| Image > Select image | Use the Select image menu options to set up an image in the image with text section.
|
| Image position on desktop | Select the dropdown Image position on desktop to set a position for the image inside the image with text section. The options are Right or Left, and apply to desktop displays. |
| Image size on desktop | Select the dropdown Image size on desktop to set a size for the image inside the image with text section. The options are One third, One half and Two thirds, and apply to desktop displays. |
| Indent image | Select the Indent image checkbox to add/ remove a border around the image inside the image with text section. |
| Fit image to text | Select the checkbox Fit image to text to turn on/ off resizing the image to match the size of the text inside the image with text section. This setting crops the image on desktop displays. |
| Background color | Select the Background color dropdown to set a background color for the image inside the image with text section. The options are Primary background, Secondary background and Tertiary background. |
| Content > Heading | Use the Heading box to enter text to display as a title inside the tile containing text, within the image with text section. |
| Content > Text | Use the Text box to enter text to display inside the tile containing text, within the image with text section. Format the text using the text editor pane. |
| Text size | Select the Text size dropdown to set a size for text inside the image with text section. The dropdown options are: S = small, M = medium, L = large, XL = extra large, 2XL = 2 x extra large, 2XL/ desktop 3XL = 2 x extra large on small displays and 3 x extra large on desktop displays, 2XL/ desktop 4XL, and 2XL/ desktop 5XL. |
| Font | Select the dropdown Font to use the same font as Heading or Body text, for text inside the image with text section. |
| Text alignment | Select the Text alignment dropdown to align text inside the image with text section to the Left, Center or Right. |
| Text position | Select the Text position dropdown to position the text inside the image with text section to the Top, Middle or Bottom. |
| Color scheme | Use the Color scheme dropdown to set the color scheme for the image with text section to Primary, Secondary or Tertiary. Refer to Customize color schemes. |
| Call to action > Link | Use the Link text box to enter a URL or select a store page to link to. The link is displayed inside the tile that contains text, within the image with text section. To remove a link, select the X icon inside the Link text box. |
| Call to action > Text | Use the Text box to provide a label for the link in the image with text section. |
| Call to action > Style | Select the Style dropdown to style the link as a Link (Text) or Button in the image with text section. |
| Theme settings | Select Theme Settings to access additional settings for the image with text section. Refer to Section theme settings menu. |
| Remove section | Select Remove section to remove the image with text section from the current page template. |