Shipping partner icons (SVG) in footer

[Frede]

Dear all,

I have created SVG-icons for the shipping partners we have. Now I want to display these two icons in the same size as the icons of our payment partners in the footer of our shop but in a new line below the payment partners.

Her are the two icons:

DHL: https://cdn.shopify.com/s/files/1/0872/9149/4724/files/DHL.svg?v=1741108513

DPD: https://cdn.shopify.com/s/files/1/0872/9149/4724/files/DPD.svg?v=1741108514

You find our website here: https://bhgfrp-rx.myshopify.com/

Here I want to show the two icons:

Here is the footer code section from our footer.liquid (dawn theme) that displays the payment partners:

<div class="footer__column footer__column--info">
        {%- if section.settings.payment_enable -%}
          <div class="footer__payment">
            <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
            <ul class="list list-payment" role="list">

              {% assign enabled_payment_types = 'paypal,klarna,master,visa,american_express' | remove: ' ' | split: ',' %}
              {% for type in enabled_payment_types %}
          
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        {%- endif -%}
      </div>

Can you please help me changing the code in a way that the two icons of the shipping partners are displayed in the same size as the icons of the payment partners in a new line below the payment partner icons.

Thank you so much for your support

[Ben310]

Try:

    {%- if section.settings.payment_enable -%}
        

            {{ 'sections.footer.payment' | t }}
            

                {% assign enabled_payment_types = 'paypal,klarna,master,visa,american_express' | remove: ' ' | split: ',' %}
                {% for type in enabled_payment_types %}
                    - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                    
                {%- endfor -%}
            

        

    {%- endif -%}

    
    
        Shipping Partners
        

            - 

            - 
        

    

Some CSS:

.footer__shipping {
    margin-top: 15px;
    text-align: center;
}

.list-shipping {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.list-shipping__item img {
    display: block;
    width: 38px;
    height: 24px;
}

[Frede]

Thank you Ben! I can replace the code by the code you posted but this is not working yet. What do I have to do with the CSS code from the second window?

[Frede]

Okay, I tried a little bit around and found a way how to do it:

        {%- if section.settings.payment_enable -%}
          

            {{ 'sections.footer.payment' | t }}
            

              {% assign enabled_payment_types = 'paypal,klarna,master,visa,american_express' | remove: ' ' | split: ',' %}
              {% for type in enabled_payment_types %}
          
                - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                
              {%- endfor -%}
            

          

        {%- endif -%}
        

          
![DHL|912x576](upload://vqEYgD6lTN4sklM417bOtWFHSEn.svg)
 
          
![DPD|912x576](upload://g2CsgRV13D0HTgVsRs9mf68ntDY.svg)

        

      

However, that increases the gap between the shipping partner icons and the next line which I do not want? How can I decrease the gap again?

[Nordalux]

          
![DHL|912x576](upload://vqEYgD6lTN4sklM417bOtWFHSEn.svg)
 
          
![DPD|912x576](upload://g2CsgRV13D0HTgVsRs9mf68ntDY.svg)

        

Das ist der entsprechende Code.

[Frede]

Danke Nordalux! Dadurch sind die Icons und die folgende Textzeile tatsäcklich ein Stückchen näher zusammengerutscht. Ziel wäre es aber, dass der Abstand zwischen Icons und folgender Textzeile genauso groß ist, wie der Abstand zwischen der folgendne Textzeile und der letzten Teile mit den Links zu den AGBs usw. Das ist leider noch nicht der Fall. Vielleicht hat noch jemand eine Idee, wie ich den Abstand noch weiter verringern kann?