Skip to main content
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. USP bar with four icon-and-text value propositions in a row

​
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

1

Open Theme Customizer

From Shopify admin, open the Theme Customizer on the template where the bar should appear.
2

Add USP bar

Choose Add section and pick USP bar. The preset comes with four example values.
3

Edit the values

Select each Value block, upload an Icon or paste Icon SVG code, and edit its Text block.
4

Tune the layout

Choose Item layout, Icon size and Grid spacing, then check the mobile slider in the preview.
USP bar section and its Value blocks in the Theme Customizer sidebar

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

Three to five values

Fewer looks sparse across a wide row; more than five shrinks each column until text wraps.

One line per value

Aim for four to six words. The bar is scanned, not read; details belong on a policy page.

Use one icon set

Mixing outline and filled icons or different stroke weights makes the row look assembled rather than designed.

Prefer SVG code

SVG scales cleanly with Icon size and takes the text color of the card scheme automatically.

Place it where doubts arise

Under the hero, above the footer, or on the product template near the buy buttons are the places shoppers look for reassurance.

Check the mobile slider

With 1.25 slides the second value peeks in. If your values are very short, 1.5 or 1.75 shows more at once.

USP tile

A larger tile with a heading panel and multi-line values

Feature highlights

Highlight product features with images and text

Theme blocks reference

Heading and Text block settings used inside values