Solved

How do I center size variant pills on the product page? Dawn Theme

SeaSideATH
Tourist
7 0 1

Hello,

 

I am trying to center the size variant pills on my product pages. I have already centered the title and price but can't figure out how to center the size selectors.

 

My store is,

SeaSide Athletics – SeaSideAthletics

And password is,

0223

Accepted Solutions (2)

theycallmemakka
Shopify Partner
1477 336 360

This is an accepted solution.

Hi @SeaSideATH 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-form__input {
    display: flex;
    justify-content: center;
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

PageFly-Amelia
Navigator
316 96 138

This is an accepted solution.

Hello @SeaSideATH 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

.product-form__input.product-form__input--pill {
   display: flex;
   justify-content: center;
}

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

View solution in original post

Replies 3 (3)

theycallmemakka
Shopify Partner
1477 336 360

This is an accepted solution.

Hi @SeaSideATH 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
.product-form__input {
    display: flex;
    justify-content: center;
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

PageFly-Amelia
Navigator
316 96 138

This is an accepted solution.

Hello @SeaSideATH 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

.product-form__input.product-form__input--pill {
   display: flex;
   justify-content: center;
}

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

ThePrimeWeb
Shopify Partner
2061 594 466

Hey @SeaSideATH,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
variant-selects fieldset.product-form__input {
    display: flex !important;
    justify-content: center !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714552776330.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!