Skip to main content

​
What It Does

The Trust Indicators section showcases key trust-building messages like free shipping, secure checkout, money-back guarantees, or customer service highlights. Display up to 4 indicators with custom icons, titles, and descriptions in flexible layouts to build customer confidence throughout the shopping journey.

​
Getting Started

1

Add the Section

Add the Trust Indicators section to templates where you want to build trust (homepage, product pages, cart)
2

Add Indicator Blocks

Add up to 4 indicator blocks (section comes with 4 by default)
3

Customize Each Indicator

For each block, add an icon, title (“Free Shipping”), and description (“On orders over $50”)
4

Configure Layout

Choose content direction (horizontal/vertical), alignment, and icon style to match your design

​
Settings

Type: Checkbox
Default: Enabled (checked)Enable touch-swipe navigation on mobile devices, allowing customers to swipe through indicators horizontally.

​
How It Works

When Enabled (Default):
  • Mobile users can swipe left/right to see all indicators
  • Useful when you have 3-4 indicators that don’t fit on mobile screen
  • Creates carousel-like experience on mobile
When Disabled:
  • All indicators display stacked vertically on mobile
  • No swiping interaction
  • Customers scroll down to see all indicators

​
When to Enable

Enable when:
  • You have 3-4 indicators (multiple indicators benefit from swipe)
  • Horizontal layout on desktop (maintains consistency)
  • Want interactive, carousel-style mobile experience
  • Screen space is premium (swipe saves vertical space)
Disable when:
  • Only 1-2 indicators (swipe unnecessary for so few items)
  • Vertical layout (stacking already works well)
  • Prefer traditional scroll over swipe interaction
  • Indicators are critical (ensure all visible without interaction)
Best practice: Keep enabled (default) for most use cases. Swipe is intuitive for mobile users and optimizes space.
Type: Range slider
Range: 0-10 seconds (step: 1 second)
Default: 3 secondsControls automatic rotation speed when indicators display as a slideshow on mobile. Set to 0 to disable autoplay.

​
How Autoplay Works

With autoplay (1-10s):
  • Indicators automatically advance after specified interval
  • Only functions on mobile when swipe is enabled
  • Creates animated carousel effect
  • Pauses when customer interacts (swipe or tap)
Without autoplay (0s):
  • Indicators remain static until customer swipes
  • Gives customers full control over viewing pace
  • More traditional, less distracting

​
Choosing Interval Speed

Fast (1-2 seconds):
  • Very quick rotation
  • Downside: May be too fast to read descriptions
  • Use when: Indicators are icon + short title only (no description)
Medium (3-5 seconds) ← Recommended
  • Comfortable reading time
  • Balanced between movement and comprehension
  • Use when: Standard indicators with title + 1 line description
  • Default: 3s is optimal for most use cases
Slow (6-10 seconds):
  • Leisurely pace, ample reading time
  • Use when: Longer descriptions or detailed indicators
  • May feel sluggish for simple indicators
Disabled (0 seconds): ← Conservative choice
  • No automatic rotation
  • Use when: You prefer manual control only
  • Best for: Accessibility (some users prefer no auto-movement)
Accessibility note: Autoplay can be distracting for users with cognitive disabilities. Consider 0s for maximum accessibility or 5s+ for slower pace.
Type: Select dropdown
Options: Horizontal, Vertical
Default: Horizontal
Note: Desktop onlyControls whether indicators display in a horizontal row or vertical stack on desktop screens.

​
Horizontal (Default)

Indicators display side-by-side in a horizontal row:
[Free Shipping] [Secure] [Returns] [Support]
Best for:
  • 4 indicators: Standard trust bar across page
  • Below hero sections: Spans width, feels banner-like
  • Product pages: Above/below product details as trust bar
  • Minimalist designs: Clean horizontal line
Considerations:
  • Icons + titles only work best (descriptions can crowd)
  • With 4 indicators, each gets ~25% width (can feel cramped with long text)

