Spark 1.0

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.

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

  • Home page template

  • Collection pages template

  • Product pages template

Add an Image with text section to the home page

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

STEPS

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

  2. Scroll to the bottom of the home page sections and choose Add section

  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.

Add two images for a magazine-style collage.

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

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

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

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

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

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

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

  5. 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:

  1. Click Save.

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:

STEPS

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

  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:

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

  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:

  11. Click Save.

Settings reference

The Image with text section has the following 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.

  • Home page

  • Product page

  • Collection pages