Changing colour of one menu item

Shopify Discussion

Topic summary

Topic: Changing the color of a single menu item in a Shopify Studio theme.

  • Initial request: The store owner wanted one menu item to appear in a different color. They shared their URL and specified the target item as “New In.”
  • Solution provided: A CSS-based approach with steps:
    1. Online Store > Themes > Edit Code
    2. Open base.css/theme.css
    3. Add a CSS selector targeting the menu link href “/collections/all-new-in” to set background and text color.
  • Outcome: The solution worked; the owner confirmed and thanked the helper.

New developments:

  • The owner later asked to change the “Christmas” menu item color, noting it links to a page (not a collection), and requested guidance. No solution posted yet.
  • Another user requested help, stating they couldn’t change color on their principal collection and also want to change a “Black Friday Sale” text on the first image. They shared their URL and screenshots.

Status: Resolved for the “New In” item; follow-up requests (page-linked “Christmas” item and another store’s needs) remain open. Images/screenshots were shared to illustrate results and issues.

Summarized with AI on December 14. AI used: gpt-5.
7

Hi @minty123 ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.list-menu a[href="/collections/all-new-in"].list-menu__item {
    /* You can adjust this value to change the color of the item */
    background: #eee;
    /* You can adjust this value to change the color of the text */
    color: #000;
}

Here is the result

BSSTekLabs_0-1721910911289.png
BSSTekLabs_0-1721910911289.png2850×556 33.4 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

2 Likes