Swish Docs
Go to websiteInstall now
  • Swish Documentation
  • GETTING STARTED
    • Getting Started
  • THEME EXTENSIONS
    • App Settings
    • Collection Buttons
    • Floating Wishlist Link
    • Product Page Buttons
    • Wishlist Page
  • CUSTOMIZATIONS
    • Code Editor
    • Custom Wishlist Page
    • Instant Header Link
    • Custom Colour Swatches
    • Save for Later Button
    • Wishlist Notifications
  • INTEGRATIONS
    • Swish API
    • Klaviyo Integration
      • Klaviyo Integration Setup
      • Configuring Events In Swish
      • Testing Events
      • Setting Up Klaviyo Flows
        • Wishlist Welcome Flow
        • Wishlist Reminder Flow
        • Low In Stock Flow
        • Back In Stock Flow
        • Price Drop Flow
      • Configuring Email Content
        • Flows and Events
        • Inserting A Single Product Into An Email Template
        • Inserting Multiple Products Into An Email Template
    • Google Analytics
    • Meta Pixel
    • Maestra
Powered by GitBook
On this page
  • 1. Add markup to header section
  • 2. Setup Headless Wishlist Link
  1. CUSTOMIZATIONS

Instant Header Link

Add an instantly rendering header link to your theme.

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.

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.

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.

<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.

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;
    }
  };
}
PreviousCustom Wishlist PageNextCustom Colour Swatches

Last updated 4 months ago