Product Info Section

Boost your product page conversions with this optimized Product Info section! This Liquid snippet adds urgency, trust signals, and key product information in a sleek, user-friendly format.

Features Included:

✅ Sales Counter – Show the number of items sold today for social proof.
✅ Refund & Delivery Info – Build trust with clear refund and shipping details.
✅ Scarcity Indicator – Display a reassuring money-back guarantee with a claim rate.
✅ Secure Checkout Badge – Increase customer confidence with a protected payment badge.
✅ Money Back Guarantee Badge – Increase customer confidence with a money back Guarantee.

                <script src="https://unpkg.com/@phosphor-icons/web"></script>

<style> 
.info-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #f5f5f5;
    box-shadow: 5px 7px 20px 0px #0000000d;
}
.info-box, .extra-info div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
}
.info-box, .extra-info b {
    color: #000;
}
.info-box i {
    font-size: 20px;
    color: #000;
}
.extra-info i {
    font-size: 30px;
    color: #000;
}
.extra-info {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 10px;
    padding: 0px 20px;
}
@media (max-width: 768px) {
    .info-section {
     display: flex;
     justify-content: space-around;
    }
 .extra-info {
     display: flex;
     gap: 0px !important;
     padding:0px 5px;
    }
.extra-info div {
    gap: 8px;
    font-size: 12px;
    line-height: 14px;
}
.extra-info i {
    font-size: 20px;
    color: #000;
}
.info-section { 
    padding: 15px 10px;
}
.info-box, .extra-info div {
    font-size: 10px;
}
.info-box i {
    font-size: 16px;
    color: #000;
}
}
</style>

<div class="info-section">
    <div class="info-box">
        <i class="ph ph-package"></i>
        <span>Sold Today: <b>85 Qty</b></span>
    </div>
    <div class="info-box">
        <i class="ph ph-arrow-counter-clockwise"></i>
        <span>Refund In: <b>30 Days</span></b>
    </div>
    <div class="info-box">
        <i class="ph ph-truck"></i>
        <span>Delivery In: <b>5 Days</b></span>
    </div>
    <!-- Ensuring these two are inline -->
    
    </div>
<div class="extra-info">
        <div class="guarantee">
            <i class="ph ph-shield-check"></i>
            <span><b>Less than 1%  </b>claim our Money Back Guarantee</span>
        </div>
        <div class="protected-payment">
            <i class="ph ph-lock"></i>
            <span><b>Protected Payment</b> fully secured transaction system</span>
        </div>
</div>

How to Use

1️⃣ Copy the Liquid snippet above.
2️⃣ Paste it inside your Theme Customizer > Custom Liquid module in Shopify.
3️⃣ Adjust the HTML+CSS code by your needs

Shipping Info + Customer Country

Dynamic Product Info Tabs

Product Info Section