I need this code in the picture below, can anyone help me?
I tried to find similar apps in the app store, but I didn’t find one I like.
Topic summary
A user seeks help adding payment badge icons with an SSL secure checkout message to their product page, similar to a reference site they found.
Solution Provided:
- Another user shares HTML and CSS code to create a payment icons section with SSL messaging
- The code includes styling for icon display, background formatting, and vertical alignment
- A lock icon is added via CSS using a background SVG image
Follow-up Customization:
- The original poster successfully implements the code but needs to replace one payment badge (VIABILL)
- They’re directed to an SVG code generator for payment method icons
- Since VIABILL isn’t available in the generator, they’re advised to upload a custom image
- The solution uses simple HTML/CSS without requiring additional applications
Outcome:
The issue is resolved successfully. The user confirms everything works perfectly after implementing the custom code and uploading their own payment badge image.
A third participant later suggests the SEOAnt Trust Badges app as an alternative code-free solution with 150+ pre-built trust and payment badges.
1 Like
sorry for this issue yes please add this code on your product page to below add to cart button
1st Add Html code
-
-
-
-
-
-
-
-
SSL Secure Checkout
2nd Add Css
.payment-icons-and-message {
text-align: center;
background-color: #f7f7f7;
padding: 17px;
border-radius: 3px;
font-size: 16px;
line-height: 1;
color: #666;
margin-top: 10px;
}
.list--inline {
padding: 0;
margin: 0;
}
.list--inline > li {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.payment-icons-and-message .icon {
vertical-align: middle;
display: inline-block;
width: 38px;
height: 24px;
fill: inherit;
user-select: none;
}
1 Like
Thank you very much for your help, I almost succeeded, please see the screenshot, the black lock in the red circle is missing, how should I add it?
Should I upload the lock image to my file?
In addition, I need to replace a few payment signs, but I can’t find how to replace them.
I don’t know if the boilerplate site uses an application or what.
thank you very much.
yes please add this css code also
.payment-icons-and-message p:before {
content: '';
background: url(https://cdn.shopify.com/s/files/1/0286/6305/4395/t/3/assets/lock.svg?153) 0 0/16px 16px no-repeat transparent;
width: 16px;
height: 16px;
display: inline-block;
margin: 0 4px 0 0;
position: relative;
top: 1px;
}
1 Like
yes you can change payment icon see svg code
https://ui-elements-generator.myshopify.com/pages/methods-of-payment
1 Like
It doesn’t seem to work, there is no place to change the SVG code, and there is no “VIABILL” on this page. Maybe I need to upload a “VIABILL” picture by myself?
1 Like
yes, sure not an issue please uplaod
1 Like
I guess this website may use a certain application?
1 Like
no its simple HTML and CSS code
1 Like
it’s my pleasure to help us
1 Like
Hi,
I noticed that you didn’t find the appropriate trust badge shopify app.
I would like to introduce SEOAnt ‑ Trust Badges & Icon . Maybe you might use it later.
SEOAnt - Trust Badges is free trust badges and icons app, code free and stable, easy to customize size for desktop and mobile devices, support to adjust badge position. We have more than 150 of the world’s most popular trust badges that can be used to increase conversions by using different payment, trust and special badges.
