Want complete control over how your Trust Badges look on your storefront? 🎨

While the Design tab provides extensive customization options, Custom CSS gives you the flexibility to make advanced styling adjustments that go beyond the standard settings.

Whether you're refining spacing, matching strict brand guidelines, adding custom visual effects, or resolving theme-specific styling conflicts, Custom CSS provides full creative control over your Trust Badge design.

⚠️ Before You Begin

Before using Custom CSS:

• Make sure you have already created a Trust Badge.
• Have a basic understanding of CSS or access to a developer.
• Understand that Custom CSS can override standard Design settings.

💡 If you haven't created a Trust Badge yet, create one before proceeding with this guide.

🛠️ Step 1 — Open the Design Tab

Open the Hoppy Trust Badges app and navigate to the Trust Badge you want to customize.

Then:

➡️ Click the Design tab.

Scroll down until you locate the Custom CSS section.

This section contains all tools required to add and manage custom styling.

🎨 Step 2 — Open the Custom CSS Section

Inside the Custom CSS section you'll find:

• A CSS editor
• A View Guide button
• An Apply button
• A starter CSS template

The starter template contains the available selectors that can be customized for your Trust Badge.

This makes it easier to begin styling without needing to inspect storefront elements manually.

✍️ Step 3 — Add Your Custom CSS

The editor includes several pre-configured selectors that target specific Trust Badge elements.

Available Selectors

Container

Title

💡 For floating badges, the title selector uses .title instead of .fb-title.

Subheading

Icons

Call-To-Action Button

Example CSS

To add padding to the badge container and customize the title:

.futureblink-trust-badge {

padding: 20px;

}

.futureblink-trust-badge .fb-title {

color: #2c3e50;

font-size: 18px;

}

💡 You can add additional CSS selectors, media queries, animations, and styling rules as needed.

📱 Step 4 — Add Mobile-Specific Styling

To target mobile devices specifically, use the .mobile variation of the selectors.

Example:

.futureblink-trust-badge.mobile .fb-title {

font-size: 14px;

}

The app automatically wraps .mobile selectors inside a mobile media query when rendering them on your storefront.

If you prefer writing your own media queries, they will be preserved exactly as entered.

✅ Step 5 — Apply Your CSS

Once your CSS has been added:

➡️ Click Apply.

The live preview updates automatically, allowing you to review your styling changes immediately.

If you want to remove your custom styling later:

➡️ Click Reset.

This removes your Custom CSS and restores the standard Design settings.

👀 Step 6 — Review the Preview

After applying your CSS:

➡️ Review the Desktop preview.

➡️ Review the Mobile preview.

Verify that:

• Text appears correctly.
• Icons remain properly aligned.
• Spacing looks consistent.
• Buttons display as expected.

If adjustments are required:

➡️ Update the CSS.

➡️ Click Apply again.

The preview refreshes automatically after each change.

💾 Step 7 — Save and Publish

Once you're satisfied with the design:

➡️ Click Save.

➡️ Click Publish.

⚠️ Saving alone does not update the storefront.

The Trust Badge must also be published before customers can see the changes.

⚠️ Important Notes

Custom CSS Overrides Standard Settings

Custom CSS takes precedence over most Design tab settings.

If a color, spacing, or typography setting appears to be ignored, it is likely being overridden by your CSS.

Automatic \!important Handling

The app automatically adds !important priority to CSS declarations when rendering styles on the storefront.

You do not need to add !important manually.

Scoped Styling

Custom CSS is automatically scoped to the specific Trust Badge being edited.

This helps prevent styling conflicts with:

• Other Trust Badges
• Theme elements
• Other storefront components

Empty Selectors Are Allowed

You do not need to use every selector provided in the template.

Only add styles to the elements you want to customize.

CSS Validation

The editor does not validate CSS syntax.

If a style is not applying correctly:

➡️ Check selector names.

➡️ Verify braces and semicolons.

➡️ Review the CSS for syntax errors.

❓ Troubleshooting

If your styles are not appearing correctly:

➡️ Confirm that Apply has been clicked.

➡️ Verify the Trust Badge has been Saved and Published.

➡️ Check that selector names exactly match the provided template.

➡️ Test in an Incognito or Private browser window.

➡️ Refresh the storefront to clear cached styles.

🎉 Final Result

✅ Your Trust Badge can be customized beyond the standard Design settings.

✅ Branding, spacing, typography, and icon styling can be controlled more precisely.

✅ Desktop and mobile layouts can be styled independently.

✅ Custom styles remain isolated to the selected Trust Badge.

Custom CSS provides a flexible way to create a more polished and brand-consistent Trust Badge experience while retaining the simplicity of the app's built-in design tools. ✨

Updated on: 11/06/2026