Image with text

Theme section

Theme retirement | Context is no longer available on the Shopify theme store. Theme support and updates for current users will end after May 18, 2024. Learn more here.

The Image with text section combines a feature image with a marketing call to action block. With a flexible layout and optional button, it's a great way to introduce a product collection or something new and exciting.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields.d

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Button, then click the new button block.

  2. Select or paste a URL for the Link.

  3. Change the Link text to display on the button.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. Click Save.

Add feature image

Upload a feature image to display on the left or right of the marketing text block. You can adjust the width and shape of your image.

STEPS

In your theme editor (Customize):

  1. Click the Image with text section to open the settings.

  2. Click Select image to upload and select an image file.

    There are no required images dimensions. We simply recommend uploaded images have a minimum width of 2050px for optimal quality across all devices.

  3. Select the Image position to display the image on the Left or Right side of the section.

    The text content will display on the opposite side of the image.

  4. Choose to set the Image width to either 1/2 or 2/3 the width of the section.

  5. To change the shape of your original image, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of each image.

  6. Select the Image focal point to choose which section of the image to keep centered within the slide.

    This setting ensures the key part of your image appears when cropping occurs.

  7. Click Save.

Add section headings

This section has blocks for three text headings. You can customize the alignment, color, and overall look of your text.

STEPS

In your theme editor (Customize):

  1. Click on the Text blocks to change the Heading and Subheading.

  2. (Optional.) Open the section settings to adjust the Text max width of your headings using the slider.

    Experiment with this setting to find a clean visual shape for your text.

  3. To change the Text position, click on the Image with text section and change it to the Top, Center, or Bottom of the image.

  4. Click Save.

Add call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

STEPS

In your theme editor (Customize):

  1. Click (+) Add block and select Button.

  2. Click the new Button block to open the settings.

  3. Select or paste a URL for the Link.

  4. Change the Link text to display on the button.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  5. Select the Link style to either show a Button or Link with arrow.

  6. Click Save.

Settings reference

Click the Image with text section to find the following settings.


Related links Full width image Slideshow Mosaic grid (2 columns)

Last updated