How can I resize payment icons on product pages?

[tobyh4]

Hi,

I have just added the list of payment icons underneath the add to cart button on my shopify product pages, however, I want to reduce the size of the icons, so that they all fit in one row for desktop and mobile. I am only trying to change the size of the icons on the product page, not in the footer.

This is the code I have already copied from the footer.liquid onto my product page

<ul style="justify-content:center;" class="list list-payment" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-payment__item">
                  {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                </li>
              {%- endfor -%}
            </ul>

The link to my store: https://mauriciobenyar.myshopify.com/products/gala-emerald-green

Any help would be much appreciated,

Thanks in advance

[Moeed]

Hey @tobyh4

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[tobyh4]

This has put them all in one row, but they don’t actually fit within the page and there is now a white border on the right. I will attach a picture of what it looks like.

Could you help make the icons smaller so that they fit and so that the edges of the row of icons lines up with the other items on the page.

Thanks

[devmont-digital]

Hi @tobyh4

Follow the below steps:

1. Go to Online Store.
2. Edit Code.
3. Find the base.css file.
4. Add the CSS at the end of the file.

#MainProduct-template--20911263646040__main ul.list.list-payment {
justify-content: flex-start !important;
}

#MainProduct-template--20911263646040__main li.list-payment__item {
width: 34px;
}

[tobyh4]

I tried this, the problem is that they are too small on desktop and don’t fit in one row on mobile still. I will attach pictures, so you can see what I mean.

Mobile:

Desktop:

Would appreciate if you can help,

Thanks

[devmont-digital]

Hi @tobyh4

I have identified the issue. So, you have to remove the old CSS and add the new CSS

#MainProduct-template--20911263646040__main ul.list.list-payment {
justify-content: flex-start !important;
}
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 38px !important;
}

@media(max-width:1024px) {
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 34px !important;
padding: 0.5rem 0.1rem;
}
}
@media(max-width:992px) {
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 30px !important;
padding: 0.5rem 0.1rem;
}
}

@media(max-width:768px) {
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 26px !important;
padding: 0.5rem 0;
}
}

@media(max-width:749px) {
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 38px !important;
padding: 0.5rem 0.1rem;
}
}

@media(max-width:480px) {
#MainProduct-template--20911263646040__main li.list-payment__item {
width: 30px !important;
padding: 0.5rem 0.1rem;
}
}

desktop:

mobile:

[tobyh4]

Hi,

Sorry to be a pain, but I can’t seem to get it to work on desktop still, it might be because I adjusted the image sizes for that view slightly. I tried to adjust the padding and icon sizes, but can’t get it to fit.

This is what it looks like now

I am going for something like this ideally.

Would it also be possible to centre it like in the photo as well.

Thanks

[devmont-digital]

You have to replace

This code

#MainProduct-template--20911263646040__main li.list-payment__item {
width: 38px !important;
}

To this

#MainProduct-template--20911263646040__main li.list-payment__item {
    width: 32px !important;
    padding: 0.5rem 0.1rem;
}

[tobyh4]

Ok thats perfect now, what should I can add to center it

[devmont-digital]

If we center payment logos, the space on both sides will be consumed and logos will not be visible in one row.

[tobyh4]

There is space to the right of them though, because they are aligned to the left at the moment. Can’t we put them in the centre of the page, so there is an equal space on each side if you get what I mean

[devmont-digital]

Also, add this CSS

@media(max-width:749px){
#MainProduct-template--20911263646040__main ul.list.list-payment {
    justify-content: unset !important;
}
}
@media(max-width:372px){
#MainProduct-template--20911263646040__main ul.list.list-payment {
    justify-content: flex-start !important;
}
}

[tobyh4]

I added this after the previous code, but the icons are still aligned to the right, not in the centre