Collection menu hover effect - Athens theme

Store Design
, ,

Topic summary

A user seeks to add a hover background color effect to their collection menu items, similar to the product hover effects on their Athens theme store. They want this styling to apply only to specific menu elements.

Solution Provided:

  • Access theme code editor via Online Store → Theme → Edit code
  • Locate the theme.liquid file
  • Insert custom CSS code before the closing </body> tag

The GemPages support team provided step-by-step instructions with code markup (though the specific CSS code appears corrupted in the conversation). The user confirmed the solution worked successfully, and the issue is resolved.

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

Hello,

Is it possible to change the color hover background of the collection menu (attached in ss) just like the product hovers? I only want it to affect these 2.

shop- artgex.myshopify.com

pass-Superpowers123

Screen Shot 2022-12-07 at 12.35.23 PM.png
Screen Shot 2022-12-07 at 12.35.23 PM.png268×470 24.3 KB

Screen Shot 2022-12-07 at 12.36.44 PM.png
Screen Shot 2022-12-07 at 12.36.44 PM.png108×106 982 Bytes

2

Hello @David123123

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste below code before :

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

Thanks for the help!

4

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team