How can I resize and align payment icons on the product page?

[pasqualotto]

Hey Guys!

I want to display the Payment Icons that are in the footer on the product page (under the add to cart button) as well to add more trust. What I did is copy the footer code and paste it in the product-template code. Now it looks like this:

What I want to do is to change the size of the payment icons - make them smaller - so that the icons fit into one line (on desktop and on mobile).

This is the code from the footer (using the envy theme):

 <div>
                <ul id="footer-payment-methods" class="inline-list payment-icons">
                                {% for type in shop.enabled_payment_types %}
                                    <li>{{ type | payment_type_svg_tag: class:'payment-icon' }}</li>
                                {% endfor %}
                            </ul>
                </div>

The id "footer-payment-methods" is responsible for the size. Tried to modify it in the theme.css but the size still does not change.

And another thing: Looks like the payment icons in the screenshot are not centered, but slightly off. Would be nice if we can correct this, too.

Does anyone have an idea how to change or add a code to make it work?

Your help is much appreciated, thanks in advance!

[PageFly-Victor]

Hi @pasqualotto !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation

Please share Page URL so that I can inspect and send code accordingly

Best Regards;

PageFly

[pasqualotto]

Hey there!

This is the shop:

https://themanhimself.de/

Thanks!

[pasqualotto]

Hey there!
Quick question: Did you have the time to look into it?

Best,
Pasquale