Appearance
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.
Note
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. |