​
Vertical

Indicators stack vertically in a column:
Free Shipping
   On orders over $50

Secure Checkout
   256-bit SSL encryption

Easy Returns
   30-day money back

24/7 Support
   We're here to help
Best for:
  • Detailed descriptions: More space for multi-line explanations
  • Sidebar placement: Works well in narrow columns
  • Product pages: Next to product details as list
  • 1-3 indicators: Vertical feels natural for fewer items
Considerations:
  • Takes more vertical space than horizontal
  • Less “banner-like”, more “list-like” presentation

​
Desktop Only Note

This setting only affects desktop (1200px+). On mobile, layout adapts based on:
  • Swipe enabled: Horizontal carousel (regardless of desktop setting)
  • Swipe disabled: Vertical stack (regardless of desktop setting)
Type: Select dropdown
Options: Start (Left), Center, End (Right)
Default: Start (Left)
Note: Desktop onlyControls horizontal alignment of content within each indicator block.

​
Start (Left-aligned)

Content aligns to left edge of each indicator:
[Icon on left]
Free Shipping
On orders over $50
Best for:
  • Horizontal layouts: Standard left-to-right reading flow
  • Vertical layouts: Traditional list appearance
  • Icon + text horizontal: Icon left, text right (natural pairing)
  • Readability: Most readable for multi-line descriptions

​
Center

Content centers within each indicator:
    [Icon]
Free Shipping
On orders over $50
Best for:
  • Horizontal layouts: Symmetric, balanced appearance
  • Short content: Icon + title only (no long descriptions)
  • Fullwidth sections: Creates formal, balanced presentation
  • Minimalist aesthetics: Clean, centered design
Considerations:
  • Longer descriptions harder to read when centered
  • Works best with vertical content direction (icon above text)

​
End (Right-aligned)

Content aligns to right edge of each indicator:
           [Icon] [Icon on right]
           Free Shipping
       On orders over $50
Best for:
  • Rarely used (unconventional reading direction)
  • RTL languages (Arabic, Hebrew) - though theme should auto-handle
  • Specific design requirements
Generally avoid unless you have specific aesthetic reason.

​
Interaction with Content Direction

Horizontal direction + Center alignment:
  • Each indicator centered within its column
  • Creates balanced, symmetrical horizontal bar
  • Most common combination for horizontal layouts
Vertical direction + Start alignment:
  • Indicators align left as list
  • Natural reading flow for detailed descriptions
  • Most common combination for vertical layouts
Desktop Only: This setting only affects desktop. Mobile alignment adapts to swipe/stack layout automatically.
Type: Select dropdown
Options: Default, Circle, Square
Default: CircleApplies background shape to icons, enhancing visual prominence and style.

​
Default (No background)

Icons display as-is without background shape:
  • Icon appears in its original form
  • Clean, minimal aesthetic
  • Best when icons are already designed with shapes/backgrounds
  • Modern, flat design appearance
Best for:
  • Simple, line-style icons
  • When icons have sufficient visual weight without backgrounds
  • Minimalist designs
  • When you want icons to blend subtly

​
Circle (Default)

Icons display with circular background:
[Icon]  ← Icon in circle
Best for:
  • Standard choice: Works with most icon styles
  • Professional appearance: Polished, refined look
  • Consistency: All icons get uniform shape regardless of original design
  • Prominence: Circle draws attention to icons
Effects:
  • Background color (typically subtle, from theme colors)
  • Padding around icon (prevents icon from touching circle edge)
  • Unified visual language (all indicators look cohesive)

​
Square

Icons display with square/rounded-square background:
[Icon]  ← Icon in square
Best for:
  • Modern, geometric aesthetics: Angular, bold style
  • Tech/digital brands: Square feels contemporary
  • Grid-based designs: Complements other square elements
  • Contrast with rounded elements: Creates visual variety
