Header icons code

The code below will allow you to add an icon in the header that redirects to the wishlist page. Your customer will have an easy access to your

Prestige

icon.liquid

Copy the code below under the {%- case icon -%} tag.

  {%- when 'heart' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8482 21.0168C9.19102 19.8759 5.28668 16.1772 3.59901 13.4543C1.5836 10.2027 1.66699 7.42205 2.78053 5.5474C4.68111 2.34888 9.35958 1.94464 12.0001 5.58663C14.6406 1.94489 19.319 2.34863 21.2194 5.54765C22.3332 7.42231 22.4163 10.2029 20.4009 13.4546C18.6346 16.304 14.779 19.8891 12.0001 21.0818L11.8482 21.0168Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>

  {%- when 'star' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path d="M9.75 8.85L3 9.3L7.95 13.35L6.15 19.65L12 16.05L17.4 19.65L16.05 13.35L21 9.3L14.25 8.85L12 3L9.75 8.85Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>

header.liquid

Copy the code below on top of <a href="{{ routes.cart_url }}" class="relative" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}> tag.

<a href="{% if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/[WISHLIST PAGE HANDLE]">
    <span class="sr-only">{{ 'header.general.open_wishlist' | t }}</span>
    {%- render 'icon' with '[ICON]', class: 'header__nav-icon' -%}
</a>

Replace [WISHLIST PAGE HANDLE] with your wishlist's page handle and [ICON] with "heart" or "star" to select a heart or a star icon.


en.default.json

You will need to add the text description of the icon. To do that, add this line in the header -> general object:

"open_wishlist": "Open wishlist"

Note: do not forget to add this translation key in your other locale files.

Impact

icon.liquid

Copy the code below under the {%- case icon -%} tag.

    {% when 'heart' %}
      <svg role="presentation" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" focusable="false" width="{{ width | default: 22 }}" height="{{ height | default: 22 }}" class="{{ class | strip }}" viewBox="0 0 22 22">
        <path d="M11 5.49705C6.6512 0.161847 2.06048 3.95337 2 8.04009C2 14.1212 9.2792 19.1151 11 19.1151C12.7208 19.1151 20 14.1212 20 8.03865C19.9395 3.95193 15.3488 0.161847 11 5.49705Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>

    {%- when 'star'-%}
      <svg role="presentation" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" focusable="false" width="{{ width | default: 22 }}" height="{{ height | default: 22 }}" class="{{ class | strip }}" viewBox="0 0 22 22">
        <path d="M10.3318 2.64913C10.3859 2.51634 10.4784 2.40269 10.5974 2.32268C10.7164 2.24268 10.8566 2.19995 11 2.19995C11.1434 2.19995 11.2836 2.24268 11.4026 2.32268C11.5216 2.40269 11.6141 2.51634 11.6682 2.64913L13.7464 7.71624L19.3417 8.20693C19.4844 8.2195 19.6201 8.27426 19.7316 8.36422C19.8431 8.45419 19.9252 8.57529 19.9676 8.71211C20.0101 8.84893 20.0108 8.99527 19.9697 9.13251C19.9287 9.26974 19.8477 9.39165 19.7372 9.48272L15.9199 12.6174C15.8177 12.7018 15.7408 12.8127 15.6975 12.938C15.6543 13.0632 15.6463 13.198 15.6746 13.3274L16.8666 18.8549C16.8964 18.9952 16.8836 19.1411 16.8301 19.274C16.7765 19.407 16.6846 19.521 16.566 19.6015C16.4474 19.6821 16.3075 19.7254 16.1642 19.7261C16.0208 19.7268 15.8805 19.6848 15.7611 19.6054L11 16.4231L6.23885 19.6054C6.11949 19.6848 5.97918 19.7268 5.83584 19.7261C5.69249 19.7254 5.55259 19.6821 5.43399 19.6015C5.31539 19.521 5.22345 19.407 5.16991 19.274C5.11637 19.1411 5.10364 18.9952 5.13336 18.8549L6.32689 13.3274C6.35481 13.1977 6.34641 13.0628 6.30261 12.9375C6.25882 12.8122 6.18133 12.7015 6.07866 12.6174L2.26281 9.48272C2.15225 9.39165 2.0713 9.26974 2.03026 9.13251C1.98921 8.99527 1.98994 8.84893 2.03235 8.71211C2.07476 8.57529 2.15692 8.45419 2.26839 8.36422C2.37985 8.27426 2.51557 8.2195 2.65825 8.20693L8.25502 7.71624L10.3332 2.64913H10.3318Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>

header.liquid

Copy the code below on top of <a href="{{ routes.cart_url }}" class="relative" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}> tag.

