USP Icon Bar With Image Highlight Key Benefits With Visual Icons

Showcase your store's key benefits, services, features, or trust points with visual icon cards arranged around a central image.

  • Visual USP Cards Visual USP Cards
  • Flexible Icon Options Flexible Icon Options
  • Responsive Layout Responsive Layout
USP Icon Bar With Image preview
USP Icon Bar With Image preview
USP Icon Bar With Image preview
USP Icon Bar With Image preview
USP Icon Bar With Image preview
USP Icon Bar With Image preview
vector
vector

Key Features: Everything You Need for Visual USP Highlights

Create a structured benefits section with customizable icons, images, content cards, central imagery, alignment controls, and responsive styling.

Central Image Layout

Central Image Layout

Add a main image to the center of the USP grid for a balanced and engaging visual presentation.

Multiple USP Cards

Multiple USP Cards

Add up to 4 USP blocks to highlight important store benefits, services, features, or trust points.

Flexible Icon Options

Flexible Icon Options

Choose from a wide range of built-in icons or use a custom image for each USP block.

Custom Icon Shapes

Custom Icon Shapes

Display icons in square, rounded, or circular containers to match your store's visual style.

Custom Icon Styling

Custom Icon Styling

Adjust icon size, border thickness, icon color, background color, and border color.

Individual USP Content

Individual USP Content

Add a heading and a rich-text description to clearly explain each benefit or feature.

Flexible Content Alignment

Flexible Content Alignment

Control the alignment of USP content to create a layout that fits your store design.

Custom Card Styling

Custom Card Styling

Customize card backgrounds, borders, radius, typography, spacing, and overall section colors.

USP Icon Bar With Image Settings & Options

Control the section layout, central image, USP cards, icons, typography, colors, spacing, and responsive behavior from the theme editor.

Section Settings

Section Settings

Applies to the whole section

Main heading displayed above the USP grid.

Heading

Supporting rich-text content displayed below the heading.

Content

Choose the alignment of the section heading and supporting content.

Content Alignment

Add the main image displayed within the USP layout.

Image

Choose whether the main image appears on the left, center, or right side.

Image Position

Choose whether the main image is displayed on mobile devices.

Show Image on Mobile

Adjust the corner rounding of the main image.

Image Border Radius

Set the spacing between USP cards on the desktop.

Space Between Columns

Choose the alignment of content inside the USP cards.

Content Alignment

Set the main section heading font size.

Heading Font Size

Set the main section content font size.

Content Font Size

Set the background color of the entire section.

Background Color

Set the main heading color.

Heading Color

Set the main section content color.

Content Color

Set the USP card background color.

Card Background Color

Set the USP card border color.

Card Border Color

Set the USP card heading color.

Card Heading Color

Set the USP card content color.

Card Content Color

Set the top and bottom spacing for desktop screens.

Desktop Section Padding

Set the top and bottom spacing for mobile screens.

Mobile Section Padding
USP Block Settings

USP Block Settings

Applies to each USP icon block

Choose a built-in icon for the USP block.

Icon

Upload a custom image to use instead of the selected icon.

Image

Add the title displayed for the USP benefit or feature.

Heading

Add supporting rich-text content below the USP heading.

Content

Adjust the size of the icon displayed in the USP block.

Icon Size

Choose a square, rounded, or circular container for the icon.

Icon Shape

Set the color of the selected built-in icon.

Icon Color

Customize the background color of the icon container.

Icon Background Color

Set the border color around the icon container.

Icon Border Color

Adjust the thickness of the icon container border.

Icon Border Thickness

Where This Section Can Be Used

Use visual USP cards to communicate key store benefits, services, product advantages, trust points, or shopping information in a clear, engaging layout.

  • Home Page
  • Collection Page
  • Product Page
  • Landing Page
Home Page

Highlight Your Store's Key Benefits

Use the USP icon bar to quickly communicate shipping benefits, customer support, secure payments, product quality, or other important store advantages.

check-iconHighlight key store benefits

check-iconBuild trust with shoppers

check-iconCommunicate services quickly

check-iconSupport a stronger first impression

Collection Page

Add Useful Information Around Product Browsing

Place the USP section alongside collection content to explain shipping, service, product quality, payment, or other store-wide benefits.

check-iconSupport collection browsing

check-iconHighlight store advantages

check-iconCommunicate important services

check-iconImprove content visibility

Product Page

Show Important Product or Shopping Benefits

Use USP cards to highlight product advantages, delivery information, return policies, payment options, or other details that support purchase decisions.

check-iconHighlight product benefits

check-iconCommunicate shipping information

check-iconReinforce return policies

check-iconSupport customer confidence

Landing Page

Present Key Benefits in a Visual Layout

Use the central image and icon cards to introduce campaign benefits, services, features, or key reasons for visitors to explore your offer.

check-iconCreate a structured visual section

check-iconHighlight campaign benefits

check-iconCombine imagery with key information

check-iconGuide visitors toward important details

Showcase Important Benefits With Visual Icons

Combine a central image with customizable USP cards to present important store benefits, services, features, or trust points in an easy-to-scan layout.

USP Icon Bar With Image section with central image and visual benefit cards

Create Clear and Engaging USP Highlights

Use built-in icons or custom images, flexible card styling, rich-text content, and responsive settings to create a benefit-focused section that fits your store design.

check-iconHighlight multiple store benefits

check-iconCombine icons with a central image

check-iconAdd custom images to USP cards

check-iconChoose from multiple built-in icons

check-iconSelect square, rounded, or circular icons

check-iconCustomize icon colors and borders

check-iconAdd headings and rich-text descriptions

check-iconControl card and section styling

check-iconAdjust desktop and mobile spacing

check-iconCreate responsive USP layouts

Do This, Skip That.

DO

  • do Use relevant icons for each store benefit.
  • do Keep USP headings short and easy to scan.
  • do Use clear images that support the section message.
  • do Highlight different benefits in each card.
  • do Keep descriptions concise and informative.

DON'T

  • don't Don't use unrelated icons for your USP content.
  • don't Don't add long or confusing USP headings.
  • don't Don't use low-quality or irrelevant images.
  • don't Don't repeat the same benefit across multiple cards.
  • don't Don't overload cards with unnecessary content.

Frequently Asked Questions

Can I add an image to the section?

Yes. You can upload a main image and position it on the left, center, or right of the USP layout.

How many USP blocks can I add?

You can add up to 4 USP icon blocks, with each block having its own icon or image, heading, and content.

Can I use custom images instead of icons?

Yes. Each USP block can use a custom image instead of one of the available built-in icons.

Can I customize the icon size?

Yes. You can adjust the icon size from the Icon settings in the theme editor.

Can I customize the icon shape?

Yes. You can choose a Square, Rounded, or Circle shape for the icon container.

Can I customize the icon colors?

Yes. You can customize the icon's color, background color, and border color.

Can I control the USP card styling?

Yes. You can customize the card background color, border color, border radius, heading color, and content color.

Can I change the alignment of the USP content?

Yes. You can choose the content alignment for the USP blocks to match your preferred layout.

Can I control the main image on mobile?

Yes. You can choose whether the main image is displayed on mobile devices using the Show Image on Mobile setting.

Can I use rich text inside the USP blocks?

Yes. Each USP block supports rich-text content below its heading, allowing you to add formatted supporting information.

Help Center

support e-mail

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready to Highlight Your Store's Benefits With Visual USP Cards

Install SectionHub and add the USP Icon Bar With Image section to your Shopify theme to showcase key benefits with customizable icons, images, and responsive cards.