Effects:
  • Similar to circle but with square/rounded-square shape
  • May have slightly rounded corners (theme-dependent)
  • Stronger geometric presence than circles

​
Choosing Icon Style

Consider your brand:
  • Classic/elegant: Circle (softer, traditional)
  • Modern/tech: Square (contemporary, structured)
  • Minimalist: Default (clean, unadorned)
Consider your icons:
  • Detailed custom icons: Default (let icon design shine)
  • Simple line icons: Circle or Square (add weight and presence)
  • Emoji icons: Default or Circle (emoji already colorful)
Theme consistency:
  • Match button styles (rounded buttons → circles, square buttons → squares)
  • Align with product cards and other UI elements
Type: Select dropdown
Options: Default, Medium, Compact, None
Default: DefaultControls vertical spacing (padding) above and below the section on desktop screens.
  • None: No spacing (section touches adjacent content)
  • Compact: Minimal spacing (~20-30px)
  • Default: Standard spacing (~40-60px) ← Recommended
  • Medium: Generous spacing (~80-100px)
When to adjust:
  • Default: Most use cases (balanced separation)
  • Compact: Below hero with minimal gap, or in crowded layouts
  • Medium: Standalone trust indicators as prominent section
  • None: Integrated into custom layouts (rare)
Type: Select dropdown
Options: Default, Compact, None
Default: CompactControls vertical spacing on mobile devices.
  • None: No spacing
  • Compact: Minimal spacing (~15-20px) ← Default
  • Default: Standard spacing (~30-40px)
Mobile default is Compact to reduce scrolling. Adjust to Default for more breathing room when trust indicators are primary feature.
Type: Select dropdown
Options: Page Width, Fullwidth
Default: FullwidthControls the maximum width of the section.

​
Fullwidth (Default)

  • Spans entire page width (edge-to-edge with page margins)
  • Creates banner-like trust bar appearance
  • Best for: Horizontal layouts (maximizes space for 4 indicators in a row)

​
Page Width

  • Constrained to standard page width (~1200px)
  • Creates more contained, focused appearance
  • Best for: Vertical layouts or when adjacent sections are also page-width
Recommendation: Keep Fullwidth for horizontal layouts (default), use Page Width if other sections are page-width for consistency.

​
Best practices

Limit to 4 Indicators

Section enforces 4 maximum. Use your most compelling trust factors—free shipping, returns, support, security. More than 4 dilutes impact and creates clutter.

Use Clear, Simple Icons

Choose recognizable icons (truck for shipping, lock for security, return arrow for returns). Avoid abstract or overly detailed icons that don’t communicate instantly.

Keep Text Concise

Title: 2-5 words. Description: 5-15 words. Longer text defeats “quick scan” purpose of trust indicators. Details go elsewhere.

Match Icons to Text

Ensure icon visually represents the indicator. Truck icon for “Free Shipping”, lock for “Secure Checkout”. Mismatched icons confuse customers.

Prioritize Relevant Indicators

Show indicators that address customer concerns for YOUR products. Apparel needs sizing help, electronics need warranty info, food needs certifications.

Use Horizontal for 3-4 Indicators

Horizontal layout with 3-4 indicators creates effective trust bar. Vertical works better for 1-2 detailed indicators with longer descriptions.

Place Strategically

Common placements: Below homepage hero, above product details on PDP, in cart before checkout. Place where trust matters most in customer journey.

Test Mobile Swipe Behavior

If using 4 indicators, test mobile swipe to ensure all indicators are easily accessible. Consider 3-second autoplay for automatic display.

​
Common Use Cases

​
Homepage Trust Bar (Below Hero)

Indicators:
  1. Free Shipping | On orders over $50
  2. Secure Checkout | 256-bit SSL encryption
  3. 30-Day Returns | Money-back guarantee
  4. 24/7 Support | Real humans, ready to help
