Product variants style

Hi,

I would like to change the style of the products variants selection from this:

to this:

What custom CSS could I use?

Thanks in advance

On 11/11/2021 at 7:40 AM, Lily278 said:

Hi,

I would like to change the style of the products variants selection from this:

to this:

What custom CSS could I use?

Thanks in advance

Can you share link to a variant product? We can help easier

https://www.leapoesie.com/jewelry/p/bold

Thanks in advance!

On 11/14/2021 at 3:08 AM, Lily278 said:

https://www.leapoesie.com/jewelry/p/bold

Thanks in advance!

Add to Design > Custom CSS

.product-details .variant-option select {
    border: none !important;
    border-bottom: 1px solid black !important;
}
.product-details .variant-select-wrapper[data-text] {
    padding-left: 0 !important;
    padding-bottom: 5px !important;
}
.ProductItem .ProductItem-details .variant-select-wrapper:after {
    display: none;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

.product-details .variant-option select {
    border: none !important;
    border-bottom: 1px solid black !important;
}
.product-details .variant-select-wrapper[data-text] {
    padding-left: 0 !important;
    padding-bottom: 5px !important;
}
.ProductItem .ProductItem-details .variant-select-wrapper:after {
    display: none;
}

 

Thank you so much!! The result is very close to what I wanted. 

Do you know how to ensure that the two products variants selections are side by side and not one below the other?
I would also like the text to be capitalized, is that possible?
Many thanks in advance

On 11/16/2021 at 6:47 AM, Lily278 said:

Thank you so much!! The result is very close to what I wanted. 

Do you know how to ensure that the two products variants selections are side by side and not one below the other?
I would also like the text to be capitalized, is that possible?
Many thanks in advance

Capitalized or uppercase??

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-details .product-variants {
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.variant-option {
    margin-right: 20px;
}
}

12 hours ago, tuanphan said:

Capitalized or uppercase??

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-details .product-variants {
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.variant-option {
    margin-right: 20px;
}
}

 

Thank you so much! It's perfect on desktop. Do you know how to have the two products variants selections side by side on mobile too?

Yes uppercase letters  🙂

On 11/18/2021 at 10:55 PM, Lily278 said:

Thank you so much! It's perfect on desktop. Do you know how to have the two products variants selections side by side on mobile too?

Yes uppercase letters  🙂

change 768px to 1px

On 11/19/2021 at 11:09 PM, tuanphan said:

change 768px to 1px

Thank you so much! Do you know how to change to uppercase letters ?

On 11/25/2021 at 5:29 AM, Lily278 said:

Thank you so much! Do you know how to change to uppercase letters ?

try this

@media screen and (min-width:768px) {
.ProductItem-details .product-variants {
    display: flex;
    justify-content: space-between;
    width: 90%;
}
.variant-option {
    margin-right: 20px;
}
.ProductItem-details .product-variants * {
	text-transform: uppercase !important;
}
}

Hi Tuan, 

I have used your code to customise my variant dropdowns to look like this: 

Is there any way to add a little downwards pointing arrow to show that it's a drop down?

On 9/15/2023 at 4:49 PM, Ellam said:

Hi Tuan, 

 

I have used your code to customise my variant dropdowns to look like this: 

Is there any way to add a little downwards pointing arrow to show that it's a drop down?

Can you share link to this product? We can check easier

https://tortoise-saffron-fc2h.squarespace.com/play-equipment/p/style-02-hxmaf-bmdey

Password: Turtle200!

On 9/17/2023 at 8:05 PM, Ellam said:

https://tortoise-saffron-fc2h.squarespace.com/play-equipment/p/style-02-hxmaf-bmdey

 

Password: Turtle200!

I see you figured it out?

Hi, I figured out how to install the drop down, but I was wondering if it's possible to include a little arrow to indicate that there are options like this:

On 9/19/2023 at 9:11 PM, Ellam said:

Hi, I figured out how to install the drop down, but I was wondering if it's possible to include a little arrow to indicate that there are options like this:

Add this to Custom CSS

.product-details .variant-select-wrapper:after {
    display: inline-block !important;
}

Awesome, thank you!!