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

Image with features

The Image with features section displays lets you highlight up to six key features of your products with custom text and icon-like images next to a full-height image. You can adjust the layout of this section by changing the positon or alignment of the features and the size and shape of the images.

Image with features section
Image with features section

Add an Image with features section

The Image with features 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 features 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

Add features

You can add up to 6 Feature blocks with headings, subheadings, and a square or circle icon-like image to accompany or illustrate the individual feature.

  1. Click + Add Feature and/or click on the Feature block you wish to edit.

    This opens the Feature block settings.

  2. Under Image, click the Select image button to add a small image to display next to the feature content.

    Features with round images
    Features with round images

    We recommend a square image, ideally 160px by 160px.

  3. Change the Image shape of the feature image to either Round or Square.

  4. Change the Heading text.

    We recommended a short title of just a few words.

  5. Change the Subheading text.

    We recommend two to three short sentences.

    We also recommend trying to keep the subheading text for all Feature blocks around the same length.

  6. Adjust the Max width of text of the Feature text using the slider.

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

  7. Return to the list of your template sections in the sidebar and repeat this process until you've added all the blocks you need.

  8. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your section blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a block entirely.

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

Add a section image

You can showcase a large image to the left or right of the features and adjust its width and crop it to be a different shape.

  1. Click on the Image with features section.

    This opens the Image with features section settings.

  2. 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 an image that is square or landscape (wider than it is tall).

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

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

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

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

Customize the section layout and style

You can adjust the layout of the section by changing the Position and Alignment of the features. You can also choose to use your Alternate section color.

  1. Change the Text position to display the features to the Left or Right of the section image.

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

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

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

Image with features section settings

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

Configuration Settings

Image

Use the Select image button to add a section image. 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 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 image to Square, Landscape, or Portrait.

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

Text position

Change the Text position to display the features to the Left or Right of the section image.

Text alignment

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

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.

Feature block settings

The following settings are found by clicking directly on a Feature or Heading block:

Configuration Settings

Image

Select or upload an image to accompany or illustrate the individual feature.

We recommend a square image, ideally 160px by 160px.

Image shape

Choose to display the Feature block image as Round or Square.

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.

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.