How can I resize payment icons on product pages?

How can I resize payment icons on product pages?

tobyh4
Excursionist
30 0 5

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 

 

Replies 12 (12)

Moeed
Shopify Partner
4403 1135 1394

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 </body> tag

<style>
.list-payment {
    flex-wrap: nowrap !important;
}
</style>

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
tobyh4
Excursionist
30 0 5

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. 

IMG_3784.png

 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
Shopify Partner
132 31 34

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;
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
tobyh4
Excursionist
30 0 5

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:

IMG_3785.png

Desktop:

image.jpg

Would appreciate if you can help,

Thanks

devmont-digital
Shopify Partner
132 31 34


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: 


Capture.PNG

 

mobile: 

Capture-1.PNG

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
tobyh4
Excursionist
30 0 5

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

IMG_3786.jpeg

 I am going for something like this ideally.

IMG_3787.jpeg

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

Thanks

 

devmont-digital
Shopify Partner
132 31 34

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;
}
 
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
tobyh4
Excursionist
30 0 5

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

devmont-digital
Shopify Partner
132 31 34

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

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
tobyh4
Excursionist
30 0 5

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
Shopify Partner
132 31 34

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;
}
}

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
tobyh4
Excursionist
30 0 5

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