Change size variant box style

Solved

Change size variant box style

Ébloui
Excursionist
24 1 6

6C53279B-5724-40C6-BF0B-BA1AE7E09742.png

Hi I would like to change my size variant box on the product pages. It looks like this now. But I want it like this:

9AF1A6D3-BE5F-44DD-A8C3-E788DB586C98.jpeg

 Is there a code for this? Website: www.ebloui-jewellery.com PW: ebloui

 

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
995 335 396

This is an accepted solution.

Hi @Ébloui, Please add this code to your css file: 

.product-form__input .select:after,
.product-form__input .select:hover.select:after,
.product-form__input .select__select:focus,
.product-form__input .select__select:focus-visible
{ 
    border-radius: 0 !important;
}

Here is result: 

BSSCommerceHDL_0-1718300335583.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
995 335 396

Hi @Ébloui
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_1-1718292249642.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_2-1718292254264.png

Step 3: Insert the below code at the bottom of the file -> Save

 

 

.product-form__input .select .select__select { 
    font-weight: bold !important;
}

 

 

Here is result: 

BSSCommerceHDL_0-1718292233026.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Ébloui
Excursionist
24 1 6

But can you also change the box style to rectangular? Mine is round on the edges. I would like to change that

BSSCommerce-HDL
Shopify Expert
995 335 396

This is an accepted solution.

Hi @Ébloui, Please add this code to your css file: 

.product-form__input .select:after,
.product-form__input .select:hover.select:after,
.product-form__input .select__select:focus,
.product-form__input .select__select:focus-visible
{ 
    border-radius: 0 !important;
}

Here is result: 

BSSCommerceHDL_0-1718300335583.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Ébloui
Excursionist
24 1 6

thank you very much. It already looks much better. But one more question, can you maybe make the size variant box longer to the right that it is as long as the product title. And also resize the size variant text (18 Inch) to a little smaller size. And the same with the title of the size variant box, make the title bold, a little smaller and add a : behind SIZE. Maybe a little to much but if you can help out with all of them or one would be a big help. Thanks!