# 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

<figure><img src="/files/y7IkSOUaIwLI8BJbGICy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/hzupQCInnHnPE6G3ilwH" alt=""><figcaption></figcaption></figure>

### 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:

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

```liquid
{%- 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:

<figure><img src="/files/t0PS4BmsA7ycY6hYtVXx" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

### (Optional) Add wishlist button to product pages

For the best results it's best to add an "Add to Wishlist" button to your product pages. To make this process as easy as possible, Inveterate provides a [Shopify App Block](https://shopify.dev/docs/storefronts/themes/architecture/blocks/app-blocks) that enables this functionality in just a few clicks.

To add this app block, go to the theme editor and navigate to the product page. **This app block is** **only available** **on product pages**. Under the Template section you can either click "Add Section" or add it as a block to one of your existing app block supported sections. Select "Apps" in the popup window and you'll see a list of app blocks, one of them being the Inveterate Add to Wishlist block. Depening on your theme, if you have app block supported sections, you will be able to add the block

<figure><img src="/files/Yx6XQEcedPO2csWjz2hH" alt=""><figcaption></figcaption></figure>

In the screenshot above, I'm adding it to the Product information section as a block and I end up moving it to display below the Buy buttons and above the Description. Where you add it will depend on your theme and it's level of app block support.

### (Optional) 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:

```liquid
<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) => {
            window.IAW.Widget.instance.setView('wishlist');
        };
        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:

```liquid
{% render 'inveterate-wishlist-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 open the widget to the wishlist view.

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

## Dev Documentation

For developers, please see our [Dev Documentation](https://help.inveterate.com/dev/stack-reference-docs/account-widget-frontend-api) for more information on how to interact with the widget with your code.


---

# 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://help.inveterate.com/help-center/guides/account-widget/merchant-guide.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.