If you've decided not to use the launcher button we've placed on your site, you can disable it. Once it's disabled, you'll need to set-up a new method in order for members to access your loyalty program and redeem their points.
URL Method
The URL method basically involved placing a query string parameter in the URL of any page of your website. With the query string parameter present, the widget will automatically launch once the page is loaded.
Example:
Change: https://www.yoursite.com
In this example, when the customer clicks this link, they will get redirected to the home page of this Shopify store. The widget will display automatically.
JavaScript Method
The JavaScript method allows you to tie a click event from any element on your site to the loyalty widget. You can make your own launcher, edit your theme to include the loyalty widget into your site's menu, or just about anything else you can think of. To implement the JavaScript method, you'll need to add an onClick attribute to an element on your site.
Example:
This will create a link that can be clicked to launch the rewards:
<a href="javascript:void(0);" onClick="launchLoyalty();">Rewards</a>
You can also create a button to launch the widget:
<button type="button" onclick="launchLoyalty();" style="padding: 10px 30px;" class="btn">Launch Glow Loyalty</button>
Typically you would use one or the other but here is how they both look on a generic Shopify page:
Launch on Page Load
You could also launch the widget automatically when the page loads like this:
<script>
window.addEventListener('load', function() {
setTimeout(function(){ launchLoyalty(); },1000);
});
</script>
On my Shopify store using the theme Debut, I was able to add it to the homepage by editing the index.liquid part of my theme code. Depending on your theme, the code may need to get added to a different section.
Embedded in a Page
<div id="loyalty_rewards_embed"></div>
Copy the snippet above and paste it on the page where you want it to show up. Make sure to paste it in the HTML section of the page builder by clicking the <> icon:
When added to a page, it looks like this:
Note: This is a very basic implementation and may not resize well with most themes. We typically recommend the pop-up view.
Related Articles:
Please let us know if you have any questions.
Sincerely,
The Glow Team