Settings: Horizontal, Center alignment, Circle icons, Fullwidth, Default spacing Best for: E-commerce stores wanting to immediately build trust on homepage

​
Product Page Trust Indicators

Indicators:
  1. Authentic Products | 100% genuine, verified
  2. Easy Returns | 60-day return window
  3. Warranty Included | 2-year manufacturer warranty
  4. Fast Shipping | Ships within 24 hours
Settings: Horizontal, Center alignment, Circle icons, Fullwidth, Compact spacing Placement: Below product title or above Add to Cart button Best for: Building confidence before purchase decision

​
Cart Page Reassurance

Indicators:
  1. Secure Payment | Your data is protected
  2. Free Shipping | Qualified! Orders over $50
  3. Need Help? | Call us: (555) 123-4567
  4. Easy Returns | 30-day guarantee
Settings: Horizontal, Center alignment, Fullwidth Best for: Final reassurance before customers proceed to checkout

​
Sustainable Brand Values

Indicators:
  1. 100% Organic | USDA certified organic materials
  2. Carbon Neutral | Offset all shipping emissions
  3. Fair Trade | Ethically sourced, fairly paid
  4. Cruelty-Free | Never tested on animals
Settings: Horizontal or Vertical (if longer descriptions), Circle icons Best for: Eco-conscious brands highlighting certifications and values

​
Service Business Guarantees

Indicators:
  1. Satisfaction Guaranteed | Love it or your money back
  2. 5-Star Rated | 4.9/5 from 2,000+ reviews
  3. Flexible Scheduling | Book 24/7 online
  4. Price Match | We’ll beat competitor prices
Settings: Vertical or Horizontal, Left alignment, Square icons Best for: Service-based businesses (consultants, home services, repair shops)

​
Luxury Product Authenticity

Indicators:
  1. Certified Authentic | Verified by experts
  2. Certificate Included | Documentation provided
  3. Insured Shipping | Fully protected delivery
  4. Lifetime Guarantee | We stand behind quality
Settings: Horizontal, Center alignment, Circle icons, Medium spacing Best for: Luxury goods, jewelry, collectibles, high-ticket items

​
Layout Behavior

​
Desktop Layout

Horizontal Direction: 
[Icon] [Icon] [Icon] [Icon]
Title  Title  Title  Title
Desc   Desc   Desc   Desc
  • 4 equal-width columns
  • Icons aligned horizontally
  • Each indicator occupies ~25% width
Vertical Direction: 
[Icon] Title
       Description

[Icon] Title
       Description

[Icon] Title
       Description

[Icon] Title
       Description
  • Single column, stacked vertically
  • More space for descriptions
  • Each indicator full width

​
Mobile Layout

With Swipe Enabled (Default):
  • Horizontal carousel
  • One indicator visible at a time
  • Swipe left/right to see others
  • Autoplay rotates automatically (if enabled)
  • Dots/indicators show position (1 of 4)
With Swipe Disabled:
  • Vertical stack
  • All indicators visible, scroll to see
  • No carousel interaction

​
Icon Styling Effects

Default (No background):
  • Icon appears with no shape behind it
  • Minimal, clean appearance
Circle:
  • Icon centered in circular background
  • Subtle color tint (from theme palette)
  • ~60-80px circle diameter (theme-dependent)
Square:
  • Icon centered in square background
  • May have rounded corners (4-8px radius)
  • Same size as circle option (~60-80px)
  • Featured Products - Often paired with trust indicators on homepage
  • Hero - Trust indicators commonly placed below hero sections
  • Rich Text - For longer trust/guarantee explanations
  • Testimonials - Complement trust indicators with social proof
  • Footer - Add simplified trust indicators in footer

​
Technical Notes

When swipe is enabled, the section uses:
  • Touch events: touchstart, touchmove, touchend for swipe detection
  • CSS transforms: translateX for smooth sliding
  • Autoplay timer: setInterval for automatic advancement
