Customize Storefront Messaging #
Messages in goLoyalty let you customize the rewards messages customers see across your storefront.
You can display rewards messaging as:
- Pop Out Messages
- Text Snippet Messages
These messages help customers:
- learn about your rewards program
- view available rewards and store credit
- discover rewards while shopping in your store
- stay encouraged to return and shop again
You can also customize the content, placement, colors, and styling to match your storefront branding.
Navigate to Storefront Messaging
- From the left sidebar, click: Apps → Website Marketing → goLoyalty → Rewards
- Click Messages
Pop Out Message #
Pop Out Messages display rewards information in a pop-out window on your storefront.
Customers can click the rewards button to open the pop-out and view rewards details, store credit, or loyalty program information.
These messages are useful for:
- introducing your rewards program through a dedicated pop-out
- encouraging guest shoppers to create an account
- highlighting available rewards and store credit
- displaying reward details without leaving the page
You can customize separate messages for:
- logged-out customers
- logged-in customers
Pop Out Message Settings #
Pop Out Message Settings control where and how the rewards pop-out appear on your storefront.
You can customize:
1. where the pop-out appears
2. pop-out placement
3. mobile spacing
4. brand colors
5. optional custom CSS styling
See how to set up rewards pop-out message settings in goLoyalty.
To Configure Pop Out Message Settings:
In the Pop Out Message tab, click Settings.
1. Enable the Pop Out Message
Toggle Show Rewards Pop Out to ON
When enabled, the rewards pop-out will appear on the pages you select.
💡 Tip: View Example Before You Customize
We highly recommend clicking the View Example button first to see the layout of the pop-out message. Use this to guide your edits and ensure your message appears as expected.
2. Choose Where the Pop Out Appears
Select where you want the pop-out to appear:
- Homepage
- Product Page
- Checkout Page
3. Choose Placement on the Page:
Choose where the pop-out appears on the screen:
- Bottom Left
- Bottom Right
4. Adjust Mobile Padding (Bottom):
- Use the slider to increase or decrease the space between the pop-out and the bottom of the screen on mobile view.
- Measured in pixels (px).
🗒️ Note: What is Padding?
Padding is the space between 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.
5. Customize Brand Colors:
Choose your:
- Primary Color
- Secondary Color
This helps match the pop-out with your storefront branding.
6. Add Custom CSS (Optional)
Use the Custom CSS box to add additional styling adjustments.
Examples:
- logo styling
- spacing adjustments
- custom sizing
7. Upload a Logo or Image
You can upload a JPG or PNG image using either of these methods:
Drag and Drop
- Drag your image file into the upload area.
Browse Your Device
1. Click anywhere inside the upload box (including the Browse link).
2. Select the image file from your device.
3. 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 area.
8. Save Your Changes
After updating your settings, click Save.
After saving your settings, you can see how the Pop-Out Message looks on your actual store:
1. Click Your Site from the left sidebar.
This will open your storefront in a new browser tab.
2. Go 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 open 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.
Messages to Customers Who Are NOT Logged In #
This section lets you customize the pop-out message shown to customers who are not logged in.
Best for:
- encouraging guest shoppers to create an account
- showing customers what they can earn after signing up
Watch a step-by-step walkthrough of how to customize pop-out messages for non-logged-in customers.
To customize messages for logged-out customers:
In the Pop Out Message tab, click:
Messages to customers who are NOT logged in
Step 1: Show or Hide Message Sections
Use the toggle beside each section to choose what appears in the pop-out message.
Available sections:
- Title
- Body
- Create an Account
- Rewards Text
- FAQ Text
Turn the toggle:
- ON to display the section
- OFF to hide it
Step 2: Customize Message Content
You can begin customizing the message 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
🗒️ Note: 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.
For detailed guidance, available merge tags, usage notes, and examples, see: goLoyalty Merge Tags
Step 3: Save Your Changes
After updating your settings, click Save.
Messages to Customers Who ARE Logged In #
This section lets you customize the pop-out message shown to logged-in customers.
Best for:
- showing available rewards and store credit
- reminding customers to redeem available rewards
- highlighting rewards customers can already use
Learn how to customize pop-out messages for logged-in customers in goLoyalty.
To customize messages for logged-in customers:
In the Pop Out Message tab, click:
Messages to customers who ARE logged in
Step 1: Show or Hide Message Sections
Use the toggle beside each section to choose what appears in the pop-out message.
Available sections:
- Title
- Body
Turn the toggle:
- ON to display the section
- OFF to hide it
Step 2: Customize Message Content
You can begin customizing the message content for each one 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.
Step 3: Save Your Changes
After updating your settings, click Save.
Text Snippet Message #
Text Snippet Messages display smaller rewards messages directly within your storefront pages.
Unlike Pop Out Messages, Text Snippet Messages appear inline on the page and stay visible while customers browse.
These messages are useful for:
- promoting rewards near products or checkout
- keeping rewards visible while customers browse
- highlighting rewards without interrupting the page flow
You can customize separate messages for:
- logged-out customers
- logged-in customers
See how to set up text snippet messages for product and checkout pages in goLoyalty.
Text Snippet Message Settings #
Text Snippet Message Settings control where and how the rewards text snippet appears on your storefront.
You can customize:
1. where the snippet appears
2. advanced placement settings
3. optional custom CSS styling
To Configure Text Snippet Message Settings:
In the Text Snippet Message tab, click Settings.
1. Enable the Text Snippet Message
- In the Settings tab:
Toggle Show Rewards Text Snippet to ON
2. Choose Where the Text Snippet Appears
Select where you want the pop-out to appear:
- Product Page
- Checkout Page
3. Custom Product Page Placement (Optional)
Enable Custom Product Page Placement if you want more control over where the text snippet appears on your product page.
1. Toggle ON to activate the feature.
2. In the field:
Please specify the CSS div class where you want the snippet to show
Enter the specific div class name from your storefront page (for example: .product-description).
3. Choose where the snippet should appear:
- 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. Add Custom CSS (Optional)
Use the Custom CSS box to add additional styling adjustments for the text snippet.
Messages to Customers Who Are NOT Logged In #
This section lets you customize the text snippet shown to customers who are not logged in.
Best for:
- displaying rewards directly on product or checkout pages
- introducing available rewards before purchase
To customize messages for logged-out customers:
In the Text Snippet Message tab, click:
Messages to customers who are NOT logged in
Step 1: Show or Hide Message Sections
Use the toggle beside each section to choose what appears in the pop-out message.
Available sections:
- Title
- Body
- Rewards Text
- FAQ Text
Turn the toggle:
- ON to display the section
- OFF to hide it
Step 2: Customize Message Content
You can begin customizing the message 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.
Step 3: Save Your Changes
After updating your settings, click Save.
Messages to Customers Who ARE Logged In #
This section lets you customize the text snippet shown to logged-in customers.
Best for:
- displaying available rewards during shopping
- highlighting available store credit near products or checkout
- reminding customers to use rewards before completing their order
To customize messages for logged-in customers:
In the Text Snippet Message tab, click:
Messages to customers who ARE logged in
Step 1: Show or Hide Message Sections
Use the toggle beside each section to choose what appears in the pop-out message.
Available sections:
- Title
- Body
Turn the toggle:
- ON to display the section
- OFF to hide it
Step 2: Customize Message Content
You can begin customizing the message content for each one 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.
Step 3: Save Your Changes
After updating your settings, click Save.
