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

Inline features

The Inline Features section can be used to highlight your core values, your process, or other aspects of your products with a row of short text blocks each with their own square or round icon-like image.

Inline features section
Inline features section

Add an Inline 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 Inline 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 an icon-like image.

  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 Heading text.

    We recommended a short title of just a few words.

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

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

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

  7. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your Feature 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.

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

Customize the Inline features section

The Inline posts section settings apply to all Feature blocks. You can set the number of columns per row, change the Image shape of your feature images, set the Text alignment to position the feature image left or right, and enable the Alternate section color.

  1. Click on the Inline features section.

    This opens the Inline features section settings.

  2. Choose to display 2, 3, or 4 Columns per row of your Feature blocks.

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

  4. Set the Text alignment to display the Feature image to the Right or Left of Feature Heading and Subheading.

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

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

Inline features section settings

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

Configuration Settings

Columns per row

Choose to display 2, 3, or 4 Feature blocks per row.

Image shape

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

Text alignment

Choose to display the headings and subheadings of each feature to the Left or Right of each image.

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

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.