Image with text
This guide describes setting up the Image with text section. Use the section to display an image and text, side-by-side, on a store page.
The following image shows a store's homepage with an image with text section. On the left side of the image, the section's menu includes the following settings.
- To position the image and text on the homepage, the dropdown option Image position on desktop is set to Left (with the text displayed on the right).
- The Image size on desktop dropdown is set to Two thirds, so that the width of the text area is one third.
- To configure the View lookbook button, the Call to action > Link selector is set to open the Spring collection page.
For general guidance with modifying sections, refer to Sections overview.
Set up a image with text section
To set up a image with text section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a image with text section. For example, select the Home page template.
The image with text section can be added into any page, except Checkout and Giftcard pages. To add a image with text section into the current page, select Add section > Image with text. Refer to Shopify help: Add a section.
From the side menu, select Image with text.
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.|
|Image position on desktop||Select the dropdown Image position on desktop to set a position for the image inside the 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 section. The options are One third, One half and Two thirds, and apply to desktop displays.|
|Heading||In the Heading box, enter text to display as a title inside the section.|
|Text||In the Text box, enter (body) text to display inside the section. Format the text using the text editor pane.|
|Text alignment||Select the Text alignment dropdown to align the text inside the section to the Left, Center, or Right.|
|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. The button is displayed inside the section's text area. 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. The button is displayed inside the section's text area.|
|Call to action > Button style||Select the Button style dropdown to set the style for the section's button to Outline or Solid. The button is displayed inside the section's text area.|
|Color > Color scheme||Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary or Tertiary. Refer to Colors.|
|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.|