Image with text
You can add a section that contains an image and a text block with an optional button to link customers to a new page. Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
⬇️ On this page:
Add and edit image with text section
Steps:
- In your Shopify admin dashboard, go to Online Store > Themes.
- Choose the theme you want to edit and click on the Customize button.
- Click on the arrow down next to Home page↓and select a template you want your Image with text section to add to.
- Click on + Add section which can be found in your left sidebar or directly in the live editor.
- Click and hold the drag-and-drop handles
⋮⋮
to re-order your sections. - Scroll down, or search for Image with text, then click on Image with text.
- (Optional) Now, when you have added a section, you can select your Background image for the whole section. Click Select image or Explore free images if you want to choose an image from Shopify's library. You can always click Change > Remove image to go back to the version without a background image.
- (Optional) Check the Full width field to make the section take up the full screen width.
- (Optional) You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
- Read more about Custom CSS ↗.
Congrats! 👏 You just added your Image with text section. Later in this article, we will illustrate how to add and edit content blocks.
Shopify's resources:
Manage content sections (image, image banner)
Once you have added the section, you can now configure the blocks within your section. An image with text section has two blocks included by default: image and image banner. TTo add and edit the blocks, follow these simple steps:
Steps
- In your Shopify admin dashboard, go to Online Store > Themes.
- Choose the theme you want to edit and click on the Customize button.
- Find the Image with text section you added following the steps above. Click + Add block underneath and choose one of the options. Our theme has a few blocks you can display: image and image banner. Once you add a desired block, click on it to see additional block customization options.
- (Optional) Click and hold the drag-and-drop handles
⋮⋮
to re-order your blocks. - For the Image block:
- Click Select image or Explore free images if you want to choose an image from Shopify's library.
- Change the image height by choosing one of the options (small, medium, large, or original) under Desktop Image Height.
- Use the toggle to select the desired percentage or insert the specific number in the Image Width section.
- Image focal point gives you the ability to specify which part of the image will be displayed first depending on the screen size (top, middle, or bottom).
- (Optional) You have the opportunity to display a secondary image. Under Secondary Image, click Select Image or Explore Free Images if you want to choose an image from Shopify's library.
- For the Image banner block,
- Type your Subheading and Heading, and select the size for both. Leave blank if you don't want to display any of these.
- Under Text section, type your Description.
- Insert the copy for your button in the Button label. Insert the URL in the Button link field or select one of the options. Choose a Button style.
- Select your Color scheme (it controls the background color of your section, the text color, etc.). Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one ↗ in Theme settings.
- Select the desired option for the Text alignment (left, center, or right).