Need Help with Displaying Payment Icons in Xtra Theme

[EagleHunted]

Hi everyone,

I'm currently using the Xtra theme for my Shopify store and I’m trying to display payment icons on my site. The theme developers mentioned that the icons will automatically display if I’m using Shopify Payments. However, since I’m using Stripe instead, they advised me that I’ll need to modify the theme code to display the icons.

Could anyone guide me on what specific code changes I need to make, or if there’s a better way to go about this?

Thanks in advance for your help!

[htmlBurger · Accepted solution]

Hello,

The best way to do this is to add new settings in Theme settings where you can upload custom payment icons. However, for this, you'll need a developer as it is not a very straightforward job.

As a workaround, you can do the following:

1. Upload your payment icons in Store admin -> Content -> Files

2. Find where the payment icons are placed in the code. Go to Online Store -> Themes -> Edit code. Search in the footer.liquid file, they are probably placed there. You should see a code starting with this:

<ul class="l4pm box">

3. Replace the whole code starting from <ul class="l4pm box"> to </ul> with this:

<ul class="l4pm box">
  <li>
    <img width="38" height="24" src="PLACE THE URL OF THE IMAGE HERE" />
  </li>
</ul>

You need to change the `PLACE THE URL OF THE IMAGE HERE` with your actual image URL which you can get from the files section in step 1.

I hope this is helpful. If you have any trouble or you need help, just send us a private message and we'll help.

[EagleHunted]

Hi @htmlBurger 

Thank you for your response! If I may ask, will uploading a picture make the payment icons look more genuine, similar to the ones that come with Shopify Payments? Or will they appear more generic, like when using a third-party app?

I’ve done something similar before with AVADA in the Dawn theme, and it ended up looking like the attached screenshot, 

The other screenshot with the dark black background is from a different website, and I believe it uses Shopify Payments, which is why the icons look more integrated.

Thanks again for your help!

[htmlBurger]

Hi @EagleHunted 

It really depends on the images you upload.
I suggest you try to implement this and see how it looks. After that, if any updates are required we can continue from there.

However, when you make the changes, make sure you add the updates on a copy of the live theme, so if anything goes wrong your live theme is unchanged.

[EagleHunted]

Hi @htmlBurger 

Thank you for your suggestion! Would it be possible for you to provide the full code to try for the payment icons, rather than uploading an image? The theme developer only shared the Shopify documentation with me here, but I’m hoping to explore a solution with the actual code.

I really appreciate your help and guidance on this!

Kind regards,

[htmlBurger]

@EagleHunted 

Sure, please try this code:

<ul class="l4pm box">
  {%- for type in shop.enabled_payment_types -%}
    <li>
      {{- type | payment_type_svg_tag -}}
    </li>
  {%- endfor -%}
</ul>

Let me know of the outcome.

[EagleHunted]

@htmlBurger 

Thank you, I'll try it and get back to you with the outcome 

[EagleHunted]

Hi @htmlBurger 
Thank you so much for your assistance, I sent it to the person who helped me with designing my website and she used the first method.