Introduction
Deep links can be used to open the Floating Widget to specific sections. You can add these links in navigation and menu items, emails, buttons, announcement bars, and anywhere that you would share a normal URL. Using deep links can boost engagement with your customers and encourage new sign-ups!
Video Walkthrough
Deep links available
Deep links are anchor links that send your customers directly to a screen in the Floating Widget rather than the home page. Each anchor can be added at the end of any URL, which is a great way to drive your customers toward your Loyalty Program while they browse your store.
#ba-loyalty-home→ It opens the front page of the Widget#ba-loyalty-rewards→ It opens the section My Rewards#ba-loyalty-ways-to-earn→ It opens the section Ways to Earn#ba-loyalty-redeem→ It opens the section Ways to Redeem#ba-referral-program→ It opens the section Referrals Program#ba-referrals→ It opens the section My Referrals
📝 Note: Deep links #ba-loyalty-home, #ba-loyalty-ways-to-earn, and #ba-loyalty-redeem only work with logged-in customers.
Opening the Floating Widget through a deep link
Here are some ways to use these deep links to keep your customers engaged with your Loyalty program.
Open the Widget from a link in your navigation menu
This is a great way to put your Loyalty Program front and center and make it feel more native to your store.
From your Shopify Admin click Online Store.
Click Navigation and select the menu you'd like to edit.
Click add Menu item and add the deep link that you'd like the Widget to open. For example,
#ba-loyalty-rewardsopens the Widget in the customer's rewards history section.
💡 Pro Tip: When adding a new menu item, only use the deep links (e.g. #ba-loyalty-rewards), not the entire URL (e.g. mystore.com#ba-loyalty-rewards)
Sharing a link to your Loyalty program
Sometimes it's handy to have a link available to share your Loyalty program directly with your customers. Adding a link in an email campaign, your Instagram bio, or a tweet is a popular way to increase engagement on your website.
Copy your website URL.
Add the Loyalty deep link at the end of the URL. The end result should look like this:
mystore.com/#ba-loyalty-home.Copy the URL and share it away. When your customers visit your website, the Widget will already be opened - magic!
Open the Widget through a page or a button on your website
Opening the Widget through a button is a quick and easy way for customers to access your Loyalty program.
Create your new button according to your theme.
Add the deep link to the href of the button.
The end result should look like this:
<a class="your-website-button-class" href="#ba-loyalty-home">Open loyalty widget</a>
📝 Note: Deep links can work on <a></a> anchor tags and most menus, but this can vary depending on the theme.
Open the widget through a call-to-action
Add a CTA with a deep link almost anywhere on your site! If you are offering a free product as a reward, the product description is a great place to include a deep link to the Ways to Redeem section.
In your Shopify Admin, go to Products and select the product you're offering.
In the product description, write your CTA. Try something like 'Redeem your points to get this product for free!'
Highlight the text and click Insert link from the options above the description field.
Add the anchor only (e.g.
#ba-loyalty-redeem) and click Insert link.
Hiding the Widget on mobile and/or desktop screens
You can use deep links with or without the Widget being hidden on your website. This is a handy way you can preserve valuable real estate on mobile and desktop screens, while still letting your customers engage with your Loyalty program. There are 2 settings on this page that can be used together, or separately.
💡 Pro Tip: Enabling these temporarily is also a great way to test your Loyalty program. Toggle the switches to hide the widget from your customers and use a deep link to take it for a test drive before you launch!
Go to Onsite > Floating Widget.
Click on Hide Widget.
Toggle the switch to
ONto hide the Widget:Option to hide Widget unless deep link is activated - Enable this to hide the Widget button on all screens. This is useful if you would rather open the Widget through a deep link such as
mystore.com/#ba-loyalty-homeOption to hide Widget unless deep link is activated - Enable this to display the Widget button on large desktop screens only. The button will be hidden on smaller screens (mobiles).
📝 Note: You can add a deep link in your Shopify navigation so that on mobile, your customers can still access your Loyalty program without skipping a beat!
Common questions
Can I close the Floating Widget by clicking the same link I used to open it?
No, as clicking a deep link just opens the Widget. However, there is a close button at the top right corner of the Widget dialog for your customers to quickly close it.