> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Trust Badges & Icons — Design & Styling 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