Payment Logos Css

[erenelemm]

  How do I center the payment logos css that I added under the add to cart button?

Thanks

[BSSCommerce-HDL]

Hi @erenelemm , Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[erenelemm]

https://wooks.co/products/easylush%E2%84%A2

[BSSCommerce-HDL]

Hi @erenelemm ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css  or styles.css

Step 3: Insert the below code at the bottom of the file -> Save

.product__info-wrapper svg[aria-labelledby="pi-visa"] {
    margin-left: 35% !important;
}

Here is result: 

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[erenelemm]

Yes, it's fixed for the computer, but on my phone it's too far to the right

[BSSCommerce-HDL]

Hi @erenelemm, Can you kindly share the details of your problem (screenshot/ record) and  with us?  What is the phone you use? We will check it and suggest you a solution if possible.

[erenelemm]

 my phone is Samsung S22

[BSSCommerce-HDL]

Hi @erenelemm Pls insert this code to your file css: 

@media only screen and (max-width: 600px) {
    .product__info-wrapper svg[aria-labelledby="pi-visa"] {
       margin-left: 28% !important;
    }
}

Here is result: 

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

[erenelemm]

a little bit more to the left, but it's still not in the center. I think we are using the same theme as this veb site, can this place help you? https://easytrimmer.store/products/easy-trimmer%E2%84%A2-sac-kirik-onarici

[BSSCommerce-HDL · Accepted solution]

Hi @erenelemm Please clear all my old code,

After insert this code to your file css : 

.custom-pm-center {
    display: flex;
    justify-content: center;
}

Next, Find file theme.liquid and Insert the below code at the bottom of the file -> Save

{% if template.name == 'product' %}
<script>
  let pm_visa = document.querySelector('svg[aria-labelledby="pi-visa"]');
  pm_visa.insertAdjacentHTML("beforebegin", "<div class='custom-pm-center'></div>");
  let custom_pm_center = document.querySelector('.custom-pm-center');
  let pm_list = document.querySelectorAll(".product__info-container svg[aria-labelledby]");
  pm_list.forEach((item) => {
    custom_pm_center.insertAdjacentElement("beforeend", item);
  });
</script>
{% endif %}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[erenelemm]

yes it works thank you so muchh ❤️

[BSSCommerce-HDL]

@erenelemm, We're happy to see that our suggestion helped you solve the issue 😍😍

[Dirk]

Hey, @erenelemm 

I'm confident one of our Shopify experts would be able to accomplish this at a reasonable price. Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

If there is anything else I can help you with, please let me know.