Merchant Guide

Getting Started

To enable the Account Widget in your storefront, please see the following instructions.

Enable the feature for your Inveterate account

Log into the Inveterate Merchant Dashboard and in the main navigation click the "Widget" item. On the page that opens, click the button to turn the feature on and you will then be redirected to the actual "Settings" subpage. If you see editable settings, you have successfully enabled the feature for your account.

Enable customer login via Multipass

Enable customer login via multipass - After enabling the feature, you will be directed to the Multipass Settings subpage. To enable customer login, you will need to provide your Multipass Secret. This is a required step to use the widget. To find your multipass secret:

1. Open your Shopify admin

2. Navigate to Settings > Customer Accounts

3. Make sure Legacy is selected

4. Scroll down to the Legacy customer account settings

5. Enable Multipass if it's not already enabled

6. Copy the secret and paste it into the Shopify Multipass Secret field in the Inveterate merchant dashboard and save

Add widget JS/CSS to your site

It is best to do this in a theme that isn't live to your customers so that you can test it before releasing it. In your Shopify admin on the Online Store page, go to your main theme and click "Duplicate". This will create an exact copy with all of your customizations that you can use for this step and the next one.

In the new them you created, select the Edit Code option to be taken to the theme code editor. In the Snippets folder, create a new file called inveterate-account-widget.liquid. In that file add the following code snippet:

<link rel="stylesheet" href="https://d283v1bqqmay5j.cloudfront.net/widget.css">
{%- if customer -%}
  <script defer src="https://d283v1bqqmay5j.cloudfront.net/widget.iife.js" 
          data-shopify-customer='{"id":{{ customer.id | json }},"email":{{ customer.email | json }}}'
          data-merchant-id="{{ shop.permanent_domain | split: '.' | first }}"></script>
{%- else -%}
  <script defer src="https://d283v1bqqmay5j.cloudfront.net/widget.iife.js"
    data-merchant-id="{{ shop.permanent_domain | split: '.' | first }}"></script>
{%- endif -%}

Save the file and then navigate to the layout/theme.liquid file and add the following code directly above the closing </head> tag.

{%- render 'inveterate-account-widget' -%}

This will actually the code to your theme, making it available in the frontend.

Finally, you need to update the user account icon to open the widget rather than directing customers to the Shopify account templates. This is theme specific, so this will be a generalized explanation.

You will likely find a file with either "header" or "navigation" in the title. First check the sections folder and then check the snippets folder if you can't find it. Make sure it's a .liquid filetype and not .json when in the sections folder. Then you'll want to find the "customer" or "account" icon and it's surrounding <a> html tag. In the <a> tag, delete everything in the href property and replace it with #iaw_display. Yours will be different, but it should look something similar to:

It's possible, depending on your theme, that there is a second user icon specifically for mobile. If this is the case for your theme, make sure you update that one as well.

Add wishlist stars to product cards

If you intend to use wishlists you need to add a way for your customers to add products to their wishlist. This is the simplest method for adding wishlist stars to product cards, but developers will be able to more deeply integrate this feature into your site.

In the theme you created earlier, create a new file in the snippets folder called inveterate-wishlist-heart.liquid. In that file add the following code snippet:

<a href="#" class="inveterate-heart" style="position: absolute; top: 15px; right: 15px; z-index: 100; width: 20px; height: 20px;" id="fav_{{ iaw_product.id }}" data-inveterate-favorite="{{ iaw_product.id }}">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 20px; height: 20px;">
        <path
            d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"
            style="fill: transparent; stroke: red;"
        >
        </path>
    </svg>
</a>
<script>
    (() => {
        const callback = (productId, wishlistId) => {
            // Add custom code here
            window.IAW.Widget.instance.show();
        };
        const favoriteEl = document.getElementById('fav_{{ iaw_product.id }}');
        const productId = favoriteEl.getAttribute('data-inveterate-favorite');
        favoriteEl.addEventListener('click', (event) => {
            event.preventDefault();
            window.IAW.Widget.instance.addToWishlist(productId, null, callback);
        });
    })();
</script>

As a brief explanation of what this file is doing, it's creating a heart icon SVG that when clicked will run the addToWishlist() function provided in the widget frontend API and then open the widget. The file itself takes an iaw_product variable that can be passed into the liquid snippet when it's initialized.

To add this icon to product cards, you will need to locate your product cards file in your theme. This will likely be found in the snippets folder. Then you will need to identify the liquid variable that's being used for the product within the file. In my case, it's called card_product. In your case it may be named differently. Add the following code snippet within the product card code:

{% render 'inveterate-heart', iaw_product: card_product %}

As mentioned before, you will need to change card_product to whatever it's named in your theme file. This will add a simple heart icon to your product tiles that when clicked will simply add the product to the customers "main" wishlist and will refresh the page. The addToWishlist() function accepts a callback so your developers can add any success messages or other behavior to occur after the item is either successfully added or not (generally because the item is already in the wishlist).

