Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Image with text

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.

Images with text on desktop
Images with text on desktop

Add an image with text section

The Image with text section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Image with text.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add an image

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

In your theme editor (Customize):

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

    Image settings in the theme editor
  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 2048px 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.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  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. Remember to click Save.

Images with text section settings

The Images with text section has the following settings:

Configuration Settings

Image

Select or upload an image to be associated with the current section.

Image position

Change where the image appears in relation to the featured products. Either Left or Right.

Image width

Change the width of image in this section. Either 1/2 (50% of the page width) or 2/3 (66% of the page width).

Image aspect ratio

Choose to display the as Square, Landscape, or Portrait.

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

Image focal point

The area of the uploaded image that will always appear centered to avoid cropping.

Change the section headings

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

In your theme editor (Customize):

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

  2. (Optional.) In the block settings, 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. Remember to click Save.

Add a call-to-action button

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

Add button block in theme editor

In your theme editor (Customize):

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

    This opens the button block settings.

  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. Select the Link style to either show a Button or Link with arrow.

  5. Remember to click Save.

Images with text block settings

The Images with text section blocks has the following settings:

Configuration Settings

Heading

Add heading text to be used above the list of featured products.

We recommend keeping this to just a few words long.

Subheading text

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Button

Choose a page from your store to be linked to from the block. The entire block becomes a link.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.