How can I change the text color in my 'add to cart' drop down?

Store Design
, ,

Topic summary

Main issue: The “Add to cart” dropdown text appears as a faded white and is hard to read; the desired color is #F5F5F5.

Proposed approach: Change the theme’s CSS to set the text color.

  • Use browser developer tools (Inspect) to find the exact CSS selector for the dropdown’s “Add to cart” text.
  • Add a CSS rule to set color: #F5F5F5 (example provided uses !important to override existing styles).

Example (placeholder selectors):

  • .dropdown-selector .add-to-cart-button { color: #F5F5F5 !important; }

Where to apply:

  • Shopify Admin → Online Store → Themes → Actions → Edit code → Assets → theme.css (or similar).
  • For Dawn theme: Assets → base.css, add code at the bottom.

Notes and context:

  • Screenshot attached illustrates the readability issue; exact selectors will vary by theme.
  • CSS (Cascading Style Sheets) controls visual styles; selectors target specific elements.

Status: No confirmation of fix yet; guidance provided. Key open point: identifying the correct selector in the user’s specific theme before applying the rule.

Summarized with AI on January 3. AI used: gpt-5.
1

Please see image. The font color in the drop down “add to cart” is a faded white color and very hard to see. I would like the color to be #F5F5F5, so it matches the rest of the font color on my website.

If someone could tell me what code is needed and where to paste it would be awesome.

Screenshot 2024-03-13 2112051.png
Screenshot 2024-03-13 2112051.png532×355 24.7 KB

2

Hello @Trentoss ,

To change the font color of the “add to cart” text in the dropdown to #F5F5F5, you’ll likely need to modify your theme’s CSS. Here’s how you can do it:

  1. Identify the CSS selector for the “add to cart” text in the dropdown. You can use your browser’s developer tools (usually accessible via right-click → Inspect) to find the appropriate selector.

  2. Once you’ve identified the selector, you can add a CSS rule to change the color to #F5F5F5.

Here’s an example of what the CSS code might look like:

/* Change font color of "add to cart" text in dropdown */
.dropdown-selector .add-to-cart-button {
    color: #F5F5F5 !important;
}

  1. After you’ve identified the selector and added the CSS rule, you’ll need to paste it into your theme’s CSS file. You can usually access this file through your Shopify admin dashboard under “Online Store” → “Themes” → “Actions” → “Edit code” → “Assets” → “theme.css” or a similarly named file.

  2. Once you’ve located the CSS file, paste the CSS rule at the end of the file or in the appropriate section based on your theme’s organization.

  3. Save the changes, and the font color of the “add to cart” text in the dropdown should now be #F5F5F5.

Make sure to test the changes on your live site to ensure they have the desired effect. If you encounter any issues or need further assistance, feel free to ask!

If your are Working in a Dawn Theme then
Follow this Path:
Go to the Online Store-> Theme-> Edit code-> Assets> base.css → Add code at the bottom.

2 Likes