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

Image with features

The Image with features section highlights feature aspects of your products with an adjustable layout. Each feature block can include their own round or square icon-like image. You can add this section to your home page, collection pages, or product pages.

Image with features section
Image with features section

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

Add an Image with features section to the home page

To add an Image with features section to 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 features from the list of sections.

    This opens the Image with features settings.

  4. Use the Select image button to add a section image.

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

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

  7. Change the Heading text.

  8. Set the Text position and Text alignment to adjust the layout of the section.

    For more information, see the Image with features settings section.

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

    Use the drag handles to rearrange the order of the blocks:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  10. Use the Add Feature button to add a small image with text.

    For more information, see the Add features section.

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

Add an Image with features section to other pages

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

To enable an Image with features 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 features.

    This opens the Image with features section settings.

  4. Use the Select image button to add a section image.

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

  6. 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 images.

  7. Change the Heading text.

  8. Set the Text position and Text alignment to adjust the layout of the section.

  9. 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
  10. Use the Save button in the top-right corner when you are finished editing.

Image with features settings

The Image with features section has the following settings:

Configuration Settings

Image

Use the Select image button to add an image.

Image width

Choose between 1/2 or 2/3 to change the image size to half or over half of the section.

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

Text position

Add subheading text.

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

Text alignment

Add a short call-to-action text to create a button that links to the collection.

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.

Add features

To add a new feature to your Image with features section:

  1. Make sure you are already editing the Image with features section that you want to change.

  2. Use the Add Feature to add a new feature block.

    This opens the individual feature settings.

  3. Use the Select image button to add a small image to display to the feature content.

    Features with round images
    Features with round images

    You image should be square and ideally 160px by 160px.

  4. Choose the Image shape to be Round or Square.

  5. Change the Heading text.

  6. (Optional.) Add Subheading text.

    Use this section to describe the feature in more detail.

  7. Return to the list of Home page sections to find your Image with features section.

  8. Repeat this process until you've added all the features you need.

  9. You can change the order of the blocks by using the drag handles:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    You can also use the Remove block button to remove a block from this section entirely.

  10. Use the Save button in the top-right corner when you are finished editing.

Feature block settings

Each feature block has the following settings:

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 image as Round or Square.

Heading

Add heading text.

We recommend a title of just a few words long.

Subheading

Add subheading text to describe the feature.

Max width of text

Control the width of the subheading 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.