> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Highlight store benefits with Facet's features section

> Use Facet's features section to show a row of benefits, each with an icon picture or SVG code, a heading and a short text, with optional dividers.

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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/features/features-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=a1d397cd8b7c8dd4d1347fa542455060)

## 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/features/features-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=d0aec3d3aa8140814add7942e66c1047)

## 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/features/features-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=30588b6bb5086fd3e60d11f195063e2c)

* **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](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/features/features-block-feature-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=952a4c0267c5b34116d5dcc4f0600cb5)

Each **Feature** block is one benefit. Inside it, add **Heading** and **Text** blocks for the words. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings.

> [accordion] Use SVG icon
>
> Off by default. Off, the feature uses the picture in **Icon**. On, it uses the code in **SVG code**.

> [accordion] Icon
>
> 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.

> [accordion] SVG code
>
> 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`.

> [accordion] Icon size
>
> 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.

## Related guides

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Settings for the heading and text inside each feature.

> [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md)
>
> Set the text and border colors the icons and dividers use.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.