A space to discuss online store customization, theme development, and Liquid templating.
This is how it looks like right now. I want the trust badges and text to be spread out evenly along the page width. Thank you.
footer.liquid
<div class="product-reasons">
<ul class="res_ul">
<li>
<img src="image1 url"
width="120px" height="105.7px">
<span>FREE DELIVERY</span>
<p>For orders over $50</p>
</li>
<li>
<img src="image2 url"
width="120px" height="105.7px">
<span>15 DAYS RETURNS</span>
<p>No questions asked</p>
</li>
<li>
<img src="image3 url"
width="120px" height="105.7px">
<span>SECURE PAYMENT</span>
<p>100% Safe checkout</p>
</li>
<li>
<img src="image4 url"
width="120px" height="105.7px">
<span>24/7 SUPPORT</span>
<p>Dedicated support</p>
</li>
</ul>
</div>
theme.scss
.res_ul li span{display: block; font-size: 20px; font-weight: 600;}
.product-reasons ul{list-style: outside none none; margin: 0 auto; padding: 0; display: flex; max-width: 1050px;}
.product-reasons{text-align:center;}
.product-reasons ul>li{display: inline-block; margin-bottom: 10px; text-align: center; vertical-align: top;}
@media only screen and (max-width:480px){.product-reasons ul>li{width:45%;}.product-reasons ul{display:block;}}
If your trust badges look cheesy or like they don't belong in the checkout, Typically these services will give you either an image file (unlikely) or javascript your site seal, and then paste this into a new text widget in your footer: figure out how it's outputting that button as the template may be overridden.
I hope this answer will help!
hello @Mang_Yu
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.