Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

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 image with text section

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

Steps

In your 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. Use the drag and drop handles ⋮⋮ to change the order of your sections.

Add section 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.

Steps

In your theme editor (Customize):

  1. Click on the Image with text section to open the 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. (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.

  8. Click Save.

Add headings

  1. Click the Heading title block to open the block settings.

  2. Change the Heading text to display as a section title.

    We recommend a title of just a few words long.

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

  3. Use the Max width of text slider to control the maximum width of the heading.

    Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

  4. Click on the Subheading block to open the block settings.

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

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

  7. Use the Max width of text slider to control the maximum width of the subheading.

    Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

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

  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. Click Save.

Image with text section settings

Click on the Image with text section to find the following settings:

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

Crop the shape of your images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.

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

Click on the Heading, Subheading, or Button blocks to find the following settings:

Configuration Settings

Heading

Enter heading text to display as a section title.

Subheading

Enter subheading text to display below the heading.

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

Max width of text

Use the slider to control the maximum width and line breaks of the headings.

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.