Skip to main content
The USP tile presents your brand values as a designed tile: a header panel with a Label, Heading and Text, and a set of Value blocks, each with an icon, a short title and a supporting line. Where the USP bar answers quick doubts in one line, the tile gives each value room to explain itself, which makes it a good fit for an About section on the homepage or a “Why us” band on collection pages. The values can sit in a grid or a slider, the header can sit above or beside them, and the whole tile can be painted with color schemes or laid over a background image. USP tile with a heading panel beside a three-column grid of icon values

​
What this section controls

  • Grid or Slideshow layout for the values, with 1 to 6 columns
  • Header above or beside the values, and content alignment
  • Icon position, size and dividers between icon, header and values
  • Slides visible on mobile
  • A desktop and mobile background image with an overlay
  • Color schemes for the section, the header panel and the fluid card
  • Label, Heading and Text blocks for the header, and Value blocks for the content

​
Getting started

1

Open Theme Customizer

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

Add USP tile

Choose Add section and pick USP tile. The preset includes a label, heading, text and four values.
3

Edit the header

Update the Label, Heading and Text blocks. Remove any you do not need.
4

Edit the values

Select each Value block, set its icon and edit the nested Heading and Text blocks. Add or remove values to match your columns.
USP tile section and its blocks in the Theme Customizer sidebar

​
Section settings

​
Layout

Grid (default) shows every value at once in the chosen number of columns. Slideshow puts the values in a slider, useful when there are more values than columns. On phones both layouts become a slider with bullet pagination.
Above the values (default) or Beside the values. Beside gives the header its own column next to the grid, which suits a strong heading and three or fewer columns.
Start (default) or Center. Applies to the header and the values.
From 1 to 6 columns on desktop. Default: 3. Also sets how many slides are visible in the Slideshow layout.
Above the text (default) stacks the icon over the value’s title. Beside the text puts the icon to the left, which keeps values shorter.
Space between values, from 8px to 64px in steps of 4. Default: 32px.
From 24px to 96px in steps of 2. Default: 70px. Larger than the USP bar’s default because the tile gives each value more room.
Three optional lines, all off by default:
  • Show a line under the icon: between icon and title. Hidden when Icon position is Beside the text.
  • Line between the text and the values: separates the header panel from the values. Appears with Beside the values.
  • Dividers between values: lines between the value columns.
1, 1.25, 1.5 or 1.75. Default: 1.25.

​
Media

  • Desktop image and Mobile image: an optional background behind the whole tile. The mobile image falls back to the desktop image.
  • Image overlay opacity: darkens the image from 0% to 80% in steps of 5 so the text stays readable. Default: 0.
With a background image the header panel becomes transparent so the image shows through, and the header and card schemes below are hidden.

​
Colors

The section and the values. Default: Scheme 1.
The heading panel. Default: Scheme 1. Available when there is no background image and Width is not Fluid. A contrasting scheme turns the header into a distinct block beside the values.
Fluid width draws the whole tile as a card on the section’s ground; this scheme paints that card. Default: Scheme 2. Available when Width is Fluid and there is no background image. Inside the card the header uses the card scheme too.

​
Common settings

Page, Narrow, Narrower, Fluid or Full width. Default: Page. Fluid switches the tile to its card presentation.
None, Small, Medium, Large or Extra large. Default: Large for both.
None, Top, Bottom or Top and bottom. Default: None.
See Common settings for details.

​
Blocks

​
Header blocks

The header panel is built from three shared blocks, each used once. Their settings are described in the Theme blocks reference.
  • Label: a short eyebrow above the heading. The preset uses Plain text style; Outlined pill and Filled pill are available.
  • Heading: the tile title. The preset uses Heading 5 size with a level-two heading tag.
  • Text: a sentence or two introducing the values.

​
Value

One value in the grid or slider. Value is private to the USP tile.
Paste SVG markup. When set, it is shown instead of the icon image and scales cleanly with Icon size.
Upload an icon image instead. Ignored when Icon SVG code is filled in.
Inside each Value, add Heading and Text blocks. The preset uses a Body-size heading with a level-three heading tag, such as “Next day delivery”, and a Small-size text explaining it. Keep the same structure in every value so the columns align.
Pasted SVG code is rendered as is. Use icons from a trusted library and keep them free of scripts and external references.

​
Best practices

Match values to columns

Three values in three columns, or four in two rows of two, keep the grid balanced. An orphan value in a last row looks unfinished.

Keep value text to two lines

Equal-length descriptions keep the row heights even. Move longer stories to a dedicated page.

Use Beside the values with a strong heading

The side header works when the heading carries the message. With a long text block it is better above the values.

Choose Slideshow for more than four values

A slider avoids tiny columns while still showing everything on desktop.

Level the heading tags

Keep the tile heading at level two and the value titles at level three so the page outline stays logical for screen readers and search engines.

Try Fluid width for a card

Fluid draws the tile as a card on the page background, which separates it from surrounding full-width sections without a border.

USP bar

The compact one-line version of the same idea

Feature highlights

Image-led feature presentation for products

Theme blocks reference

Label, Heading and Text block settings