How to add red dot at header menu - Dawn theme Shopify

Shopify › Dawn › Theme
, ,

Before you start it

  • Dawn theme version at this post is 6.0.2
  • Duplicate your theme

Quick Look 👀

Getting started ✏️

header.liquid

  • Online store > themes > Actions > Edit code > Sections > header.liquid

  • replace code ( default code at line 437 and 482 )

1
2
3
<a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
</a>

with

1
2
3
<a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset {% if link.title contains '__red-dot' %}header__menu-item--red-dot{% endif %}"{% if link.current %} aria-current="page"{% endif %}>
    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | remove: '__red-dot' | escape }}</span>
</a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.header__menu-item--red-dot {
    position: relative;
}
.header__menu-item--red-dot:before {
    content: "";
    position: absolute;
    top: 10px;
    right: 5px;
    width: 5px;
    height: 5px;
    background-color: tomato;
    border-radius: 50%;
}

How to use

Add __red-dot after the link name you want to add red dot.