> ## Documentation Index > Fetch the complete documentation index at: https://docs.digifist.com/llms.txt > Use this file to discover all available pages before exploring further. # Trust Indicators > Display trust badges and guarantees with icons, titles, and descriptions in horizontal or vertical layouts ## 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 Add the Trust Indicators section to templates where you want to build trust (homepage, product pages, cart) Add up to 4 indicator blocks (section comes with 4 by default) For each block, add an icon, title ("Free Shipping"), and description ("On orders over \$50") 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 seconds Controls 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 only Controls 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 only Controls 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:** Circle Applies 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:** Default Controls 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:** Compact Controls 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:** Fullwidth Controls 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. **Block Type:** Indicator\ **Limit:** Maximum 4 blocks Individual trust indicator with custom icon, title, and description. ### Block Settings **Custom Icon** (Image picker) * Upload icon image for this indicator * **Recommended size:** 64x64px to 128x128px (square) * **Format:** PNG with transparent background (SVG not supported in image picker) * **Style:** Simple, clear icons work best **Icon sources:** * Custom designed icons (brand-specific) * Icon libraries (download from Flaticon, Noun Project, etc.) * Emoji (screenshot emoji at large size, crop to square) * Theme default icons (if you leave empty, theme may use defaults) **Title** (Inline rich text) * Main heading for the indicator * **Default:** "Title of the trust indicator" * **Length:** 2-5 words ideal ("Free Shipping", "Secure Checkout") * Supports bold/italic formatting **Title examples:** * "Free Shipping" * "Easy Returns" * "Secure Checkout" * "24/7 Support" * "Price Match Guarantee" * "100% Organic" **Description** (Inline rich text) * Supporting text below title * **Default:** "Description of the trust indicator" * **Length:** 5-15 words ideal (one line, concise) * Supports bold/italic formatting **Description examples:** * "On all orders over \$50" * "30-day money-back guarantee" * "256-bit SSL encryption" * "Real humans, ready to help" * "We'll beat any competitor price" * "Certified USDA Organic" ### Creating Effective Indicators **Keep it scannable:** * Title: Benefit in 2-3 words * Description: Details in 5-10 words * Avoid lengthy paragraphs **Focus on benefits, not features:** * "Free Shipping Over \$50" (benefit) * "We Offer Shipping" (feature) **Use specific details:** * "30-Day Returns" (specific timeframe) * "Easy Returns" (vague) **Match your value proposition:** * E-commerce: Shipping, returns, secure checkout * Services: Guarantees, support, certifications * Luxury: Quality, authenticity, heritage ## Best practices Section enforces 4 maximum. Use your most compelling trust factors—free shipping, returns, support, security. More than 4 dilutes impact and creates clutter. Choose recognizable icons (truck for shipping, lock for security, return arrow for returns). Avoid abstract or overly detailed icons that don't communicate instantly. Title: 2-5 words. Description: 5-15 words. Longer text defeats "quick scan" purpose of trust indicators. Details go elsewhere. Ensure icon visually represents the indicator. Truck icon for "Free Shipping", lock for "Secure Checkout". Mismatched icons confuse customers. Show indicators that address customer concerns for YOUR products. Apparel needs sizing help, electronics need warranty info, food needs certifications. Horizontal layout with 3-4 indicators creates effective trust bar. Vertical works better for 1-2 detailed indicators with longer descriptions. Common placements: Below homepage hero, above product details on PDP, in cart before checkout. Place where trust matters most in customer journey. 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) ## Related Sections * **[Featured Products](/themes/mojave/featured-products)** - Often paired with trust indicators on homepage * **[Hero](/themes/mojave/hero)** - Trust indicators commonly placed below hero sections * **[Rich Text](/themes/mojave/richtext)** - For longer trust/guarantee explanations * **[Testimonials](/themes/mojave/testimonials)** - Complement trust indicators with social proof * **[Footer](/themes/mojave/footer/footer)** - Add simplified trust indicators in footer ## Technical Notes ### Mobile Carousel Implementation 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: ```liquid theme={null} {{ 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: ```json theme={null} "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 `