Problem with transparent variants

Store Design
, ,

Topic summary

A user encountered an issue where product variant dropdown options appeared transparent on their Shopify store, making them difficult to see. The options only became visible when clicked.

Initial Troubleshooting:

  • Support requested store URL and password for investigation
  • Store identified as forgeofpower.com

Solution Provided:
Support suggested adding CSS code to modify the variant selector’s appearance:

  • Target file: style.scss.css or base.css
  • Key CSS property: color: #000; (customizable to any color)
  • Additional styling included border, padding, and display properties

Resolution:
The user initially experienced a page crash when adding the code to style.scss.css. However, after removing an extra space in the code, the solution worked successfully. The user confirmed the fix resolved the transparency issue, making the variant options properly visible.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi, I have a problem with the variants section, which seems to be constantly transparent, but when I click on it, the options pop up. How can I make it more visible?

https://imgur.com/a/zRqn6c2

2

Hello @adrianovsky , Please share your store URL and password.So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

3

forgeofpower.com with password : towcko

4

Hello @adrianovsky , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your style.scss.css CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.section_single-product .single_product__options select {
    color: #000; /* add this new css of color, add any color you want */
    width: 100%;
    height: 34px;
    display: block;
    vertical-align: top;
    padding: 6px 10px;
    background: none;
    border: 1px solid #ac6969;
    cursor: pointer;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

See the screenshots below,

Screenshot from 2024-08-23 14-09-32.png
Screenshot from 2024-08-23 14-09-32.png1840Ă—909 258 KB

Screenshot from 2024-08-23 14-10-03.png
Screenshot from 2024-08-23 14-10-03.png1840Ă—909 149 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

2 Likes
5

I added this code to the end of style.scss.css making the page crash.

https://imgur.com/a/W8HC0fB

//edit

It actually worked, thank you.

6

@adrianovsky , Remove that changes and revert to that original, Please add this CSS in your base.css file or else in the head tag of the theme.liquid file.

.section_single-product .single_product__options select {
    color: #000 !important; /* add this new css of color, add any color you want */
}
7

I don’t have a base.css file, but the first change helped. I don’t know why it worked that way, but I removed one space in the code and that was enough.

1 Like