Solved

How do I get my variant boxes to become the same size?

ampador
Excursionist
15 0 3

Hello, 

 

I am wondering how I am able to get my variant boxes (size, color, quantity) on my product page, the same length and size as the "add to cart" and "buy it now" boxes that are right below them. 

 

Is there some sort of code that can be sent to me, so i can add? 

 

Please look at my photo for referece, 

 

Thank you!

 

 

Screenshot 2024-04-14 at 2.37.35 PM.png

Accepted Solution (1)
PageFly-Noah
Astronaut
1119 201 220

This is an accepted solution.

Hi @ampador  Iam sorry for delay, I have seen vinsinfo help you set full width of input. and you want more set text small center. you can add code here to set text small to center, please add code in file theme.liquid and above tag </head>:

<style>
.product-form__input:nth-child(1) .select__select{
    text-align: center !important;
}

</style>

Or if you want set text small and purple of color to center please add code here:

<style>
.product-form__input .select__select{
    text-align: center !important;
}
</style>

Thank you so much.

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.

View solution in original post

Replies 9 (9)

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

 

Best regards,

Noah | 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.

ampador
Excursionist
15 0 3

my website url is : www.ampador.com

 

 

 

ampador
Excursionist
15 0 3

I have a password on it, the password is : Ampador2020! if needed 

PageFly-Noah
Astronaut
1119 201 220

This is an accepted solution.

Hi @ampador  Iam sorry for delay, I have seen vinsinfo help you set full width of input. and you want more set text small center. you can add code here to set text small to center, please add code in file theme.liquid and above tag </head>:

<style>
.product-form__input:nth-child(1) .select__select{
    text-align: center !important;
}

</style>

Or if you want set text small and purple of color to center please add code here:

<style>
.product-form__input .select__select{
    text-align: center !important;
}
</style>

Thank you so much.

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.

ampador
Excursionist
15 0 3

Great, it worked.

 

I truly appreciate your help with all of my inquiries! 

PageFly-Noah
Astronaut
1119 201 220

Thank you. No Problem , Have a nice day 😉 !

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.

Vinsinfo
Shopify Partner
268 96 87
@ampador Please follow the below steps to change the length of the variant boxes. Let me know whether it is helpful for you.
 
1. Go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Go to product page and click "Product information" section like in the below attached screenshot.
Vinsinfo_2-1713165992325.png

 

4. Locate "Custom CSS" field and paste the below CSS code like in the below attached screenshot.

 

.quantity {
    width: 100% !important;
}
.product-form__input .select {
    max-width: 100% !important;
}

 

Vinsinfo_3-1713166001540.png

 

5. Then the final output will be like,
Vinsinfo_4-1713166464321.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
ampador
Excursionist
15 0 3

Thank you very much, it worked!

One last question, do you know how I can center the the word "small" inside of the "sizes" box. 

I have added a picture for reference, the size box where it says "small" is there anyway I can center that? Because now, it located in the left size of the box.

 

Thank you in advance!

 

 

Screenshot 2024-04-15 at 1.43.57 AM.png

Vinsinfo
Shopify Partner
268 96 87

@ampadorGlad to hear that our solution works for you! Please provide your support by click "Like" and "Accepted" for the previous solution.

 

Please follow the below steps to center the text in the variant boxes. Let me know whether it is helpful for you.

1. Follow the first 3 steps mentioned in the previous comment.
2. Then paste the below code in the "Custom CSS" field in addition to the existing code like in the below attached screenshot.

 

variant-selects .select__select option {
    text-align: center !important;
}

 

Vinsinfo_0-1713190674257.png

 

3. Then the final output will be like,
Vinsinfo_1-1713190677989.png

 

 
Please provide your support by click "Like" and "Accepted" if this solution works for you. Thanks for your support.