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.

An Image with text section on an example store 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:

  1. 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.

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

    A image with text 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.
  • 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.
Image position on desktopSelect 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 desktopSelect 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.
HeadingIn the Heading box, enter text to display as a title inside the section.
TextIn the Text box, enter (body) text to display inside the section. Format the text using the text editor pane.
Text alignmentSelect the Text alignment dropdown to align the text inside the section to the Left, Center, or Right.
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. 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 > TextIn 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 styleSelect 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 schemeUse the Color scheme dropdown to set the section's color scheme to Primary, Secondary or Tertiary. Refer to Colors.
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.