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

The Image with text section can be used on the following page templates:

Add an Image with text section to the home page

To set up an Image with text section on your home page:

  1. From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Scroll to the bottom of the home page sections and choose Add section

    Add section button
    Add section button
  3. Choose Image with text from the list of sections.

    This opens the Image with text section settings.

  4. Choose or upload Images to be used.

    Image with text with two images
    Image with text with two images

    Add two images for a magazine-style collage.

  5. Select the Image position: either Left or Right.

  6. Select the Image width: either 1/2 or 2/3.

    1/2 is half image, half text block. See an example:

    1/2 image width style
    1/2 image width style

    2/3 displays two-thirds image, one-third text block. See an example:

    2/3 image width style
    2/3 image width style
  7. Select the Image aspect ratio to display your images as Square, Landscape, or Portrait.

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

  8. Add a Heading, Text, and limit the Max width of text

    The text max width setting gives you extra control over how the heading and text look.

  9. Add a Button link and Button text for a call-to-action button.

    Call-to-action buttons prompt customers to perform a specific action, such as Read more, Sign up, or Buy now.

  10. Return to the list of Home page sections to find your new Image with text section with the content blocks nested below.

    Use the drag handles to rearrange the order of your Home page sections:

    Shopify section drag handles
    Shopify section drag handles
  11. Use the Save button in the top-right corner when you are finished editing.

Add an Image with text section to other pages

You can add an Image with text section to your Collection pages and Product pages templates.

To enable an Image with text section on these pages:

  1. From your Customize theme editor, choose Collections or Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the arrow beside Collection features or Product features.

  3. Use the Add block button to select Image with text.

    This opens the Image with text section settings.

  4. Choose or upload Images to be used.

    Add two images for a magazine-style collage.

  5. Select the Image position: either Left or Right.

  6. Select the Image width: either 1/2 or 2/3.

    1/2 is half image, half text block. See an example:

    1/2 image width
    1/2 image width

    2/3 displays two-thirds image, one-third text block. See an example:

    2/3 image width
    2/3 image width
  7. Select the Image aspect ratio to display your images as Square, Landscape, or Portrait.

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

  8. Add a Heading, Text, and limit the Max width of text

    The text max width setting gives you extra control over how the heading and text look.

  9. Add a Button link and Button text for a call-to-action button.

    Call-to-action buttons prompt customers to perform a specific action, such as Read more, Sign up, or Buy now.

  10. Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:

    Shopify content block drag handles
    Shopify content block drag handles
  11. Use the Save button in the top-right corner when you are finished editing.

Image with text settings

The Image 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 to either Left or Right.

Image width

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

Images aspect ratio

Choose to display your images as Square, Landscape, or Portrait. The default Natural setting will display the original orientation of your images.

Heading

Add heading text.

We recommend a title of just a few words long.

Subheading

Add subheading text to display below the heading.

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

Text alignment

Change the alignment of the Heading and Text to center or left.

Max width of text

Change how wide the heading and text should be to create the best balance.

Button link

Choose a page from your store to be link to from the section's call to action button.

Button label

Add text to be used on the call to action button

Use alternate selection color

Set the background color to the Alternate Section Color as chosen in your Color Settings.

See Spark's Color settings documentation to learn how to set Alternate section colors.

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.