You could also add this to your product display page, but you will need to modify the code to fit your design.

Add Wishlist Button to PDP

Inveterate is currently in the process of creating a Shopify App Block for PDP wishlist button, so this block of documentation will be made obsolete in the very near future. Since the PDP is where a large portion of customers will add products to the wishlist, we wanted to provide this block of documentation to fill the gap until the app block is released.

To further give your customers the ability to add products to their wishlist, it is also useful to add a button to your product display pages (PDP). Similar to the product cards, the exact way you would add this will depend on your theme.

First, create a new snippet called inveterate-wishlist-button.liquid. In this snippet copy/paste the following code, remembering that you will likely need to update styles depending on your theme:

{% style %}
    .inveterate-pdp-wishlist button {
        align-items: center;
        appearance: none;
        background-color: #ffffff;
        border: 1px solid #000000;
        color: #000000;
        cursor: pointer;
        display: flex;
        font: inherit;
        font-size: 1.5rem;
        height: 47px;
        justify-content: center;
        letter-spacing: 0.1rem;
        width: 100%;
    }

    .inveterate-pdp-wishlist button:hover {
        outline: 1px solid #000000;
    }

    .inveterate-pdp-wishlist button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
        outline-color: transparent;
    }
{% endstyle %}

<div class="inveterate-pdp-wishlist">
    <button id="inveterate-pdp-wishlist-button" disabled>
        Add to wishlist
    </button>
</div>

<script>
    (() => {
        let IAWLoadCounter = 0;
        const IAWLoadInterval = setInterval(async () => {
            if (IAWLoadCounter >= 60) {
                clearInterval(IAWLoadInterval);
                console.error('Inveterate widget did not load within 30 seconds. Wishlist button disabled.')
                return;
            }
            if (!window.IAW?.Widget?.instance) {
                IAWLoadCounter += 1;
                return;
            }
            clearInterval(IAWLoadInterval);

            const button = document.getElementById('inveterate-pdp-wishlist-button');
            button.removeAttribute('disabled');

            const callback = () => {
                window.IAW.Widget.instance.show();
            };

            const onClick = (event) => {
                event.preventDefault();
                window.IAW.Widget.instance.addToWishlist('{{ iaw_product.id }}', null, callback);
            };

            
            button.addEventListener('click', onClick);
        }, 100);
    })();
</script>

This code snippet creates a disabled button. Then once it confirms window.IAW has been created, it enables the button. When the customer clicks the button it adds the product to the main wishlist and opens the widget.

To add this to your PDP, this will depend on your theme code, but generally you would either look for the snippet or section file that has the majority of the product page code in it. You would then add this code with the following snippet:

{%- render 'inveterate-wishlist-button', iaw_product: product -%}

For example, in Shopify's default "Dawn" theme the code can be added to the main-product.liquid file. In our dev store, we added it below the cart buttons:

Customization

To customize the widget, you will find a plethora of settings within the Inveterate Merchant dashboard giving you the ability to add your logo, change colors, edit button styles and more. The widget is also fully integrated into your Shopify storefront so you can add your own custom CSS to make sure the widget perfectly fits your store's aesthetic.

Frontend API

This widget also comes with a small frontend API to allow you to perform certain actions through JavaScript. The methods that are listed here can be found by typing into your browser console: window.IAW.Widget.instance. This will be the prefix for all of the following methods that are listed out. For example, if you want to run the show() method, you would write window.IAW.Widget.instance.show().

Now to explain what each function is

• addToWishlist - This is used to add products to the wishlist. You saw an example of this being used earlier in this documentation. It takes 3 arguments: productId, wishlistId, and callback. productId is the products numeric Shopify ID. wishlistId is the ID of the wishlist that can be found in som of the other wishlist based functions. It is recommended for simple implementations to use null for this field which will automatically default to the customers "main" or "default" wishlist. callback is a function that you can create that will run after the item has been added to the wishlist. This is useful if you want to refresh the page or show a success message to the customer.

• getCustomerWishlistById - This will allow you to pass the wishlistId to get the details about a specific wishlist.

• getCustomerWishlists - This will allow you to pull all of the customer's wishlists and all of their information. This is particularly useful if you want to give the customer the option to select which wishlist to add a product to, rather than simply adding to the "main" wishlist.

• getDefaultWishlistId - Useful for getting the ID of the default wishlist in case you need to use it for other wishlist operations.

• hide - Will hide the widget

• refresh - Will refresh the widget view. Can be used in scenarios where you change some specific customer information outside of the widget but it won't reflect in the widget without a refresh.

• show - Will show the widget to the customer

• toggle - Will either hide or show the widget to the customer depending on it's current visible state

• trackProduct - Allows you to manually add a product to the recently viewed section of the "For You" tab. This is tracked automatically when a customer visits a product page. An example of when this function might be used is if your store has a quick buy feature on product cards and you want the opening of the quick buy view to add the product to the recently viewed section, you would then use this function for that. It takes the product handle as it's only argument.