We've recently relaunched all three of our themes. Watch the launch video here.

Image with text

The Image with text section combines a feature image and marketing call-to-action button with a flexible layout to balance image and text the way you want. Add two images for a special magazine-style collage. It's a great way to introduce a product or promote an exciting feature.

Image with text section
Image with text section

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 Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Image with text from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Set up the section images and settings

  1. Click on the Image with text section.

    This opens the Image with text section settings.

  2. Under Image, use the Select image button to add a section image. Your image will appear in its original orientation by default.

    There are no required image dimensions but we recommend uploading an image with a minimum width of 2048px for optimal quality.

    Read our article about Image size recommendations for Spark to learn more.

  3. (Optional.) Under Image 2, click Select Image to add two images for a magazine-style collage.

    We recommend your second image have the same dimensions as the first image.

    Image with text with two images
    Image with text with two images
  4. Change the Image position to display the image(s) on the Left or Right side of the section.

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

    1/2 image width style
    1/2 image width style
    2/3 image width style
    2/3 image width style
  6. Select the Image aspect ratio to crop your image(s) to Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your image(s).

  7. Change the Text alignment to make the feature paragraphs Left, Center, or Right aligned.

  8. (Optional.) Enable the Alternate section color.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  9. Remember to click Save in the top-right corner.

Add headings

  1. Click the Heading title block.

    This opens the Heading block settings.

  2. Change the Heading text to display as a section title and use the Max width of text slider make sure longer titles look good and clear.

    We recommend a title of just a few words long.

    Use the Remove block button to remove the Heading block entirely.

  3. Return to the list of sections and click on the Subheading block.

    This opens the Subheading block settings.

  4. Add your text and use the formatting buttons to add bold, italic, and linked text.

  5. Use the Max width of text slider to limit the maximum width of the text.

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

  6. Remember to click Save in the top-right corner.

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.

  1. Click + Add block and select Button, then click on the block to open the button block settings.

  2. Add a Button label and Button link to display a button underneath the text block.

    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?"

    To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

  3. Remember to click Save in the top-right corner.

Image with text section settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Image

Select or upload one or two images. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall).

We recommend uploading an image with a minimum width of 2048px for optimal quality.

Image position

Display the image(s) on the Left or Right side of the section.

Image width

Choose an image width of either 1/2 or 2/3 to set the image size to half or over half of the section.

Image aspect ratio

Choose to crop your section images to appear Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of your images.

Text alignment

Change the alignment of Heading, Subheading, and Button blocks to Left or Center

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Image with text block settings

The following settings are found by clicking directly on the Heading, Subheading, or Button blocks:

Configuration Settings

Heading

Add heading text.

We recommended a short title of just a few words.

Subheading

Add subheading text to describe the feature.

Use the formatting buttons to add bold, italic, and linked text.

Max width of text

Use the slider to adjust the maximum width of the text.

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

Button link

Select or paste a link for the call-to-action button.

To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

Button label

Add custom text for your call-to-action button.

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

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.