HOW TO include the stripe icon with old shopify theme?

HOW TO include the stripe icon with old shopify theme?

baletti
Visitor
1 0 0

entering stripe icon with old shopify theme? I do not know how to code. but I need to show the real stripe logo in the footer of available payment options. please help! 

Replies 2 (2)

namphan
Shopify Partner
1597 199 219

Hi @baletti,

Please send the website link, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

LizHoang
Shopify Partner
154 17 33

Hi @baletti ,

You can try the below instruction:

  1. Find the class=“footer__payment” in the file footer.liquid
  2. Add the code:
<div class=“payment-box”>
                           <div class=“payment-icon margin-l”><img data-src=“{{ ‘VISA.svg’ | asset_url }}” width=“50” height=“25" viewBox=“0 0 50 25”class=“fluid-i lazyload” alt=“Visa” /></div>
                           <div class=“payment-icon margin--1"><img data-src=“{{ ‘DINNERS.svg’ | asset_url }}” style=“max-height: 32px;margin-top: 0.1rem;” width=“50” height=“25" class=“fluid-i lazyload” alt=“Dinners” /></div>
                           <div class=“payment-icon margin--1”><img data-src=“{{ ‘MASTERCARD 12.svg’ | asset_url }}” width=“50” height=“25" class=“fluid-i lazyload” alt=“MasterCard” /></div>
                           <div class=“payment-icon margin--1”><img data-src=“{{ ‘HIPERCARD 12.svg’ | asset_url }}”  width=“50” height=“25" class=“fluid-i lazyload” alt=“Hipercard” /></div>
                           <div class=“payment-icon margin--1”><img data-src=“{{ ‘AURA.svg’ | asset_url }}”  width=“55” height=“20" class=“fluid-i lazyload” alt=“Auracard” /></div>
                            <div class=“payment-icon margin-l”><img data-src=“{{ ‘ELO.svg’ | asset_url }}”  width=“50” height=“25" class=“fluid-i lazyload” alt=“Elo” /></div>
                           <div class=“payment-icon margin--1”><img data-src=“{{ ‘AMEX.svg’ | asset_url }}” style=“max-height: 32px;margin-top: 0.1rem;” width=“50" height=“25” class=“fluid-i lazyload” alt=“American Express” /></div>
                           <div class=“payment-icon margin--1"><img data-src=“{{ ‘DISCOVER.svg’ | asset_url }}”  style=“min-width: 56px;margin-top: -0.04rem;” width=“50” height=“25" class=“fluid-i lazyload” alt=“Discovercard” /></div>
                           <div class=“payment-icon margin--1”><img data-src=“{{ ‘BOLETO 12.svg’ | asset_url }}”  style=“max-height: 33px;margin-top: 0.1rem;” width=“50" height=“25” class=“fluid-i lazyload” alt=“Boleto” /></div>
                           <div class=“payment-icon margin--1"><img data-src=“{{ ‘PIX.svg’ | asset_url }}”  style=“max-height: 34px;margin-top: 0.1rem;” width=“50” height=“25" class=“fluid-i lazyload” alt=“Pix” /></div>
                        </div>
3. Upload the svg image into the asset file => Change the data-src to svg (e.g VISA.svg …)

I hope it helps. 

Best regards,
Liz
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!