Debut: align custom payment icon

Aighard
Excursionist
33 0 4

Hello, i'd like to align custom "Bizum" payment icon and center the block in both, desktop and mobile. Any idea? https://aighard.com
Here's the code i added to footer.liquid (Blue bold font):

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
<div class="grid__item site-footer__payment-icons">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{% assign enabled_payment_types = 'paypal,visa,american_express,master,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
<li>

<img src="https://cdn.shopify.com/s/files/1/0252/3122/8977/t/94/assets/Bizum.png?v=1636457700"/>

</li>
</ul>
</div>
{%- endif -%}
{%- endcapture -%}

Screenshot_2021-11-09-13-20-06-47.jpg

 

Replies 7 (7)
Zworthkey
Shopify Partner
2567 309 641

hii, @Aighard 
Do you want to like this?
download (39).png
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Zworthkey
Shopify Partner
2567 309 641
.list--inline>li {
    display: inline-block;
    margin-left: 10px !important;
    margin-bottom: 0;
    vertical-align: middle;
}

@Aighard 
Add this code in theme.css or theme.scss

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Aighard
Excursionist
33 0 4

Thanks a lot for your time, but it isn't working.

dmwwebartisan
Shopify Partner
9825 2237 3078

@Aighard 

Please try this code

{%- capture payment_icon_markup -%}
{%- if show_payment_icons -%}
<div class="grid__item site-footer__payment-icons">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="payment-icons list--inline site-footer__icon-list">
{% assign enabled_payment_types = 'paypal,visa,american_express,master,maestro' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}
<li class="payment-icon">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
<li class="payment-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon--full-color">
<image xlink:href="data:;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAWCAIAAADIEsJXAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAJcEhZcwAACxMAAAsTAQCanBgAAAUUSURBVEjHpZZZbFRlFMe/aTsswSBbLRENWKgbUWSRlmGTTROIMWjgBU00GsTEGB980BeNIfHB4INEfdH4YOKLTyxBgUI77cydO3fft6EUWrojdGbaKjN3Fv/fnZK2tg2N3pzcfPd8997fOec73zkfWb16ddXxz5o0B9KoOfsMb4vqhBgRMi8hhRMSifO1nLrX8CLBO9Nlu+buMVJLkwqJ8ZVPZhRQwCI1hw9FNHeb5uC+z0zt1L1FLBgCvpxHYcICVt6hubt0t3EW3n4ztUY0AAvPDqsIWKT62Ds7dGeX4eG+QbEWsTIcCgewKkYkjPCCasG5GWFQYup5xYJZePmBPLAo7+GkvIJTFydBEiDjtsC5mPCEaOwzvaZZYHB6u+7OT8iVeMyVR+AHJYkAVN2fg2YZp27T3BdVe5s+A4/G3/BgKL4KzwE2waMPCGNARZrQcZwmy1bVaVSdTYrdpM7g3H4jtY4um1AzN9gUHmnnG0TNGhvbrbuklQX4ScncrNp/Ffx4OlvHqY1TYXsMb5NqV9I4/F94rewuzS6XyxHDJWcvQwMweD/1D53s7ntKMlfxeh2vreQ13OH3etmiZjHifASjJUHauHmcQhflaoJcYfBIBYOrDF1aVp7GiyY3qxZ43/cPnXA73k3dXCeZ+OlrVmqvQcEnu3tP9w1+2dX76Y1brzsdOzV7t25XxwTIQSu1VbWqoywYb6U6v+jqfVzQVvHq5909b1+7Qdr4UDtfQU7hbVBM8PxioVwuYvD1rb6FCalcLkXT2Uc4dSB3L533xwo+po6krn/V3YMBaU2SaAKDC3eGyfkrvw3dLtOrmCsW8vQ/JTyc+/MuIlEVF//N2xL492FHVzgmtAxnMG4Q9UyhwGZGViQV+LqMle2xsZFigVxq+3lgiPJo3FgAvuu/XRPjofmg4ya5FB0p+IVSkVxqf9O9DuUGlQZ/ejypfx913iIt7De9/RhvVJzBfD6WzmLZSFw61UOVW1STnGk+f2f4XqlU4eVLhVM9g0s5mc5qDjnbnMxmldFRcu7KszL1AQGfwqN1qyWxXaNz7yHil2Pf9g4EPBu8RGYE2fuqfQ2a45g9c5lcbGseziBe5GI7vCmWiz/0Dy1mEfwyigP5vVUZHUGqkz+iqAZUaXhTeMhpWLpJoTwxO/qK4Q37/l0/V8spWIO2dHY5S20vlEpNsnHIcGtj3PsdXdActr03HGrHQTsVvEwH5ELLzXt/9+VyAGPbjPvXkphUX2L8Wsl8WrI+6ewulugiD+d9ZOZDrDyQy/04MFT5LO3nKylw4nonudj663h2lH8ZGCTNsWdkM+vnI7oDt6LpdCKTQRg2qtaI71NlNDnBq+VVuAzfH+P1l3TvmNe5VbXXCHqlHFc6Ub2gP8op9ZJWL2pLOBlZjhCtl7FnTAxCMWEhK9VxCi28jITetCwp1wSlYCWnVqrxBA8kVF4UDnQlrPBa0XhOscCAHlZHdLdeMujuruxiSFwMBdWcKqNJwkjYXlUMihRHuyYqQIwnwZ6bUE7mzbHdVDpiCL9g0BSlJbSlKCFmoqXMtZ7N1m520nbjLEhMar+MWM2IDZKBvrFDp4IcXpIcb5n/ixcJnKPtJjA/8EysigsbFfNlegxwI+PvpJBNy4PiOTfekaMznxIMb3K7qQm8bJCtA2aqaVqvwD0cnAcewDtylOAME/r49PRfoEaTyaemmICuhAMOIjnduD2GW3c/ErMJKGD9A97ZtwP9WKeaAAAAEnRFWHRFWElGOk9yaWVudGF0aW9uADGEWOzvAAAAAElFTkSuQmCC" width="37" height="22" />
</svg>
</li>
</ul>
</div>
{%- endif -%}
{%- endcapture -%}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Aighard
Excursionist
33 0 4

Almost there! Thanks. The icon needs to be moved 5 pixels more to the right. BTW where's the image link in case i want to change it? Thanks again.

Aighard
Excursionist
33 0 4

Also, now there are more pixels between american express/mastercard than between the others.

Aighard
Excursionist
33 0 4

This is how it looks with the last code. Any idea how to move it a little bit?


imagen_2021-11-10_131855.png