Move the drop down arrow of variant picker

[glucinth]

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

[DrewOswald · 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:

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

 

[Made4uo-Ribe]

Hi @glucinth 

Would you mind to share your store URL? Thanks!

[glucinth]

Sure here it is

www.bhlclothing.com

[Made4uo-Ribe]

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

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!

[glucinth]

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 · 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:

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

 

[glucinth]

@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]

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!

[DrewOswald · 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)

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)

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

[glucinth]

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

[DrewOswald]

Happy to help! 😀