Sowing shipping partner incons (SVG) in the footer

Store Design
1

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:

Frede_0-1741110333755.png
Frede_0-1741110333755.png446×112 13.7 KB

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

2

I found a way already to add the icons:


      
        {%- 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)

        

        

      

    
    
      

        

        <small>© 2024-{{ 'now' | date: '%Y' }} {{ shop.name | link_to: routes.root_url }} by Dr. Frederik Franke
        </small>
        

        <small>{{ powered_by_link }}</small>
        {%- if section.settings.show_policy -%}
          

            {%- for policy in shop.policies -%}
              {%- if policy != blank -%}
                - <small>{{ policy.title | escape }}</small>
                
              {%- endif -%}
            {%- endfor -%}
          

        {%- endif -%}

The only thing is that there is now a big gap between the icons and the next line. I would be very happy if you could help me to reduce this gap.

Frede_0-1741116605098.png
Frede_0-1741116605098.png697×248 14 KB

I’m not on social media but you can send me a PM here.

Thank you very much!