> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.froonze.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Loyalty Modal: Custom Launcher

Staying on brand is crucial, and offering customers a friendly way to access their loyalty program whenever and wherever is even more so!

This article provides an overview of the settings that must be enabled in our app’s dashboard, how you can create your very own loyalty launcher, and what your store’s customers will experience.

## Configuring the loyalty widget settings

The Loyalty plugin’s settings can be accessed from our app’s [**Loyalty ➜ Settings ➜ Widget**](https://admin.shopify.com/apps/froonze-app/loyalty/settings/widget) tab. 

You’ll want to ensure the following:

* **Enable the floating widget on all pages** is toggled **on**

* **Show the launcher button** setting is toggled **off**

> — *N.B.: Both options are enabled by default when you install the Loyalty app block for the first time; leaving the* **_Show the launcher button_** *setting* **_on_** *won't affect creating a custom launcher.*

Ensure to hit the **Save** button after you configure the settings.

## Creating the loyalty custom launcher

We’ve developed two ways through which you can create the custom launcher:

1. Using an HTML anchor element

2. Invoking a JavaScript function

> — *N.B.: An HTML anchor element is essentially a link, and this option is easier to implement than the JavaScript method.*

### 1. Using an HTML anchor element

This method allows you to create a link that points to **#froonze_loyalty_modal**. So, when a customer accesses the link, our Loyalty Modal will open.

Below are two examples of how you can use this method:

* Adding a link that opens the loyalty modal to the store navigation

* Nesting an existing element inside a link that opens the loyalty modal

#### Linking in the store navigation

For this example, we’ll create a loyalty menu link to the store’s navigation menu. Please follow these steps to achieve that:

1. Navigate to the [**Content ➜ Menus**](https://admin.shopify.com/content/menus) section inside the Shopify admin dashboard, and access the **Main menu** option.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/crqqcncryo_tnh5af.png =1000xauto)

2. Press the **Add menu item**, add **#froonze_loyalty_modal** under the **Link** input field, select it from the dropdown, hit the **Checkmark** icon, and press the **Save** button.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/zsiykikxnf_ubcjsm.png =1000xauto)

You can view the result on your storefront. Clicking the loyalty menu item will open the loyalty modal, which contains your loyalty program.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/7/3/1/873182aab5747000/z1ndasgodd_zmx7d.gif)
#### Nesting an existing element

Let’s presume you want to add the modal launcher to an existing text element that’s on a Shopify page. You can follow these steps:

1. Navigate to the [**Online Store ➜ Pages**](https://admin.shopify.com/pages) section inside the Shopify admin dashboard, and access an existing page, or create a new one.

2. Hit the **Show HTML** icon and find the **target text** that you want to act as the loyalty launcher.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/53vjotjkds_bjl14f.png =1000xauto)

3. Wrap the text in an anchor tag, add **#froonze_loyalty_modal** as a value to the **href** attribute and make sure to hit the **Save** button. It should look like this:

```html
<a href=”#froonze_loyalty_modal”> YOUR-TEXT-HERE </a>
```

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/ohgdrwnypp_obt7hq.png =1000xauto)

To view the results, simply navigate to newly modified page and hit the link. It should open the loyalty modal.

![](https://storage.crisp.chat/users/upload-1/website/-/8/7/3/1/873182aab5747000/6lmbbdsku_fml7jm.gif =1000xauto)

### 2. Invoking a JavaScript function

This method allows you to control the opening and closing of the loyalty modal by invoking the **frcp.loyalty.toggleLoyaltyWidget()** function. It’s handy if you want to integrate with your own scripts or other apps.

It requires having some coding experience. However, below you can see it in action.

#### Loyalty icon in store navigation

In this example, we’re going to programmatically create, append and style a gift icon that will act as a custom loyalty launcher.

1. Access your theme’s **Code Editor** and find the theme’s **Main Liquid** file (*e.g. theme.liquid, main.liquid, base.liquid, etc.*)

2. Add the following 2 snippets before the ending \*\*\*\* tag:

```javascript
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Creating the loyalty icon launcher
    const loyaltyNavIcon = document.createElement('span');
    loyaltyNavIcon.classList = 'frcp-loyalty-nav-link-wrapper';
    loyaltyNavIcon.innerHTML = `
    <span class="frcp-loyalty-nav-link">
      <span class="frcp-loyalty-nav-link__icon">
        <svg class="frcp-loyalty__icon" width="24px" height="24px" 
          fill="none" stroke="currentColor" stroke-width="1.1" 
          stroke-linecap="round" stroke-linejoin="round"
          viewBox="0 0 24 24">
          <polyline points="20 12 20 22 4 22 4 12"></polyline>
          <rect x="2" y="7" width="20" height="5"></rect>
          <line x1="12" y1="22" x2="12" y2="7"></line>
          <path 
            d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z">
          </path>
          <path 
            d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z">
          </path>
        </svg>
      </span>
    </span>
    `;

    // Appending the loyalty icon in front of the cart icon
    const cartIcon = document.querySelector('.header__icon--cart');
    cartIcon.before(loyaltyNavIcon);

    // When the user clicks the loyalty icon, we call the function
    loyaltyNavIcon.addEventListener('click', () => {
      frcp.loyalty.toggleLoyaltyWidget();
    });

  });
</script>
```

```css
<style>
  /* Styling the loyalty icon launcher */
  .frcp-loyalty-nav-link-wrapper,
  .frcp-loyalty-nav-link, 
  .frcp-loyalty-nav-link__icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .frcp-loyalty-nav-link-wrapper {
    cursor: pointer;
    width: 44px;
  }

  .frcp-loyalty-nav-link-wrapper:hover .frcp-loyalty__icon {
    transform: scale(1.07);
  }
</style>
```

> *The script and styling will need to be adjusted depending on the theme that's used; these snippets simply demonstrate how the frcp.loyalty.toggleLoyaltyWidget() function works.*

3. Hit the **Save** button at the top and go to your live store.

4. Hit **F5** or the **Reload** icon once or twice.

5. The newly added loyalty icon should now be visible, and when clicked, it should open the loyalty modal.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/7/3/1/873182aab5747000/6jd8x3iyyi-1_124k7mw.gif)

In this guide, we’ve seen that regardless of the method you prefer, creating your very own loyalty launcher is entirely possible. This will not only ensure that you stay on brand, design-wise, but that your customers will be able to access your loyalty program from where it’s most convenient!