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

SeaSideATH · ‎04-30-2024

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

theycallmemakka · ‎05-01-2024

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

Support Me: Buy me a Coffee

For quick response - Message Me

Ping me at: theycallmemakka@gmail.com

View solution in original post

PageFly-Amelia · ‎05-01-2024

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!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube

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

View solution in original post

theycallmemakka · ‎05-01-2024

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

Support Me: Buy me a Coffee

For quick response - Message Me

Ping me at: theycallmemakka@gmail.com

PageFly-Amelia · ‎05-01-2024

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!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube

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

ThePrimeWeb · ‎05-01-2024

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.

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!

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

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

☕Buy me a coffee☕

Community Blog Articles