Performance: Lightweight implementation, minimal JavaScript overhead.

​
Icon Image Handling

Icon images use Shopify’s image URL filter: 
{{ block.settings.custom_icon | image_url: width: 128 }}
Automatic optimizations:
  • Lazy loading (icons below fold)
  • Responsive sizing (smaller on mobile)
  • WebP format (if browser supports)
File size target: Under 10KB per icon for fast loading.

​
Inline Rich Text Support

Title and description fields use inline_richtext type:
  • Allowed: Bold, italic, links
  • Not allowed: Line breaks, headings, images
  • Output: Single-line formatted text
This prevents multi-paragraph descriptions that would break layout.

​
Max Blocks Enforcement

The section enforces 4-block maximum via schema: 
"max_blocks": 4
Why 4?
  • Optimal for horizontal layouts (fits desktop width)
  • Manageable on mobile (not too many to swipe through)
  • Forces prioritization (show most important factors only)

​
Responsive Breakpoints

Layout adapts at these breakpoints:
  • Desktop (1200px+): Horizontal/vertical as per setting
  • Tablet (768-1199px): May compress to 2x2 grid (theme-dependent)
  • Mobile (under 768px): Carousel (swipe enabled) or vertical stack (swipe disabled)

​
Accessibility Features

The section includes:
  • Semantic HTML: Uses <ul> for list of indicators
  • ARIA labels: Carousel has aria-label="Trust indicators"
  • Focus management: Keyboard users can tab through indicators
  • Reduced motion: Respects prefers-reduced-motion (disables autoplay)
Autoplay consideration: Users with vestibular disorders may find autoplay disorienting. Setting autoplay to 0s improves accessibility.

​
Performance Considerations

Lightweight section:
  • Icons: ~5-20KB total (4 icons × 5KB each)
  • HTML: Minimal markup (~500 bytes)
  • CSS: Shared theme styles
  • JavaScript: Only loaded if swipe enabled
Mobile performance: Fast loading, smooth swipe animation (60fps target).

​
Troubleshooting

Icons not displaying:
  • Verify images uploaded successfully (re-upload if needed)
  • Check image file isn’t corrupted (open directly in browser)
  • Ensure image file size under 5MB (Shopify limit)
  • Try different image format (PNG, JPG)
Swipe not working on mobile:
  • Confirm “Swipe on Mobile” is enabled
  • Test on actual mobile device (not desktop browser mobile view)
  • Check theme JavaScript isn’t conflicting
  • Clear browser cache and reload
Autoplay not functioning:
  • Verify interval is set to 1s or higher (0 disables autoplay)
  • Ensure swipe is enabled (autoplay only works with swipe)
  • Check browser console for JavaScript errors
  • Test on different devices/browsers
Indicators crowded/overlapping on desktop:
  • Reduce to 3 indicators if 4 feel cramped
  • Switch to vertical direction for more space
  • Use shorter titles and descriptions
  • Consider Page Width instead of Fullwidth
Text not fitting in indicators:
  • Shorten title to 2-5 words maximum
  • Reduce description to one line (5-15 words)
  • Check for very long words causing overflow
  • Test on mobile (text may wrap awkwardly)
Icons inconsistent sizes:
  • Upload all icons at same dimension (e.g., all 128x128px)
  • Ensure all icons square aspect ratio (not rectangular)
  • Use same icon style/weight across all blocks
  • Check icon style setting (circle/square may mask size differences)
Layout breaks on tablet:
  • Preview on actual tablet device
  • Check content direction setting
  • Try different section width (Fullwidth vs Page)
  • May be theme-specific CSS issue (contact theme support)
Content alignment not changing:
  • Setting only affects desktop (check on desktop screen, not mobile)
  • Hard refresh browser (Cmd/Ctrl + Shift + R) to clear cache
  • Verify you clicked Save after changing setting
  • Preview on live storefront (editor may not show all styling)