Add Wishlist (or other) button on the header icon - Prestige Theme

[Vic1208]

Hello there, 

I am currently using an app for my wishslist (wishlist king) and I would like to create a button on the header next to the Account, search and cart button to redirect on the wishlist page. 
(as you can see the app provide a floating button on the bottom right but I don't really like it). 

I can't find a way to do so since this part of the header isn't accessible on the Theme customizer. (I think our developer add the different icons there when we create the website). 

In the header.liquid I can find this section (which I think is the one referring to those icons) :

{%- if shop.customer_accounts_enabled -%}
<a href="{{ routes.account_url }}" class="sm-max:hidden">
<span class="sr-only">{{ 'header.general.open_account' | t }}</span>

{%- if section.settings.show_icons -%}
{%- render 'icon' with 'account', class: 'header__nav-icon' -%}
{%- else -%}
<span class="md:hidden">{%- render 'icon' with 'account', class: 'header__nav-icon' -%}</span>
<span class="h6 link-faded md-max:hidden">{{ 'header.general.account' | t }}</span>
{%- endif -%}
</a>
{%- endif -%}

{%- if section.settings.enable_search -%}
<a href="{{ routes.search_url }}" aria-controls="header-search-{{ section.id }}">
<span class="sr-only">{{ 'header.general.open_search' | t }}</span>

{%- if section.settings.show_icons -%}
{%- render 'icon' with 'search', class: 'header__nav-icon' -%}
{%- else -%}
<span class="md:hidden">{%- render 'icon' with 'search', class: 'header__nav-icon' -%}</span>
<span class="h6 link-faded md-max:hidden">{{ 'header.general.search' | t }}</span>
{%- endif -%}
</a>
{%- endif -%}

<a href="{{ routes.cart_url }}" class="relative" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}>
<span class="sr-only">{{ 'header.general.open_cart' | t }}</span>

{%- if section.settings.show_icons -%}
{%- render 'icon' with 'cart', class: 'header__nav-icon' -%}
{%- else -%}
<span class="md:hidden">{%- render 'icon' with 'cart', class: 'header__nav-icon' -%}</span>
<span class="h6 link-faded md-max:hidden">{{ 'header.general.cart' | t }} (<cart-count>{{ cart.item_count }}</cart-count>)</span>
{%- endif -%}

I understand its a bit messy but maybe there is a way (based on this code) to add one icon and a link to redirect to the wishlist page ? 

Thanks a lot, 

Victor 

[rajweb]

Hey @Vic1208 ,

To add a wishlist icon to your Shopify header next to the account, search, and cart icons, you'll need to modify your header.liquid file. Based on the provided code,

Follow these steps:

1. Locate the wishlist URL : First, ensure you have the correct URL for your wishlist page. This URL should be available from the wishlist app you are using (e.g., Wishlist King).

2. Add the Wishlist Icon : Insert the following code snippet into the header.liquid file, placing it after the existing account, search, and cart links:

{%- if section.settings.show_wishlist -%}
<a href="{{ routes.wishlist_url }}" class="relative">
    <span class="sr-only">{{ 'header.general.open_wishlist' | t }}</span>
    {%- if section.settings.show_icons -%}
        {%- render 'icon' with 'wishlist', class: 'header__nav-icon' -%}
    {%- else -%}
        <span class="md:hidden">{%- render 'icon' with 'wishlist', class: 'header__nav-icon' -%}</span>
        <span class="h6 link-faded md-max:hidden">{{ 'header.general.wishlist' | t }}</span>
    {%- endif -%}
</a>
{%- endif -%}

Make sure to replace {{ routes.wishlist_url }}with the actual URL of your wishlist page if it's not defined in your routes. If your app provides a specific method or variable for the wishlist URL, use that instead.

3. Icon Rendering: Ensure that the "icon"snippet includes a definition for the wishlist icon. If it does not exist, you will need to create one or use a suitable icon that fits your design.

4. Translation: The {{ 'header.general.open_wishlist' }} part should correspond to a translation entry in your locale files. You may need to add the necessary text if it doesn’t exist.

5. Test the Changes: After making these modifications, save the header.liquid  file and preview your store to ensure the wishlist icon appears correctly in the header and links to the wishlist page.

If you run into any issues or need further customization, feel free to ask!

Best Regard,

Rajat Sharma

[Vic1208]

Hi Rajweb, 

Thanks for your quick answer. 

I don't have any wishlist icon in my icon.liquid Snippet, can you help me adding one ? I don't know how to create the icon. 

Also I don't really understand the thing about the routes : if i copy paste the link to the page instead of {{ routes.wishlist_url }} it won't work ? (the link is www.ekyog.com/apps/wishlist) So i put this link in the code you provide...

Thanks for your help, I'm sure we'll get to it. 

Victor 

[rajweb]

Sure, @Vic1208! Let’s walk through adding a wishlist icon to your Shopify store and addressing the routes question. I'll make it easy to follow:

Add a Custom Wishlist Icon in icon.liquid

Follow these steps:

1. Online Store > Themes > Edit Code

2. In the Snippets  folder, open icon,liquid

3. Add the following code to render a heart-shaped wishlist icon:

{% case icon %}
  {% when 'wishlist' %}
    <svg class="icon icon-wishlist" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
{% endcase %}

This SVG renders a hearticon, commonly used for wishlists.

Update the Header Code with Your Wishlist Link

you can use a direct link  instead of {{ routes.wishlist_url}}. Since your link is  "https://www.ekyog.com/apps/wishlist",  we’ll insert it directly into the header code.

