Introduction

Implementing strategic prompts in your online store stimulates customer activity, enhances user engagement, and drives sales through improved loyalty. Let's explore how to quickly set up these features in your shop!

Types of prompts

By introducing prompts, you create new opportunities for customers to interact meaningfully with your Loyalty program.

Boosting member signups

This notification aims to motivate new visitors to join your Loyalty program. It will appear on the initial page view for first-time visitors to your store and continue to display on subsequent pages unless they opt to Join Now or dismiss the popup.

Boosting points engagement

This alert targets members browsing the /cart page, encouraging them to utilize their accumulated points. It will be visible when a customer is logged into their account, viewing the cart page, and has points available for redemption.

Boosting reward engagement

This message prompts members to claim their rewards while on the /cart page. It will be displayed when a customer is logged into their account, viewing the cart page, and has an available reward to redeem.

Enabling your prompts

1. From your BrandLift Dashboard, go to Onsite > Prompts
2. Click on the prompt you want to edit
3. Within the prompt editor, adjust the following settings:
1. Title - The header text in the prompt
2. Body - The text below the title in the prompt
3. Button - The CTA button text
4. Icon - Default or upload your own. For a custom icon, the optimal image size is 60x60px
5. Position - Choose to place the prompt either at the bottom right or bottom left
6. Custom CSS - Insert CSS codes into the text area to align with your brand's style
4. Make sure you toggle the switch to ON
5. Save changes.

Customizing your prompts with CSS

Use the following CSS selectors to add a unique look and feel to your prompts.

1. Icon - .content.preset .icon img
2. Close button - .modal__close
3. Title - .content.preset .title-text
4. Body - .content.preset .body-text
5. Button - .content.preset .cta-button
6. Footer - .content.preset .footer
7. Footer link - .content.preset a

Import fonts

Use the @import method to add a font from an external CSS file, like Google Fonts. For example:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');

Use the @font-face method instead if the font already exists in your Shopify theme. For example:

@font-face {font-family: 'Your Font';src: url('https://cdn.shopify.com/s/files/1/1761/2711/t/248/assets/yourfont.woff') format('woff');}

Prompt analytics

On the Prompts page, you can gain insights into the performance of your prompts. Track the number of prompt views and interactions.

• Views - Number of unique views
• Clicks - Unique clicks on the CTA button.

Common Questions

How do I remove a prompt?

To remove a prompt, toggle the on/off switch on the prompts settings page.

Why is my prompt icon not updating in the live preview?

To see the updated icon, click the Preview on your store button in the top right corner. The updated icon will show on your website.