Shopify themes, liquid, logos, and UX
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 -%}
.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
Thanks a lot for your time, but it isn't working.
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 -%}
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.
Also, now there are more pixels between american express/mastercard than between the others.
This is how it looks with the last code. Any idea how to move it a little bit?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024