How can I modify the variant picker buttons and size text on my product page?

Solved

How can I modify the variant picker buttons and size text on my product page?

kitchencrafted
Explorer
113 0 23

Hello, guys! I'd like to change the shape of the variant picker buttons like the one on the second picture and also make the 'SIZE' text bigger & bold.

 

Website: https://fddd3f.myshopify.com/

 

Mine:

Screenshot_2.jpg

How I want them to be:

Screenshot_1.jpg

Accepted Solution (1)

Guleria
Shopify Partner
3973 793 1127

This is an accepted solution.

Hello @kitchencrafted ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below:

legend.form__label {
    font-weight: 600;
}
.product-form__input input[type=radio]+label {
    border-radius: 0 !important;
}

 

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

View solution in original post

Replies 9 (9)

Guleria
Shopify Partner
3973 793 1127

This is an accepted solution.

Hello @kitchencrafted ,

 

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below:

legend.form__label {
    font-weight: 600;
}
.product-form__input input[type=radio]+label {
    border-radius: 0 !important;
}

 

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
kitchencrafted
Explorer
113 0 23

Thank  you!

HELDERWRLD
Pathfinder
150 0 8

Hello Developer,
I also did and it worked. Also, how can i remove the "Select Size" text?
https://diversusoficialsite.myshopify.com/products/signature-t-shirt?variant=47628807733576

Thank you in advance.

Guleria
Shopify Partner
3973 793 1127

@HELDERWRLD 

add this css

.product-form__input legend.form__label {
    display: none;
}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
HELDERWRLD
Pathfinder
150 0 8

Thank you so much 
It worked!

Guleria
Shopify Partner
3973 793 1127

Yes but it's hard to provide a solution for these requirements here.
I suggest hiring a developer to do it.   

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Yaz3
Visitor
2 0 0

Do you know how I can keep the color section in color instead of replacing it with text like 'Black'?

Guleria
Shopify Partner
3973 793 1127

@Yaz3 Can you please share a screenshot and a URL ?

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Yaz3
Visitor
2 0 0
No nvm, I fixed it.
Thank you !