Liquid, JavaScript, themes, sales channels
@PeanutButter This one is best for you I think - others are welcome to help me out!
I've got my store here but the payment icons aren't working correctly. Please see my code below in the footer-1.liquid file:
<div class="t-center p-l-15 p-r-15">
{% unless shop.enabled_payment_types == empty %}
{% assign enabled_payment_types = 'visa,amex,paypal,apple_pay,google_pay' | remove: ' ' | split: 'apple_pay' %}
{% for type in enabled_payment_types %}
<a class="f-payment h-size2 icon fa fa-cc-{{ type }} fa-2x" aria-hidden="true"></a>
{% endfor %}
{% endunless %}
<div class="t-center s-text7 p-t-20">
The problem is, it is only displaying the Visa, American Express and PayPal icons at the footer of my website. I'm wanting to display 3 more but they aren't showing up. What could be causing this issue?
Best Regards,
Fourteen.
@Fourteen
hi,
Buddy
Add this code to make changes in your site.
<style>
.icon {
width: 3.125em;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
</style>
{%- unless shop.enabled_payment_types == empty -%}
<span class="visuallyhidden">Supported payment methods</span>
<ul>
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{% assign enabled_payment_types = 'visa,amex,paypal,apple_pay,google_pay' | remove: ' ' | split: 'apple_pay' %}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024