Solved

Move the drop down arrow of variant picker

glucinth
Explorer
61 1 11

Can someone help me please how to move this arrow closer to the size variation or inside the border/rectangle please?

glucinth_0-1713282949066.png

 

Accepted Solutions (2)

DrewOswald
Shopify Partner
4 3 3

This is an accepted solution.

Hi Glucinth, looking at the code I appear to have found the problem with the dropdown's outline not being visible. The outline is getting it's color from a css variable called --color-foreground. This variable is set in your theme settings but I found a line in section-main-product.css that is overwriting that value with an improper value. This is the css rule that is overwriting --color-foreground:

img1.PNG

I recommend that you remove this css rule from section-main-product.css:

 

1. Go to your Theme > Edit Code

2. In the assets folder find section-main-product.css

3. Toward the bottom locate the css rule shown above and delete or comment it out (with Ctrl + / or Cmd + /)

4. Save

 

With regard to your other question you can style the variant picker by:

1. Go to your Theme > Customize > Theme Settings > Inputs

img5.PNG

Need a developer? Send me a DM

View solution in original post

DrewOswald
Shopify Partner
4 3 3

This is an accepted solution.

Hi Glucinth, with this css you should be able to control the width of the drop down and set --color-foreground

note: the format for --color-foreground is [0-255], [0-255], [0-255]  ex. 255, 255, 255 for white and 0, 0, 0 for black like RGB

 

.product-form__input--dropdown .select {
width: 100px;
}
.thumbnail[aria-current] {
--color-foreground: 255, 255, 255;
}

 

How to install:

1. Go to your theme > customize

2. From dropdown at the top select Product -> Default product (or the custom template your using for the product)

img7.PNG

3. Select Product information from left sidebar

4. Scroll to bottom to Custom CSS

5. Add the two css rules above and save (note: the theme editor will say the selectors don't exist which is incorrect because you'll be able to see the changes in the editor. To get past this quickly paste the css and save)

img6.PNG

Let me know if this helped

 

P.S. if it doesn't let you save you can also add the css to Theme Settings > Custom CSS

 

Need a developer? Send me a DM

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
6365 1527 1896

Hi @glucinth 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
glucinth
Explorer
61 1 11

Sure here it is

 

www.bhlclothing.com

 

Made4uo-Ribe
Shopify Partner
6365 1527 1896

Thanks for the info, Sorry but I didnt see the image that you give for example what I see is this. 

Made4uoRibe_0-1713289433178.png

Here is the instruction. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.select__select, .customer select:active {
    border: 1px solid black;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
glucinth
Explorer
61 1 11

Hello, @Made4uo-Ribe, please allow me to take this opportunity to also ask if you can share a code how to put border for sizes / variant drop down similar to the quantity number? Thank you...

DrewOswald
Shopify Partner
4 3 3

This is an accepted solution.

Hi Glucinth, looking at the code I appear to have found the problem with the dropdown's outline not being visible. The outline is getting it's color from a css variable called --color-foreground. This variable is set in your theme settings but I found a line in section-main-product.css that is overwriting that value with an improper value. This is the css rule that is overwriting --color-foreground:

img1.PNG

I recommend that you remove this css rule from section-main-product.css:

 

1. Go to your Theme > Edit Code

2. In the assets folder find section-main-product.css

3. Toward the bottom locate the css rule shown above and delete or comment it out (with Ctrl + / or Cmd + /)

4. Save

 

With regard to your other question you can style the variant picker by:

1. Go to your Theme > Customize > Theme Settings > Inputs

img5.PNG

Need a developer? Send me a DM
glucinth
Explorer
61 1 11

@DrewOswald I think this helped. But can you help me decrease the border width. I am aiming to make it as short as the QUANTITY's. I am not sure if the dropdown arrow will follow. Please see photo.

glucinth_0-1713307406652.png

 

 

glucinth
Explorer
61 1 11

Hello @DrewOswald, I figured out what's that code for. It is to remove the gray border for my product image and thumbnails. Removing the code bringing back the borders which is not really pleasant to see. But I have already solved it too utilizing the Theme Settings from your instruction as well. I just need to shorten the space of the input's border. Any recommendation from you will be highly appreciated. Thank you!

 

glucinth_2-1713308548524.png

 

 

DrewOswald
Shopify Partner
4 3 3

This is an accepted solution.

Hi Glucinth, with this css you should be able to control the width of the drop down and set --color-foreground

note: the format for --color-foreground is [0-255], [0-255], [0-255]  ex. 255, 255, 255 for white and 0, 0, 0 for black like RGB

 

.product-form__input--dropdown .select {
width: 100px;
}
.thumbnail[aria-current] {
--color-foreground: 255, 255, 255;
}

 

How to install:

1. Go to your theme > customize

2. From dropdown at the top select Product -> Default product (or the custom template your using for the product)

img7.PNG

3. Select Product information from left sidebar

4. Scroll to bottom to Custom CSS

5. Add the two css rules above and save (note: the theme editor will say the selectors don't exist which is incorrect because you'll be able to see the changes in the editor. To get past this quickly paste the css and save)

img6.PNG

Let me know if this helped

 

P.S. if it doesn't let you save you can also add the css to Theme Settings > Custom CSS

 

Need a developer? Send me a DM
glucinth
Explorer
61 1 11

Finally, you are the best! This solved and helped me adjust everything. Thank you!

DrewOswald
Shopify Partner
4 3 3

Happy to help! 😀

Need a developer? Send me a DM