Skip to main content

How to add custom CSS styles for trust badges?

Learn how to add your own custom CSS to Trust badges.

Rashmi Verma avatar
Written by Rashmi Verma
Updated over 3 weeks ago

✅ Step 1: Open the Hoppy Trust Badge app.

1️⃣ Go to Shopify AdminAppsHoppy Trust Badge app.

2️⃣ Navigate to the Design tab and scroll down to locate the Custom CSS box.

✅ Step 2: To Create the Boilerplate (Base Structure)

3️⃣ Start by targeting the Shopify Trust Badge with the following selector:

.futureblink-trust-badge {
/* This is the main trust badge */
}

✅ Step 3: To Add Background Styling

4️⃣ Set a background color for the Trust Badge:

.futureblink-trust-badge {
background: Purple;
}
  • You can replace Purple with any color based on user preferences.

✅ Step 4: To Customize Font, Size & Text Color

5️⃣ To ensure the text looks clean and readable, apply the following styles:

.futureblink-trust-badge .title {
color: white;
font-size: 16px;
font-family: 'Arial', sans-serif;
font-weight: bold;
text-align: center;
}

  • Modify the color, font-size, and font-family values to match your brand.

  • For paragraph text inside the trust badge:

    .futureblink-trust-badge p {
    color: whitesmoke;
    }

  • For links inside the trust badge:

    .futureblink-trust-badge a {
    color: Yellow;
    text-decoration: none;
    }

✅ Step 5: To Style the Call-to-Action (CTA) Button

6️⃣ If the trust badge includes a CTA button, style it properly:

.futureblink-trust-badge .cta-button {
background: green;
color: yellow;
font-size: 14px;
font-weight: bold;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}

✅ Step 6: To Apply Complete Custom CSS

.futureblink-trust-badge {
background: linear-gradient(green,aqua);
}
.futureblink-trust-badge .title {
color: white;
background: transparent;
}
.futureblink-trust-badge .subheading{
color: white;
background: transparent;
}
.futureblink-trust-badge .cta-button{
background: black;
color: white;
}
.futureblink-trust-badge .button-prev{
background: black;
}
.futureblink-trust-badge .button-next{
background :black;
}

✅ Step 7: Save & Publish

7️⃣ Click Apply and then Save to confirm your changes.

8️⃣ Refresh your store to check how it looks!

🎉 That’s it! Your trust badge now has a custom style to match your brand! 🚀

Did this answer your question?