Adding Trust Build Elements on Checkout (Both Mobile & Desktop)

Step 1 - Adding TrustBuilding CSS

Open the checkout css file from assets/scss/optimized-checkout.scss place this code block at the end of the file.

// This style makes the cart section sticky.
.optimizedCheckout-orderSummary {
    background-color : white;
    border-color     : #DDDDDD;
    box-shadow       : 0 4px 8px rgba(221, 221, 221, 0.5);

    &.sticky {
        position : fixed;
        width    : 360px;
        top      : 0;
    }
}
.trust-elements--Checkout {
    display         : flex;
    flex-flow       : column nowrap;
    width           : 100%;
    place-content   : center;
    align-items     : flex-start;
    margin          : 0px auto;
    justify-content : flex-start;
    align-content   : flex-start;
    flex-wrap       : nowrap;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    div {
        flex         : 0 1 100%;
        text-align   : left;
        padding      : 10px 0 0 45px;
        margin-right : 0;
        &:before {
            background: url("../icons/check-icon.svg") center center/100% no-repeat scroll white;
            content: "";
            width: 32px;
            height: 32px;
            display: block;
            border-radius: 100px;
            position: absolute;
            margin-left: -45px;
            margin-top: 2px;
        }
        &.orders-shipped {

            background-color :  #ffffff;
            color            : #58AE20;

            &:before {
                //margin-left: -50px;
            }
        }

        &.happy-customers {
            background-color : #ffffff;
            color            : #58AE20;
            margin-right: 0;
            &:before {
                //margin-left: -46px;
            }

        }

        &.return-policy {
            background-color :  #ffffff;
            color            : #58AE20;
            &:before {
                //margin-left: -38px;
            }
        }

        .numbers {
            font-size: 24px;
            display: inline-block;
            font-weight: 600;
            width: 120px;
        }

        .context {
            font-size: 15px;
            font-weight: 500;
            position: relative;
            top: -2px;
        }
    }

}

Step 2 - Adding Trust Elements on Checkout Page

Open the checkout theme file from template/pages/checkout.html place this code block below the checkout.checkout_content code line;

<section class="cart-section optimizedCheckout-orderSummary-cartSection" id="trust-elements-item">
    <div class="trust-elements--Checkout">
        <div class="orders-shipped">
            <span class="numbers">500,000+</span>
            <span class="context">Orders Shipped</span>
        </div>
        <div class="happy-customers">
            <span class="numbers">300,000+</span>
            <span class="context">Happy Customers</span>
        </div>
        <div class="return-policy">
            <span class="numbers">30 Day</span>
            <span class="context">Return Policy</span>
        </div>
    </div>
</section>

Step 3 - Adding Scripts on Checkout Page

Open the checkout theme file from template/pages/checkout.html place this code block below the footer.scripts

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    const $window = $(window);

    const isElementInViewport = (el) => {
        if (typeof jQuery === "function" && el instanceof jQuery) {
            el = el[0];
        }
        let rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
    $(window).ready(() => {
        console.clear();
        $('#trust-elements-item').hide();
    })
    let listeners = [],
        doc = window.document,
        MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        observer;

    function DOMElementReady(selector, fn) {
        listeners.push({
            selector: selector,
            fn: fn
        });
        if (!observer) {
            observer = new MutationObserver(checkState);
            observer.observe(doc.documentElement, {
                childList: true,
                subtree: true
            });
        }
        checkState();
    }

    function checkState() {
        for (let i = 0, len = listeners.length, listener, elements; i < len; i++) {
            listener = listeners[i];
            elements = doc.querySelectorAll(listener.selector);
            for (let j = 0, jLen = elements.length, element; j < jLen; j++) {
                element = elements[j];
                if (!element.ready) {
                    element.ready = true;
                    listener.fn.call(element, element);
                }
            }
        }
    }

    $window.on('DOMContentLoaded load resize scroll', () => {

        if (window.innerWidth > 800) {
            let targetElement = $('.checkout-step--customer');
            let stickyElement = $('.optimizedCheckout-orderSummary');
            let isVisible = isElementInViewport(targetElement);
            if (!isVisible) {
                stickyElement.addClass('sticky')
            } else {
                stickyElement.removeClass('sticky')
            }
        }
        DOMElementReady('.optimizedCheckout-orderSummary-cartSection', ()=> {
            console.log('DOM Element is ready!');
            if (window.innerWidth>800) {
                $('#trust-elements-item').insertAfter('.optimizedCheckout-orderSummary section:last-child');
                $('#trust-elements-item').show();
            }else {

            }
        })

        if (window.innerWidth<800) {
            $('#trust-elements-item').insertAfter('.checkout-steps');
            $('#trust-elements-item').show();
        }
    });
</script>

On the desktop version of this feature looks like this;

On the mobile version of this feature looks like this;

That's all, Happy Hacking 🧡