> For the complete documentation index, see [llms.txt](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/developer-reference/new-customer-accounts.md).

# Shopify New Customer Accounts

When using Shopify New Accounts, Shopify's default behaviour is to return users to their account page after login, and if the login is part of our wishlist add to cart flow, your users will have a disjointed experience.

In addition, redirects can also occur with Shopify New Customer accounts if website visitors leave your webpage open in their browser for an extended length of time after they leave. In this case, the wishlist icon in the website header may redirect them to the account page.

To avoid these issues, you can implement the following:

Note - it may also be helpful to refer [Using 3rd-Party merchandising systems with The Wishlist](https://github.com/The-Wishlist-Co/twc-api-specs/blob/main/docs/shopify/!using-3rd-party-merchandising-systems-with-The-Wishlist/README.md)

### Locate your launch point

Firstly, locate your Wishlist-Launch Point snippet, usually inside your header.liquid or theme.liquid

### Update your wishlist page route / login path

```
  {% assign wishlist_path = '/pages/wishlist' %}
  <a href="{% if customer %}{{ wishlist_path }}{% else %}#wishlist-login{% endif %}" id="wishlist-link">
```

### Update your launch point JS by adding new event listener

```
    var isLoggedIn = {% if customer %}true{% else %}false{% endif %};
    var link = document.getElementById("wishlist-link");

    if (!isLoggedIn && link) {
      link.addEventListener("click", function (e) {
        e.preventDefault();
        const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
        const loginUrl = "/customer_identity/login?return_to=" + returnTo;
        window.location.href = loginUrl;
      });
    }
```

### Full updated wishlist-launch-point.liquid snippet

```
<div class="wishlist__launch-point">
  {% assign wishlist_path = '/pages/wishlist' %}
  <a href="{% if customer %}{{ wishlist_path }}{% else %}#wishlist-login{% endif %}" id="wishlist-link">
   <!-- Icon wishlist -->   
   <svg viewBox="0 0 48 48" id="b" xmlns="http://www.w3.org/2000/svg" focusable="false" data-icon="heart" width="1em" height="1em" stroke-width="1.6799999999999997"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.c{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style></defs><path class="c" d="m43,17.0766c0-5.6539-4.5835-10.2373-10.2374-10.2373-3.7223,0-6.9708,1.9932-8.7626,4.964-1.7919-2.9708-5.0403-4.964-8.7626-4.964-5.6539,0-10.2373,4.5834-10.2373,10.2373,0,1.2925.2496,2.524.6866,3.6627,3.3851,9.7368,18.3134,20.4215,18.3134,20.4215,0,0,14.9282-10.6847,18.3134-20.4215.437-1.1386.6867-2.3702.6867-3.6627Z"></path></g></svg>
   <!-- Count wishlist -->
   <span class="count-item" style="opacity: 0;"></span>
 </a>
</div>
<!-- JS to get and update count item wishlist -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Wishlist count logic
    document.body.addEventListener('initTheWishlist', () => {
      const getCountItem = theWishlist.countItemWishlist();
      const elCountItemWishlist = document.querySelector('.wishlist__launch-point .count-item');
      if (elCountItemWishlist && getCountItem > 0) {
        elCountItemWishlist.textContent = getCountItem;
      } else {
        console.log('0 Wishlist item');
      }
    });

    // Set login status from Liquid
    var isLoggedIn = {% if customer %}true{% else %}false{% endif %};
    var link = document.getElementById("wishlist-link");

    if (!isLoggedIn && link) {
      link.addEventListener("click", function (e) {
        e.preventDefault();
        const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
        const loginUrl = "/customer_identity/login?return_to=" + returnTo;
        window.location.href = loginUrl;
      });
    }
  });
</script>
<!--
 CSS style
 The following code support well on default theme, For other themes may 
need a different style. Because each theme has a different HTML structure.
-->
<style>
 .wishlist__launch-point {
 height: 4.4rem; 
 width: 4.4rem; 
 padding: 0; 
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative; 
 } 
 .wishlist__launch-point a { 
 display: flex;
 } 
 .wishlist__launch-point svg { 
 height: 25px; 
 width: auto;
 padding: 0; 
 } 

 .wishlist__launch-point a:hover svg {
  height: 27px; 
 }
  
 .wishlist__launch-point .count-item {
 position: absolute;
 background-color: rgb(var(--color-button));
 color: rgb(var(--color-button-text));
 height: 1.7rem; 
 width: 1.7rem; 
 border-radius: 100%; 
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: .9rem; 
 bottom: 0.8rem;
 left: 2.2rem; 
 line-height: calc(1 + .1 / var(--font-body-scale));
 } 
</style>
```

## For the collection page and product page

Below script is the redirect rules to return to previous page.

```
<script>
  window.__isLoggedIn = {{ customer != null | json }};
  window.LOGIN_URL = "{{ routes.login_url | append: '?return_to=' | append: request.path }}";

  document.addEventListener("DOMContentLoaded", function () {
    document.body.addEventListener('click', function (event) {
      const trigger = event.target.closest('.button-collection-wishlist');
      if (!trigger) return;

      if (!window.__isLoggedIn) {
        console.log("[Wishlist] Guest user clicked .button-collection-wishlist");

        // Always use current page as return path
        const returnPath = window.location.pathname;
        const loginUrl = `/customer_identity/login?return_to=${encodeURIComponent(returnPath)}`;

        const interval = setInterval(() => {
          const saveButton = document.querySelector('.osc-css .btn-save');

          if (saveButton && !saveButton.dataset.listenerAttached) {
            clearInterval(interval);
            saveButton.dataset.listenerAttached = 'true';

            saveButton.addEventListener('click', function (e) {
              e.preventDefault();
              console.log("[Wishlist] Redirecting guest to login with return_to:", returnPath);
              window.location.href = loginUrl;
            });
          }
        }, 300);

        setTimeout(() => clearInterval(interval), 5000);
      }
    });
  });
</script>
```