Skip to main content
The Facet features section shows a row of short benefits, such as free shipping, easy returns or secure payment. Each feature has an icon, a heading and a line of text. This page covers the section settings and the feature block, including how to use your own SVG icons.
The Features section as it appears on the Facet demo storefront.

​
What this section controls

  • The features in the row, with their icons and text.
  • Lines between the features.
  • The section colors, width and spacing.

​
Getting started

1

Open the Theme Customizer

In your Shopify admin, open Online Store, then Themes, and click Customize next to Facet.
2

Add the section

In the Sections panel, click Add section and choose Features. The section can’t be added to the header.
3

Set up each feature

Click a Feature block to choose its icon, then edit the heading and text inside it. Click Add block, then Feature, to add more.
The theme editor with the Features section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.

​
Section settings

​
Layout

Theme editor sidebar showing the Features section settings: Show dividers, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.
  • Show dividers: off by default. Draws a thin line between the features, in the color scheme’s border color.
On screens 750 pixels wide and larger, all features share one row. On phones they sit two per row.

​
Common settings

See Common settings for details.
  • Color scheme: the colors of the section. SVG icons that use the current color follow its text color.
  • Top padding and Bottom padding: None, Small, Medium (default), Large or Extra large.
  • Page width: Narrow, Narrower, Fluid (default) or Full.

​
Blocks

​
Feature

Theme editor sidebar showing the Feature block (in Features) settings: Use SVG icon, SVG code, Icon size.
Each Feature block is one benefit. Inside it, add Heading and Text blocks for the words. See Theme blocks for their settings.
Off by default. Off, the feature uses the picture in Icon. On, it uses the code in SVG code.
A picture to use as the icon, such as a PNG or SVG file from your files. Appears only when Use SVG icon is off. Leave it empty for a feature without an icon.
Paste inline SVG code. Use currentColor for strokes and fills so the icon follows the color scheme. Appears only when Use SVG icon is on.The icon only shows when the code contains an <svg> tag. For safety, Facet hides SVG code that contains scripts or event handlers such as onload or onclick.
From 24 to 60 pixels, in steps of 4. Default: 40. Applies to both picture and SVG icons.

​
Best practices

  • Use three or four features. More than four make each one narrow on a laptop.
  • Keep icons in one style. Icons from one set, with the same line weight, look tidier than mixed pictures.
  • Prefer SVG icons. An SVG with currentColor stays sharp at any size and changes color with the color scheme.

Theme blocks

Settings for the heading and text inside each feature.

Colors

Set the text and border colors the icons and dividers use.