The Trust Badges & Icons section helps merchants visually enhance their store credibility using customizable trust indicators like secure payment icons, guarantee badges, delivery highlights, and more.

This section allows full control over:

• Badge appearance
• Layout behavior
• Typography
• Animations
• Background styling
• Mobile responsiveness
• Advanced CSS customization

🎨 Template

What it does

Changes the overall visual theme and color palette of your badges.

How to use

Click the dropdown to choose from presets like:

• Black Friday
• Minimal
• Mint
• Dusk

These templates instantly help match your store branding and visual style.

👀 Visibility

What it does

Controls which devices can see your trust badges.

Available Options

• Desktop and Mobile → Shows badges everywhere
• Only Desktop → Hidden on mobile devices
• Only Mobile → Hidden on desktop devices

This helps merchants create device-specific experiences.

↔️ Layout Orientation (Desktop & Mobile)

What it does

Determines how individual badges are arranged.

Available Options

Horizontal

Badges appear side-by-side in a single row.

Vertical

Badges stack one below another in a column layout.

Separate controls may be available for Desktop and Mobile layouts.

📱 Badge Display Behavior (Mobile Only)

What it does

Controls how badges behave on smaller mobile screens when space becomes limited.

Available Options

Scrollable

Customers can swipe horizontally to view all badges in one row.

Wrap

Badges automatically move to the next line so all are visible together.

✨ Animation

What it does

Adds entry animations when badges load on the page.

How to use

Select an animation style from the dropdown.

Animation options include:

• Slide In
• Pop
• Fade Up
• And more

Animations help attract customer attention without requiring additional design work.

🖼️ Background Style

What it does

Controls the background appearance behind the badge section.

Available Options

• Single Color
• Gradient
• Tricolor Gradient
• Patterns

Additional Customization

Merchants can also customize:

• Gradient angle degree
• Individual colors
• Hex color codes
• Pattern appearance

This helps badges visually blend into the storefront design.

📐 Borders & Corners

Corner Radius (px)

Controls how rounded the outer corners appear.

• Higher values → More rounded corners
• 0 → Sharp square corners

Border Size (px)

Adjusts the thickness of the outer border.

Border Color

Changes the color of the border line.

Border Style

Available styles may include:

• Solid
• Dotted
• Dashed
• None

📏 Spacing (Desktop vs Mobile)

Spacing can be customized separately for Desktop and Mobile devices.

This ensures your badge layout remains balanced and responsive across all screen sizes.

Inside Spacing (Padding)

Controls spacing inside the badge container.

Available directions:

• Top
• Bottom
• Left
• Right

This creates breathing room between content and borders.

Outside Spacing (Margin)

Adds spacing outside the badge block.

Available controls:

• Top Margin
• Bottom Margin

Useful for separating badges from surrounding storefront sections.

Icon Spacing

Controls the distance between individual badges/icons.

🔷 Icon Styling

Badge/Icon Shape

What it does

Adds decorative backgrounds behind individual icons.

Available Options

• None
• Shield
• Emblem
• Circle
• Square

📏 Size & Customization

Desktop / Mobile Size (px)

Controls icon size independently for:

• Desktop
• Mobile

Background Color

Changes the background color behind the icon shape.

Corner Radius

Adjusts how rounded the icon background becomes.

🚀 Pro Styling (Advanced)

Icon Animation

Adds continuous motion effects to icons.

Examples may include:

• Shake
• Pulse
• Bounce

Icon Hover Animation

Triggers animations when customers hover over icons.

Examples may include:

• Float
• Wobble
• Holographic

Icon Shadow

Adds depth and layering effects using shadows.

Examples may include:

• Soft Glow
• Subtle Drop Shadow

➖ Icon Separator

What it does

Adds divider lines between individual badge icons.

How to use

Enable the Add icon separator checkbox.

This helps create cleaner spacing and visual separation.

✍️ Typography (Text & Fonts)

Font Selection

What it does

Controls the typography style used for badge titles and subheadings.

Available Options

• Use your Shopify theme font
• Choose custom fonts
• Google Fonts support

Using the theme font helps maintain storefront consistency.

📝 Title & Subheading Styling

Size (px)

Controls text size.

Color

Changes text color using:

• Color picker
• Hex code

📐 Text Spacing

What it does

Controls spacing between text lines for better readability.

Increasing spacing can make content feel cleaner and more premium.

💻 Custom CSS (For Developers)

Advanced Feature

If built-in settings are not enough, merchants can add fully custom CSS styling.

Available Target Classes

Entire Badge Container

.futureblink-trust-badge

Title Text

.fb-title

Subheading Text

.subheading

CTA Button

.cta-button

⚡ Applying Custom CSS

How to use

1. Paste your custom CSS into the editor
2. Click Apply
3. Preview changes instantly

❗ Overriding Shopify Theme Styles

Sometimes Shopify themes may override your custom styling.

If your CSS changes do not appear correctly, use:

\!important

This forces your styling to take priority over theme styles.

Example:

.fb-title {

color: red \!important;

}

✅ Final Result

Once configured successfully, Trust Badges & Icons help create a more professional, trustworthy, and conversion-focused storefront experience.

With proper styling in place:

• ✅ Store credibility improves
• ✅ Important guarantees become more visible
• ✅ Customer confidence increases
• ✅ Store branding feels more polished
• ✅ Mobile responsiveness improves
• ✅ Badge layouts become cleaner and more organized
• ✅ Visual consistency across the storefront becomes stronger

Well-designed trust badges can significantl

Updated on: 03/06/2026