# Instant Header Link

When we inject our default header link through Code Access, there will be a slight delay before it gets rendered. This is to ensure that the app has the least possible impact on your store’s performance.

This article explains how to add an **instantly rendering Wishlist link** to your theme’s Liquid code. We then use Code Access to convert the static element into an interactive element that automatically reacts to the Wishlist data.

{% hint style="info" %}
**Liquid code modification required** 

Updating your theme’s Liquid code should be done by a theme developer. Note: These changes may get lost when you update your theme.
{% endhint %}

### 1. Add markup to header section

Use the code below to render a basic Wishlist link in your header section. You can adjust the markup and styling to your needs.

```html
<style>
  .wishlist-header-link .wkh-button {
    --icon-size: 22px;
    --icon-fill: transparent;
    --icon-stroke: #000000;
    --icon-stroke-width: 1px;
    --counter-size: 15px;

    display: flex;
    position: relative;
    padding: 16px 12px;
  }

  .wishlist-header-link .wkh-icon svg {
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: visible;
    pointer-events: none;
  }
  
  .wishlist-header-link .wkh-icon svg path {
    fill: var(--icon-fill);
    stroke: var(--icon-stroke);
    stroke-width: var(--icon-stroke-width);
    vector-effect: non-scaling-stroke;
  }
  
  .wishlist-header-link .wkh-counter {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--counter-size);
    height: var(--counter-size);
    border-radius: calc(var(--counter-size) / 2);
    font-size: 11px;
    line-height: 1;
    background: black;
    color: white;
    position:  absolute;
    top: 25px;
    right: 5px;
  }

  .wishlist-header-link .wkh-selected .wkh-counter {
    opacity: 1;
    transition: .2s opacity;
  }
</style>

<div class="wishlist-header-link">
  <a href class="wkh-button">
    <span class="wkh-icon">
      <svg viewBox="0 0 64 64">
        <path d="M32.012,59.616c-1.119-.521-2.365-1.141-3.707-1.859a79.264,79.264,0,0,1-11.694-7.614C6.316,42,.266,32.6.254,22.076,0.244,12.358,7.871,4.506,17.232,4.5a16.661,16.661,0,0,1,11.891,4.99l2.837,2.889,2.827-2.9a16.639,16.639,0,0,1,11.874-5.02h0c9.368-.01,17.008,7.815,17.021,17.539,0.015,10.533-6.022,19.96-16.312,28.128a79.314,79.314,0,0,1-11.661,7.63C34.369,58.472,33.127,59.094,32.012,59.616Z"><path>
      </svg>
    </span>
    <span class="wkh-counter">0</span>
  </a>
</div>
```

You should now see a static header link in your online store. In the next step will turn it into a dynamic link again.

### 2. Setup Headless Wishlist Link

With Code Access we turn the instant but static header link into a dynamic / interactive link that is connected to the customer’s Wishlist. It will then show the state of the Wishlist and dynamically update when the Wishlist is being interacted with.

Copy and paste the below code into the “Headless Wishlist Link” tab in Code Access.

```jsx
export function inject({ theme }) {
  theme.watch(
    {
      selector: ".wishlist-header-link .wkh-button",
    },
    (target) => {
      theme.createHeadlessComponent("wishlist-link-headless", {
        host: target,
      });
    }
  );
}

export function define({ WishlistElementHeadless }) {
  return class WishlistLinkHeadless extends WishlistElementHeadless {
    getStateConfig() {
      return {
        wishlist: true,
      };
    }

    getWishlistUrl() {
      if (this.app.settings.loginRequired) {
        return this.app.routes.accountLoginUrl;
      }
      return this.app.routes.wishlistUrl;
    }

    updated() {
      const numItems = this.wishlist ? this.wishlist.numItems : 0;

      this.host.href = this.getWishlistUrl();
      this.host.classList.toggle("wkh-selected", numItems > 0);
      this.host.querySelector(".wkh-counter").innerText = numItems;
    }
  };
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.swish.app/customizations/instant-header-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.