How to add a subtle hover effect on circle menu buttons in Dawn theme?

Store Design
, , , , ,

Topic summary

Goal: add a subtle, non-distracting hover effect to circular menu buttons in the Dawn theme (used with a circle menu app).

Proposed solution (CSS-based):

  • Create a new stylesheet: Assets > Add a new asset > blank file > CSS > name it custom.css.
  • Include it in theme.liquid right after base.css using: {{ ‘custom.css’ | asset_url | stylesheet_tag }}.
  • Add this rule in custom.css to show a calm hover border on images: ■■■■■■■■■■■■■■■■■■ a:hover img { border: 5px solid #512260 !important; }.

Outcome:

  • The original requester confirmed the effect works exactly as desired.
  • Another participant reported it did not work on their Dawn setup (no further details provided), so applicability may vary.

Notes:

  • Screenshots and the code snippet are central to following the setup.
  • No final design color guidance was established beyond matching the theme; the example uses a #512260 border.

Status: Resolved for the requester; partially unresolved for at least one other user who experienced issues.

Summarized with AI on December 12. AI used: gpt-5.
1

Hello i have added a circle menu app, but i want to have a hoover who is working. The deal is i want the circles can be hover, a effect who is not being disturbing to look at. Calm effect somehow.

Can that being arranged, i will be very grateful indeed. : )

Also, any design ideas for the circles like colors and so on? I want it flat and matched with the theme. :slightly_smiling_face:

Storeurl:

www.dekanten.no

See attached image:

Hovereffect.png
Hovereffect.png2470×938 97.8 KB

2

Hi @Dekanten you can try using the code below.

  • Go to the edit code > Assets > Add a new asset

aldy_expatify_0-1710817650214.png
aldy_expatify_0-1710817650214.png297×143 4.46 KB

  • Create a blank file > Choose extension css > add the file name custom

aldy_expatify_1-1710817714311.png
aldy_expatify_1-1710817714311.png644×413 13 KB

  • Go to the theme.liquid

aldy_expatify_2-1710817736185.png
aldy_expatify_2-1710817736185.png309×194 6.01 KB

  • Find the code {{ ‘base.css’ | asset_url | stylesheet_tag }} and then put the code below after the base.css

{{ ‘custom.css’ | asset_url | stylesheet_tag }}

aldy_expatify_3-1710817835148.png

  • Go to the custom.css again and put this code

aldy_expatify_4-1710818145433.png
aldy_expatify_4-1710818145433.png448×216 12.2 KB

.■■■■■■■■■■■■■■■■■ a:hover img {
    border: 5px solid #512260 !important;
}
2 Likes
3

Hello

This works like a charm just as what i wanted, this is a miracle come true. :slightly_smiling_face:

THANK U SO MUCH, IM GRATEFUL WITH THIS SOLUTION. :slightly_smiling_face:

2 Likes
4

I will try on Dawn Theme But Not working in my case