icon and text
Page: Product Pages (Optimized for Conversions)


Snippet Code
<!-- Start: Trust Icons Section -->
<style>
.trust-section {
display: flex;
justify-content: center;
align-items: center;
gap: 85px;
padding: 20px 10px;
background-color: #fff;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
min-width: 160px;
}
.trust-icon {
width: 44px;
height: 38px;
object-fit: contain;
}
.trust-text {
display: flex;
flex-direction: column;
font-size: 17px;
line-height: 1.2;
}
.trust-text strong {
font-weight: 600;
color: #000;
}
.trust-text span {
color: #333;
font-size: 16px;
}
@media (max-width: 768px) {
.trust-section {
gap: 20px;
padding: 15px 10px;
}
.trust-item {
flex: 1 1 45%;
justify-content: center;
}
}
@media (max-width: 480px) {
.trust-section {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 20px;
justify-content: flex-start;
padding: 10px;
}
.trust-item {
flex-direction: column;
align-items: center;
min-width: 100px;
}
.trust-text {
font-size: 13px;
text-align: center;
}
.trust-text span {
font-size: 12px;
}
}
</style>
<div class="trust-section">
<div class="trust-item">
<img class="trust-icon" src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/100.png?v=1752729246"
alt="Genuine Icon">
<div class="trust-text">
<strong>100%</strong>
<span>Genuine</span>
</div>
</div>
<div class="trust-item">
<img class="trust-icon" src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/secure.png?v=1752729247"
alt="Secure Payment Icon">
<div class="trust-text">
<strong>Secure</strong>
<span>Payment</span>
</div>
</div>
<div class="trust-item">
<img class="trust-icon" src="https://cdn.shopify.com/s/files/1/0715/2340/1880/files/shipping.png?v=1752729246"
alt="Secure Shipping Icon">
<div class="trust-text">
<strong>Secure</strong>
<span>Shipping*</span>
</div>
</div>
</div>
<!-- End: Trust Icons Section -->