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.

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.

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.

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

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

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

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:

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:

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

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.

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 </body> tag:

— N.B.: The script and styling will need to be adjusted depending on the theme that's used; these snippets simply demonstrate how the frcp.loyalty.toggleWidget() function works.

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!