<a href="{%  if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/[WISHLIST PAGE HANDLE]" class="relative tap-area">
    <span class="sr-only">{{ 'header.general.open_wishlist' | t }}</span>
    {%- render 'icon' with '[ICON]' -%}
</a>

Replace [WISHLIST PAGE HANDLE] with your wishlist's page handle and [ICON] with "heart" or "star" to select a heart or a star icon.


en.default.json

You will need to add the text description of the icon. To do that, add this line in the header -> general object:

"open_wishlist": "Open wishlist"

Note: do not forget to add this translation key in your other locale files.

Warehouse

icon.liquid

Copy the code bellow under the {%- case icon -%} tag:

  {%- when 'wishlist-heart' -%}
    <svg class="{{ icon_class }}" viewBox="0 0 24 24" fill="none">
      <path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" stroke-linecap="square" d="M16.2143 2.5C14.4143 2.5 12.8714 3.44286 11.9286 4.81429C10.9857 3.44286 9.44286 2.5 7.64286 2.5C4.81429 2.5 2.5 4.81429 2.5 7.64286C2.5 12.7857 11.9286 20.5 11.9286 20.5C11.9286 20.5 21.3571 12.7857 21.3571 7.64286C21.3571 4.81429 19.0429 2.5 16.2143 2.5Z"/>
    </svg>

header.liquid

Copy the code below under the {%- if shop.customer_accounts_enabled -%} [...] {%- endif -%} if statement.

<div class="header__action-item">
  <a class="header__action-item-link" href="{%  if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/[WISHLIST PAGE HANDLE]">
    <div class="header__action-item-content">
      <div class="header__icon icon-state">
        <span class="icon-state__primary">
          {%- render 'icon', icon: 'wishlist-[ICON]' -%}
        </span>
      </div>
    </div>
  </a>
</div>

Replace [WISHLIST PAGE HANDLE] with your wishlist's page handle and [ICON] with "heart" or "star" to select a heart or a star icon.


theme.css

Copy the code below at the bottom of the theme.css file:

.icon--wishlist-heart {
  width: 24px;
  height: 24px;
}

.icon--wishlist-star {
  width: 24px;
  height: 24px;
}

Dawn

Icons

Add the following files to your Snippets folder:


icon-heart.liquid

<svg
  class="icon"
  aria-hidden="true"
  focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  fill="none">
  <path stroke="currentColor" fill="none" fill-rule="evenodd" d="M10 4.91868L8.42921 3.35461C6.61531 1.54846 3.67434 1.54846 1.86043 3.35461C0.0465212 5.16076 0.0465223 8.08913 1.86043 9.89528L10 18L18.1396 9.89528C19.9535 8.08913 19.9535 5.16076 18.1396 3.35461C16.3256 1.54846 13.3847 1.54846 11.5708 3.35461L10 4.91868Z"/>
</svg>

icon-start.liquid

<svg
  class="icon"
  aria-hidden="true"
  focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  fill="none">
  <path stroke="currentColor" fill="none" fill-rule="evenodd" d="M7.75 7.35L1 7.8L5.95 11.85L4.15 18.15L10 14.55L15.4 18.15L14.05 11.85L19 7.8L12.25 7.35L10 1.5L7.75 7.35Z"/>
</svg>

header.liquid

Copy the code below on top of <a href="{{ routes.cart_url }}" class="relative" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}> tag.

<a href="{%  if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/[WISHLIST PAGE HANDLE]" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}" id="wishlist-icon-bubble">
   {%- render 'icon-[ICON]' -%}
   <span class="visually-hidden">{{ 'templates.wishlist.wishlist' | t }}</span>
</a>

<a href="{%  if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/[WISHLIST PAGE HANDLE]" class="header__icon link focus-inset" id="wishlist-icon-bubble">
        {%- render 'icon-[ICON]' -%}
        <span class="visually-hidden">{{ 'templates.wishlist.wishlist' | t }}</span>
      </a>

Replace [WISHLIST PAGE HANDLE] with your wishlist's page handle and [ICON] with "heart" or "star" to select a heart or a star icon.

en.default.json

You will need to add the text description of the icon. To do that, add this line in the general -> templates object:

"wishlist": {
   "wishlist": "Wishlist"
},
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles