How to Align and place these liquid section under the buy button?

[Lucas1200]

I added a size chart and payment method section to the product page. But I can’t get the payment section to align nicely under the buy button.

My store id is: 2e208a.myshopify.com

[topnewyork]

Hi @Lucas1200 ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

Or the below code:

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[dws_pvt_ltd]

Hello! @Lucas1200 , Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your section file.
5. open “main-product.liquid”
6. Add the following code at the end of the file.

product-info .ss-payment-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 0;
}
product-info .ss-payment-text {
    width: 100%;
    text-align: left;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[Sweans]

Hi @Lucas1200 ,

Please add the CSS code in the theme stylesheet.

Style1:

=====

.ss-payment-list {
  width: 100%;
  justify-content: flex-start;
}
.ss-payment-text {
  text-align: left;
}

Result:

====

Style2:

=====

.ss-payment-list {

  width: 60%;

}

Result:

====

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Lucas1200]

Thanks! I want style 2. It works for the text but the icons are still aligned left… How to fix that?
See image below:

[dws_pvt_ltd]

Hello! @Lucas1200, Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your section file.
5. open “main-product.liquid”
6. Add the following code at the end of the file.

product-info .ss-payment-text {
    text-align: left;
}

[Sweans]

Hi @Lucas1200 ,

Please replace the old CSS code with the new one and let us know.

.ss-payment-list {
    width: 100%;
    max-width: 44rem;
 }

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Lucas1200]

Nothing changes.. I think I have some kind of extra CSS code that is holding the icons left?

[Sweans]

Hi @Lucas1200 ,

We have checked the website and understood that the code doesn’t update properly.

Please replace or add the new CSS code. So the text and icons should be displayed in the center.

Code:-

.ss-payment-list {
    width: 100% !important;
    max-width: 44rem !important;
 }

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Lucas1200]

Still doesn’t change anything