# 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;
    }
  };
}
```