How to add trust badges to the footer of the Dawn theme?

[Ayeshali1]

Is there any code to add trust badges on the footer of the Shopify dawn theme?

[shorterlucey]

Hey! The app store has a bunch of great options to do this. A couple highly rated options are below, or you can check out the full list here (link).

https://apps.shopify.com/ultimate-trust-badge

https://apps.shopify.com/trust-badge-by-giraffly

https://apps.shopify.com/avada-boost-sales

[BSS-Commerce]

Hi @Ayeshali1

We would like to suggest you a solution below:

• Go to Admin => Online Store => Theme => Edit Code => search footer.liquid:

• Click on footer.liquid, scroll to the bottom of the page, and add the following code before the
  tag (a tip is: Ctrl + F then enter

  to search)

        

            - ### shipping charges
                    

  Flat Charges: PKR 99 on all orders

                

            

            - ### shipping charges
                    

  Flat Charges: PKR 99 on all orders

                

            

            - ### shipping charges
                    

  Flat Charges: PKR 99 on all orders

                

            

            - ### shipping charges
                    

  Flat Charges: PKR 99 on all orders

                

            
        

    

• Note add SVG tag with the image you want and edit the text content you want in the badges
• Click save in the upper right corner of the screen
• Then search for bass.css

• Select base.scss and add the following code at the bottom of the page and click save:

.bss-trust-badges-wrapper{
            width: 100%;
        }
        .bss-trust-badges-list{
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0;
        }

        .bss-trust-badges-list-item{
            display: flex;
            align-items: center;
            flex: 1 1;
        }

        .bss-trust-badges-list-item:not(.bss-trust-badges-list-item:first-child){
            margin-left: 10px;
        }

        .bss-trust-badges-list-item-icon{
            flex-basis: 40px;
            height: auto;
            display: block;
            margin-right: 10px;
        }

        .bss-trust-badges-list-item-icon svg{
            fill: #555;
            width: 100%;
            height: 100%;
        }

        .bss-trust-badges-list-item-label{
            margin: 0;
            text-transform: uppercase;
            font-size: 14px;
            color: #555;
            font-weight: 700;

        }

        .bss-trust-badges-list-item-text{
            margin: 0;
            margin-top: 5px;
            color: #888;
        }

        @media  only screen and (max-width: 750px) {
            .bss-trust-badges-list{
                flex-direction: column;
            }

            .bss-trust-badges-list-item{
                flex-direction: column;
                text-align: center;
            }

            .bss-trust-badges-list-item-icon{
                width: 3rem;
            }

            .bss-trust-badges-list-item:not(.bss-trust-badges-list-item:first-child){
                margin-top: 15px;
                margin-left: 0;
            }
        }

• Here is the result on the storefront:

I hope that it can help you solve the issue

[Nemanja_Janjic]

Hi!
The image you posted is from the TrustMark app.
You can install it here https://apps.shopify.com/trusticon-guarantees-features

Here are a few more examples of what’s available in this app.