✅ Step 1: Open the Hoppy Trust Badge app.
1️⃣ Go to Shopify Admin → Apps → Hoppy 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! 🚀