This section walks you through how to customize the messages shown on your store – either as pop-out notifications or inline text snippets. These messages help promote your rewards program to both logged-in and guest customers.
2.1. Pop Out Message #
How to Configure Pop Out Message Settings #
This section lets you control where and how your rewards message will pop out on your online store. You can also customize the colors and add advanced CSS if needed.
- Navigate to Pop Out Message Settings:
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Pop Out Message Tab
- Go to the Settings (This is the first tab you’ll land on)
- Enable the Pop Out Message:
- Toggle Show Rewards Pop Out to ON so it appears on your store.
- Toggle Show Rewards Pop Out to ON so it appears on your store.
- Choose Where the Pop Out Will Show:
Tick any of the following pages:- Homepage
- Product Page
- Checkout Page
| Note: You can select more than one location. |
- Choose Placement on the Page:Decide where it will appear on screen:
- Bottom Left
- Bottom Right
- Adjust Mobile Padding (Bottom):
- Use the slider to increase or decrease the space between the pop-out modal and the bottom of the screen on mobile view.
- Measured in pixels (px).
| ℹ️ Info: What is Padding? Padding is the space between the element (the pop-out message) and the edge of the screen. Adjusting this helps make sure the pop-out isn’t too close to the bottom, which can help improve visibility and user experience on mobile devices. |
- Pick Your Brand Colors:
- Choose your Primary and Secondary colors to match your brand.
- Choose your Primary and Secondary colors to match your brand.
- Optional: Add Custom CSS
- Add any custom CSS tweaks here for more styling control (e.g., logo, height, size).
| ⚠️ Tip: Not comfortable with CSS? No worries — you can leave this section as is. The default style already looks great! If you have CSS experience, feel free to customize it further. |
- Click Save.
| Tip: Want to Preview Your Pop-Out Message Live? After saving your settings, you can see how the Pop-Out Message looks on your actual store: 1. From the left sidebar panel, click Your Site. This will open your storefront in a new browser tab. 2. Navigate to the page(s) where the message should appear (as selected in your Pop-Out Message settings – Homepage/Product Page/Checkout Page). 3. Click on the Rewards Button on your site to trigger the Pop-Out Message. 4. Review the placement, color, and overall design of the message to ensure it looks just right. If something looks off, feel free to return to the settings and make adjustments – they update live after saving! Additional Tip: If you don’t see your updates right away, try refreshing or reloading the page to view the latest version. |
How to Customize Pop Out Message (For Customers Who Are Not Logged In) #
This section lets you edit the message customers see when they are not logged in. You can control which sections appear and customize each one using the text editors provided.
Navigate to the Pop Out Message (Message to customers who are NOT logged in):
| Already on this screen? You can skip this navigation step and go straight to Step 1. |
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Pop Out Message
- Go to the Messages to customers who are NOT logged in tab
| Tip: Preview Before You Customize We highly recommend clicking the Preview button first to see the layout of the pop-out message. This gives you a clear visual of where each section (like Title, Body, Create an Account, etc.) will appear. Use this preview to guide your edits and ensure your message appears as expected. |
Step 1: Toggle Message Sections On or Off
- Each section has a toggle switch next to its label. Turn it ON to include that part in your message, or OFF to hide it.
- Sections you can customize or add:
- Title
- Body
- Create an Account
- Rewards Text
- FAQ Text
Step 2: Customize Using the Text Editors
Once you’ve toggled on the sections you want to display, you can begin customizing the content for each one – such as the Title, Body, or FAQ – using the built-in text editors.
These editors support simple formatting options like: Text alignment, Bullet points, Numbering, Bold, Italic, Underline, Strikethrough, and Merge Tags
| ℹ️ Info: What are Merge Tags? Merge Tags are smart placeholders that automatically insert customer or store information into your message. Example: If you use [Customer’s Name], it will automatically display the logged-in customer’s name. |
Here are common merge tags and what they display:
| Merge Tag | Output |
| [Customer’s Name] | The customer’s name (e.g., Jane Doe). Note: This tag only works when the customer is logged in. |
| [Store Name] | Your store’s name (e.g., The Shoppe) |
| [Store Name URL] | Your store’s website URL |
| [Reward Percentage] | The reward value (e.g., 5%) |
| [Login or Sign Up] | Shows a combined login/sign-up link |
| [Login] | A login link |
| [Create An Account] | A sign-up link |
| [Store-Credit-Customer] | Customer’s name who has store credit/s.Note: This tag only works when the customer is logged in. |
| ⚠️ Important: Merge tags must remain exactly as shown – don’t change the symbols (e.g., [ ]) or edit the tag text. Altering them may break the tag or confuse your customers. Note: Some merge tags, such as [Customer’s Name] and [Store-Credit-Customer], only display correctly when the customer is logged in. If used while the customer is not logged in, they may appear blank or be skipped entirely. |
Step 3: Upload a Logo or Image
You can either drag and drop a JPG or PNG file into the upload area, or click anywhere within the upload box (including the “Browse” link) to open the file selection dialog.
From there:
- Select the image file from your device
- Click Open to upload it.
- Recommended size:
- Max height: 100px
- Max width: 400px
Your uploaded logo or image will appear in the Current Image Preview beside the upload box.
How to Customize Pop Out Message (For Customers Who Are Logged In) #
This section lets you personalize the message your logged-in customers will see in the pop-out. You can control the visibility of each section and customize the message content to match your store’s tone and rewards system.
Navigate to the Pop Out Message (Message to customers who ARE logged in):
| Already on this screen? You can skip this navigation step and go straight to Step 1. |
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Pop Out Message
- Go to the Messages to customers who ARE logged in tab
| Tip: Preview Before You Customize We highly recommend clicking the Preview button first to see the layout of the pop-out message. This gives you a clear visual of where each section (like Title, Body, Create an Account, etc.) will appear. Use this preview to guide your edits and ensure your message appears as expected. |
Step 1: Toggle Message Sections On or Off
You can choose to show or hide the available sections using the toggle switch beside each one.
Available sections:
- Title
- Body
Toggle ON to include them, or OFF to hide them from the message.
Step 2: Customize the Message Using the Text Editors
Once you’ve toggled on the sections you want to display, you can begin customizing the content for each one – such as the Title, Body, or FAQ – using the built-in text editors.
These editors support simple formatting options like: Text alignment, Bullet points, Numbering, Bold, Italic, Underline, Strikethrough, and Merge Tags
| ℹ️ Info: What are Merge Tags? Merge Tags are smart placeholders that automatically insert customer or store information into your message. Example: If you use [Customer’s Name], it will automatically display the logged-in customer’s name. |
| ⚠️ Important: Merge tags must remain exactly as shown – don’t change the symbols (e.g., [ ]) or edit the tag text. Altering them may break the tag or confuse your customers. |
Step 3: Upload a Logo or Image
You can either drag and drop a JPG or PNG file into the upload area, or click anywhere within the upload box (including the “Browse” link) to open the file selection dialog.
From there:
- Select the image file from your device
- Click Open to upload it.
- Recommended size:
- Max height: 100px
- Max width: 400px
Your uploaded logo or image will appear in the Current Image Preview beside the upload box.
2.2. Text Snippets Message #
How to Configure Text Snippet Settings #
This section lets you display a text snippet (a small message box) on your store’s Product or Checkout pages. Use this to inform customers about earning rewards right where it matters.
- Navigate to Pop Out Message Settings:
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Text Snippet Message Tab
- Go to the Settings (This is the first tab you’ll land on)
- Enable the Text Snippet Message
- Toggle ON the switch beside “Show Rewards Text Snippet.”
| Note: When turned on, a snippet will appear on the page(s) you choose. A preview example is displayed on the right, so you can visualize what it will look like on your site. |
- Choose Where to Show the Snippet
Tick the page(s) where you want your snippet to appear:
- Product Page – Shows on product detail pages
- Checkout Page – Shows during checkout
You can select both, either, or just one.
- (Optional) Advanced Placement Settings
If you want more control over where exactly the snippet appears on your product page, use the advanced settings below:
| ⚠️ Tip: Not comfortable with CSS? No worries — you can leave this section as is. The default style already looks great! If you have CSS experience, feel free to customize it further. |
4.1. Custom Product Page Placement
Toggle ON to activate this feature.
You’ll see:
- Instruction: Please specify the CSS div class where you want the snippet to show.
- Input Field: Enter the specific div class name from your site (e.g., .product-description)
- Placement Options:
- Above div – Snippet will appear above your specified section
- Below div – Snippet will appear below your specified section
Note: This is intended for users who know how to inspect and find CSS classes on their product page.
4.2. Custom CSS (Optional)Below the placement section is a Custom CSS box where you can add your own styling rules to further tweak the snippet’s appearance.
How to Customize Text Snippet Message (For Customers Who Are Not Logged In) #
This section lets you customize the content of your Rewards Text Snippet that shows up on your site – only for visitors who are not logged in yet.
You can edit the message to match your store’s tone and give non-members the right nudge to sign up and earn rewards.
Navigate to the Text Snippet Message (Messages to customers who are NOT logged in):
| Already on this screen? You can skip this navigation step and go straight to Step 1. |
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Text Snippet Message
- Go to the Messages to customers who are NOT logged in tab
| Tip: Preview Before You Customize We highly recommend clicking the Preview button first to see the layout of the pop-out message. This gives you a clear visual of where each section (like Title, Body, Create an Account, etc.) will appear. Use this preview to guide your edits and ensure your message appears as expected. |
Step 1: Toggle Message Sections On or Off
- Each section has a toggle switch next to its label. Turn it ON to include that part in your message, or OFF to hide it.
- Sections you can customize or add:
- Title
- Body
- Rewards Text
- FAQ Text
Step 2: Customize Using the Text Editors
Once you’ve toggled on the sections you want to display, you can begin customizing the content for each one – such as the Title, Body, or FAQ – using the built-in text editors.
These editors support simple formatting options like: Text alignment, Bullet points, Numbering, Bold, Italic, Underline, Strikethrough, and Merge Tags.
| ℹ️ Info: What are Merge Tags? Merge Tags are smart placeholders that automatically insert customer or store information into your message. Example: If you use [Customer’s Name], it will automatically display the logged-in customer’s name. |
| ⚠️ Important: Merge tags must remain exactly as shown – don’t change the symbols (e.g., [ ]) or edit the tag text. Altering them may break the tag or confuse your customers. |
How to Customize Text Snippet Message (For Customers Who Are Logged In) #
This section allows you to customize the message snippet shown to customers who are already logged in to your store.
Navigate to the Text Snippet Message (Messages to customers who are NOT logged in):
| Already on this screen? You can skip this navigation step and go straight to Step 1. |
- From the epicApps left sidebar panel, click on Apps → Website Marketing → goLoyalty → Rewards
- Click Messages from the submenu, then select Text Snippet Message
- Go to the Messages to customers who ARE logged in tab
| Tip: Preview Before You Customize We highly recommend clicking the Preview button first to see the layout of the pop-out message. This gives you a clear visual of where each section (like Title, Body, Create an Account, etc.) will appear. Use this preview to guide your edits and ensure your message appears as expected. |
Step 1: Toggle Message Sections On or Off
- Each section has a toggle switch next to its label. Turn it ON to include that part in your message, or OFF to hide it.
- Sections you can customize or add:
- Title
- Body
Step 2: Customize Using the Text Editors
Once you’ve toggled on the sections you want to display, you can begin customizing the content for each one – such as the Title, Body, or FAQ – using the built-in text editors.
These editors support simple formatting options like: Text alignment, Bullet points, Numbering, Bold, Italic, Underline, Strikethrough, and Merge Tags.
| ℹ️ Info: What are Merge Tags? Merge Tags are smart placeholders that automatically insert customer or store information into your message. Example: If you use [Customer’s Name], it will automatically display the logged-in customer’s name. |
| ⚠️ Important: Merge tags must remain exactly as shown – don’t change the symbols (e.g., [ ]) or edit the tag text. Altering them may break the tag or confuse your customers. |
