Edit to theme.scss.liquid has broken my store!

Store Design
,

Topic summary

A user accidentally broke their Shopify store while attempting to fix a text color issue by editing theme.scss.liquid. The main problem was a base-level CSS error (“Base-level rules cannot contain the parent-referencing-selector ‘&’ at 2974”).

Initial Issue:

  • Text color conflict on account/login pages needed fixing
  • User applied a suggested fix from another forum without coding experience

What Went Wrong:

  • CSS code was mistakenly pasted into the JavaScript file (theme.js or theme.js.liquid)
  • This broke site-wide functionality, particularly menus and product pages

Partial Solution Provided:

  • A responder suggested adding CSS code to fix link colors:
form a {
    color: inherit;
}
  • The CSS issue appears resolved, but the JavaScript file remains broken

Current Status:

  • User successfully fixed the CSS portion but still needs help restoring the corrupted JavaScript file
  • The responder emphasized making backup copies before editing code and warned that menus (especially mobile) and product pages won’t work properly until the JavaScript is fixed
Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

I was attempting to fix the text colour conflict on this page and have now managed to stuff something up so my whole store is wrong. Can someone tell me how to fix the error and the original problem. I have zero coding skills, I was applying a suggested fix from another forum post. Help! I edited theme.scss.liquid

Error is main site wide. https://shop.girlguidingnwe.org.uk/

Error report is Base-level rules cannot contain the parent-selector-referencing character ‘u0026’. at 4792

Edit Ah! Never mind! I’ve fixed this top bit, but how to do I fix the below bit?

Text that wouldn’t behave is here: https://shop.girlguidingnwe.org.uk/account/login the forgot my password etc links

2

To fix these links is not difficult. The CSS code can be like this – simply add it to the very bottom of your stylesheet.

form a {
    color: inherit;
}

However, you’ve managed to break your Javascript asset, theme.js (or maybe theme.js.liquid) – you’ve pasted some CSS code there.

This is how the bottom of this file looks now:

return $.trim(attr);
};
.account a {

color: #605248 !important;

}

.login__links a {

color: #605248  !important;

}

.bttn {

background: #000 !important;

}

.bttn:hover {

background-color: gray !important;

}
$(theme.init);

This should become (hopefully, nothing was deleted)

return $.trim(attr);
};

$(theme.init);
3

Thanks so much that has sorted my problem! That’ll teach me to try and mess with code!

4

You still need to fix your javascript, otherwise neither your menus (especially on mobile!) nor your product page would work properly.

I’d say messing with the code is pretty safe as long as you make backup copies of your theme before doing this.

5

Oh no, what can I do to fix the javascript?