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 custom square or round image.

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

Home page template
Collection pages template
Product pages template

Add an Inline features section to the home page

To add an Inline features section to your home page:

STEPS

From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.
Scroll to the bottom of the home page sections and choose Add section.
Choose Inline features from the list of sections.
This opens the Inline features settings.
Choose to display 2, 3, or 4 Columns per row.
Choose the Image shape to be Round or Square.
Set the Text alignment to display the heading and subheading on the Right or Left of the images.
Return to the list of Home page sections to find your new Inline features section.

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

Use the Add features button to add a small image with text.

For more information, see the Add features section.

Click Save.

Add an Inline features section to other pages

You can add a Inline features section to your Collection pages and Product pages templates.

To enable an Inline features section on these pages:

STEPS

From your Customize theme editor, choose Collections or Products from the pages drop-down menu at the top of the screen.
Click on the arrow beside Collection features or Product features.
Use the Add block button to select Inline features.
This opens the Inline features section settings.
You can add up to 4 features.
Choose to display 2, 3, or 4 Columns per row.
Choose the Image shape to be Round or Square.
Set the Text alignment to display the heading and subheading on the Right or Left of the images.
Select an Image and change the Heading and Subheading text for each feature.
Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:
Click Save.

Settings reference

The Inline features section has the following settings:

Columns per row

Choose to display 2, 3, or 4 features per row.

Image shape

Choose to display the 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 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 Inline features section:

STEPS

Make sure you are already editing the [Inline features features][inline-features] section that you want to change.
Use the Add Feature button to choose from your store's list of collections.
This opens the individual feature settings.
Check the Show image checkbox.
Use the Select image button to add a small image to display to the feature content.
You image should be square and ideally 160px by 160px.
Change the Heading text.
Add Subheading text.
Use this section to describe the feature in more detail.
Return to the list of Home page sections to find your Inline features section.
Repeat this process until you've added all the features you need.
You can change the order of the blocks by using the drag handles:
You can also use the Remove block button to remove a block from this section entirely.
Click Save.

Settings reference

Each feature block has the following 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 recommend a title of just a few words long.

Subheading

Add subheading text to describe the feature.

Home page
Product pages
Collection pages