Update the code I shared earlier in the header.liquid like this:

<a href="https://www.ekyog.com/apps/wishlist" class="relative">
   <span class="sr-only">Open Wishlist</span>
   {%- render 'icon' with 'wishlist', class: 'header__nav-icon' -%}
</a>

Style the Icon:

You can style the icon using CSS to ensure it fits well with the other icons:

.header__nav-icon.icon-wishlist {
  width: 24px;
  height: 24px;
  margin-left: 10px; /* Adjust spacing between icons */
  stroke-width: 2;
  color: #333; /* Adjust color to match your theme */
  transition: color 0.2s;
}

.header__nav-icon.icon-wishlist:hover {
  color: #e63946; /* Change to red on hover */
}

After making these changes:

Save both the header.liquid and icon.liquid files.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Thanks

[Vic1208]

Thanks again, 

I added the code to the icon.liquid. 

I didnt understand when you said : "Update the code I shared earlier in the header.liquid like this:" 

Whats the code i should copy paste in the header liquid ? 

Only this : 

<a href="https://www.ekyog.com/apps/wishlist" class="relative">
<span class="sr-only">Open Wishlist</span>
{%- render 'icon' with 'wishlist', class: 'header__nav-icon' -%}
</a>

Or i need to adapt the first one ? if yes i'm sorry im not really use to coding so i dont find the way to make it work. 

If you can send me the full code i should copy/paste in the header liquid it would be perfect. 

Thanks a lot,

Victor 

[rajweb]

Got it, I’ll provide the full code you need to add to your header.liquid.

Complete Code for header.liquid with Wishlist Icon:

{%- if shop.customer_accounts_enabled -%}
<a href="{{ routes.account_url }}" class="sm-max:hidden">
    <span class="sr-only">{{ 'header.general.open_account' | t }}</span>
    {%- if section.settings.show_icons -%}
        {%- render 'icon' with 'account', class: 'header__nav-icon' -%}
    {%- else -%}
        <span class="md:hidden">{%- render 'icon' with 'account', class: 'header__nav-icon' -%}</span>
        <span class="h6 link-faded md-max:hidden">{{ 'header.general.account' | t }}</span>
    {%- endif -%}
</a>
{%- endif -%}

{%- if section.settings.enable_search -%}
<a href="{{ routes.search_url }}" aria-controls="header-search-{{ section.id }}">
    <span class="sr-only">{{ 'header.general.open_search' | t }}</span>
    {%- if section.settings.show_icons -%}
        {%- render 'icon' with 'search', class: 'header__nav-icon' -%}
    {%- else -%}
        <span class="md:hidden">{%- render 'icon' with 'search', class: 'header__nav-icon' -%}</span>
        <span class="h6 link-faded md-max:hidden">{{ 'header.general.search' | t }}</span>
    {%- endif -%}
</a>
{%- endif -%}

<a href="https://www.ekyog.com/apps/wishlist" class="relative">
    <span class="sr-only">Open Wishlist</span>
    {%- render 'icon' with 'wishlist', class: 'header__nav-icon' -%}
</a>

<a href="{{ routes.cart_url }}" class="relative" {% if settings.cart_type != 'page' and request.page_type != 'cart' %}aria-controls="cart-drawer"{% endif %}>
    <span class="sr-only">{{ 'header.general.open_cart' | t }}</span>
    {%- if section.settings.show_icons -%}
        {%- render 'icon' with 'cart', class: 'header__nav-icon' -%}
    {%- else -%}
        <span class="md:hidden">{%- render 'icon' with 'cart', class: 'header__nav-icon' -%}</span>
        <span class="h6 link-faded md-max:hidden">{{ 'header.general.cart' | t }} (<cart-count>{{ cart.item_count }}</cart-count>)</span>
    {%- endif -%}
</a>

Let me know if this works perfectly.

[Vic1208]

I accepted as a solution by error, even if I think we're in the good way : 

A blank appear : 

But its not clickable and no heart shape...

[rajweb]

Now, check if it’s clickable and appears in a heart shape.

[Vic1208]

The icon we added should be between the search icon and the cart icon, thats why there is blank space there. 

The heart on the bottom is the integration of the app native (i dont want this) 

So the integration we made in the code to add a heart icon on the header which lead to the wishlist page didnt work... 

Do you know why there would be a blank ? 

[rajweb]

<nav class="header__secondary-nav" aria-label="Secondary Navigation">
  {% if section.settings.show_country_selector and localization.available_countries.size > 1 %}
    <a href="#country-selector" class="country-selector-link">
      <!-- Country Selector Content -->
    </a>
    {% assign show_country_selector = true %}
  {% endif %}

  {% if section.settings.show_locale_selector and localization.available_languages.size > 1 %}
    <a href="#locale-selector" class="locale-selector-link">
      <!-- Locale Selector Content -->
    </a>
    {% assign show_locale_selector = true %}
  {% endif %}
  
  {% if show_country_selector or show_locale_selector %}
    <div class="localization-selector">
      {% if show_country_selector %}
        <!-- Country selector dropdown -->
      {% endif %}

      {% if show_locale_selector %}
        <!-- Locale selector dropdown -->
      {% endif %}
    </div>
  {% endif %}
</nav>

This should fix the error message and prevent improper nesting issues.

[Vic1208]

I found a way to have the code without error (copy paste from backup theme) 

But the integration we made on icon.liquid and header.liquid doesnt work. 

The heart icon dont appear next to others icon on the header.