> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.
# USP bar
> Configure the USP bar with Value blocks for short icon-and-text selling points shown in a row on desktop and a slider on mobile
The USP bar lines up your unique selling points in a single band: free shipping, a money-back guarantee, a sustainability promise, each with an icon and one line of text. It is a compact way to answer the doubts a shopper has before they scroll further, and it works equally well under the hero on the homepage or just above the footer on every page.
Each selling point is a Value block with its own icon and Text or Heading blocks. On desktop all values share one row; on phones the bar becomes a slider with bullet pagination so nothing is squeezed.
## What this section controls
* Icon on top or beside the text
* An optional line between icon and text, icon size and spacing between values
* Slides visible on mobile
* A background scheme for the band and a card scheme for the panel
* Value blocks, each with an icon and Heading or Text blocks
## Getting started
From Shopify admin, open the Theme Customizer on the template where the bar should appear.
Choose Add section and pick USP bar. The preset comes with four example values.
Select each Value block, upload an Icon or paste Icon SVG code, and edit its Text block.
Choose Item layout, Icon size and Grid spacing, then check the mobile slider in the preview.
## Section settings
### Layout
**Icon on top** (default) stacks the icon above the text, centered. **Icon beside text** places the icon to the left of the text in a single line, which is more compact and suits longer statements.
Adds a thin line between the icon and the text of every value. Off by default. Works with Icon on top; it gives the row a more structured, tabular feel.
From 24px to 80px in steps of 4. Default: 40px. Icons are shown at this size on every value, so pick icons drawn to a consistent visual weight.
Space between values, from 8px to 80px in steps of 4. Default: 40px. The same gap applies on desktop and between mobile slides.
1, 1.25, 1.5 or 1.75 values visible on phones. Default: 1.25, which shows part of the next value as a swipe cue. On desktop every value fits in one row regardless of this setting.
### Colors
* **Background color scheme**: the full-width band behind the panel. Default: Scheme 1.
* **Card color scheme**: the panel that holds the values. Default: Scheme 2. With different schemes the bar reads as a card resting on the page; matching them makes it a plain strip.
### Common settings
Page, Narrow, Narrower, Fluid or Full width. Default: Page.
None, Small, Medium, Large or Extra large. Default: Medium for both, tighter than most sections because the bar is meant to sit close to its neighbors.
None, Top, Bottom or Top and bottom. Default: None.
See [Common settings](/themes/olympus/common-settings) for details.
## Blocks
### Value
One selling point. Value is private to the USP bar and is the only block the section accepts. The number of Value blocks decides how many columns the desktop row has, so four values give four equal columns.
Paste the SVG markup of an icon. When set, it is shown instead of the icon image. Vector icons stay sharp at any Icon size and inherit the card scheme's text color when the SVG uses the current color.
Upload an icon image instead. Use a square PNG or SVG file with a transparent background. Ignored when Icon SVG code is filled in.
Inside each Value you can add **Heading** and **Text** blocks. The preset uses one Text block per value at Small size, for example "90-day money-back guarantee". Add a Heading above the Text when a value needs a short title and a supporting line. Both are shared blocks documented in the [Theme blocks reference](/themes/olympus/theme-blocks).
Pasted SVG code is rendered as is. Only use SVG from a trusted icon library, and keep it free of scripts and external references so it displays consistently in every browser.
## Best practices
Fewer looks sparse across a wide row; more than five shrinks each column until text wraps.
Aim for four to six words. The bar is scanned, not read; details belong on a policy page.
Mixing outline and filled icons or different stroke weights makes the row look assembled rather than designed.
SVG scales cleanly with Icon size and takes the text color of the card scheme automatically.
Under the hero, above the footer, or on the product template near the buy buttons are the places shoppers look for reassurance.
With 1.25 slides the second value peeks in. If your values are very short, 1.5 or 1.75 shows more at once.
## Related guides
A larger tile with a heading panel and multi-line values
Highlight product features with images and text
Heading and Text block settings used inside values