This article is a reference guide for module and style settings available in Loyalty Page Plus.

Modules in Detail

Welcome Header

The Welcome Header looks to capture the attention of prospective members. It sets the tone for your program, communicating your program's value proposition and key messages.

💡 This module contains an enrolment call to action in the anonymous (logged out) state. This call to action is removed in the logged in state, for members.

Field	Description	Options
Style	This setting adjusts the layout of the Welcome Header.	Full Width Image: Overlays the title and body text over a hero image. Half Width Image: Splits the Welcome Header into two equal parts, with title and body text on one side and a hero image on the other.
Image position	Positions the hero image in the Welcome Header. This setting will only appear if the Half Width Image is selected against Style.	Left: Positions the image on the left-hand side of the Welcome Header. Right: Positions the image on the right-hand side of the Welcome Header.
Expand to Full Width	Expands the Welcome Header to the full width of the page, disregarding any content margins.	Toggle off/Toggle on
Image	Images are uploaded through this setting (PNG or JPEG preferred)	Minimum recommended width of 1600px
Image Height	Adjusts the height of an uploaded image.	Desired image height (in pixels)
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the hero image.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Title Text	The main heading used in the Welcome Header.	Free text field
Body Text	The main body text, where merchants can add the program value prop and key messages.	Free text field with text styling
Container Around Text	Adds a contrasting container around the text, to increase legibility. This setting is only available for full width image styles.	Toggle off/Toggle on
Container Border Radius	Round the corners of the text container. This setting is only available for full width image styles	Desired border radius value, (in pixels)
Align Content	Aadjusts the position of the title and body text. This setting is only available for half width image styles.	Cardinal (top, bottom, left, right) and inter-cardinal points, as well as center
Background Color	Add a hex color code to adjust the title and body text background color. This setting is only available for half width image styles.	Hex color code

How It Works

The How It Works module gives prospective members a stepped summary of how they engage with your loyalty program (e.g. For points programs, typically members would "Join", "Earn" and "Redeem"). A simple explanation can help entice customers to become members.

💡 This module is displayed to all customers in the anonymous (logged out) state, but is hidden from enrolled members once they log into their Shopify account.

Field	Description	Options
Style Variant	This setting adjusts the look and feel of each step.	Numbers Only Brush Numbers Dots Small Circles Large Circles Organic Circles Small Squares Large Squares Small Images Large Images
Image Size	Changes the crop orientation of images used at each step. This setting is only available for small images and large image style variants.	Square Portrait Lanscape Custom Height
Image Height	This setting adjusts image height for image-based style variants.	Desired image height (in pixels)
Image Crop Position	Controls the position of the cropped area, within each uploaded image (per step). This setting is only available for small images and large image style variants.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Align Title	Aligns the module title (ie "How It Works").	Left align Center align Right align
Background	Allows a background color or background image to be added to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right
Step 1/2/3 - Title	The main heading used per step.	Free text field
Step 1/2/3 - Body Text	The main body text (per step), where merchants can provide more information about each step.	Free text field with text styling
Step 1/2/3 - Image	Allows an image to be uploaded per step (PNG or JPEG preferred). This setting is only available for image-based style variants.	Minimum recommended width of 720px

Earn Points

This module displays the different ways that members can earn points from your loyalty program. Members can also action earn rules from this module, increasing participation and engagement.

💡 This module will only show active earn rules. Where enabled, it will also only show earn rules that are applicable to a logged in member's tier.

Field	Description	Options
Style	This setting controls the iconography used against each earn rule, within the module. Pleas ensure icons or images are uploaded against all earn rules.	Icons: Uses icons added to each earn rule. Icons in circles: Encases icons specified against each earn rule, in a circular frame Images: Uses images specified against each earn rule.
Layout	Controls how earn rules are laid out in the module.	Carousel: Earn rules are displayed in a single row, with navigation arrows (to move left and right), to view different earn rules. Grid: Earn rules are displayed in a responsive grid.
Cards	Controls whether each earn rule is presented in card format (ie contents encased in a bordered area).	Toggle off/Toggle on.
Image Size	This setting changes the crop size and orientation of images used against earn rules. This setting is only available where the Images style has been used.	Square Portrait Lanscape Custom Height
Image Crop Position	Controls the position of the cropped area within each uploaded image (per earn rule). This setting is only available where the Images style has been used.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Align Title	Aligns the module title (ie "Earn Points").	Left align Center align Right align
Background	Allows a background color or background image to be added to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Redeem Rewards

This module displays rewards that can redeemed in your loyalty program. Members can track rewards redeemed previously, view rewards that can be redeemed with their current points balance as well as progress towards higher value rewards.

💡 This module will only show active redemption rules (rewards). Where enabled, it will only show rewards applicable to a member's tier.

Field	Description	Options
Style	Used to control iconography against each redemption rule, within the module.	Icons: Uses icons specified against each redemption rule. Icons in circles: Encases icons specified against each redemption rule, in a circular frame Images: Uses images specified against redemption rule.
Layout	Controls how redemption rules are laid out in the module.	Carousel: Rewards are displayed in a single row, with navigation arrows (to move left and right) to view different rewards. Grid: Rewards are displayed in a responsive grid.
Cards	Controls whether or not each redemption rule is presented in a card format (ie contents encased in a bordered area).	Toggle off/Toggle on.
Image Size	This setting changes the crop orientation of images used against redemption rules. This setting is only available where the Images style has been used.	Square Portrait Lanscape Custom Height
Image Crop Position	Controls the position of a cropped area, within an uploaded image (per redemption rule). This setting is only available where the Images style has been used.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Align Title	Aligns the module title (ie "Redeem Rewards").	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Profile

This module enables members to see their name, email address, points balance, VIP tier status (where enabled) and their loyalty program activity.

💡 This module is displayed to logged in members but not to anonymous (logged out) customers.

Field	Description	Options
Style	A setting to control the presentation of member data in the module.	Cards: Uses Fill and Border color for cards, as defined in Styling. Shaded: Uses Shading color, as defined in Styling.
Align Title	Aligns the module title (ie "About You").	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Promotions

This module displays active and upcoming points promotions, that members can participate in. Promotions allow you to boost member engagement in your loyalty program, on demand.

💡 The promotions module displays active and upcoming promotions. Where VIP Tiers have been enabled, the promotions module will also consider the member's tier status, when determining which promotions to display. For more information about promotions, review this support article.

Field	Description	Options
Includes Upcoming Promotions	Provides options to display upcoming promotions.	Options include to promotions starting: In the next day In the next week In the next month All upcoming promotions Never show upcoming promotions
Align Title	Aligns the module titles (ie "Event On Now", "Coming Up)).	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

VIP Tiers

This module displays rewards, perks and benefits associated with your VIP tiers.

⚠️ VIP Tiers must be enabled to use this module.

Field	Description	Options
Style Variant	Provides different layout options to display tier information.	Table: Tier information is displayed in table format. Cards: Tier information is displayed in cards. Tabs: Tiers information is grouped into tabs. Accordion: Tier information is grouped into expandable sections. Accordion Blocks: Tier information is grouped into expandable block sections.
Image Position	Allows an adjacent image to be added and positioned, adjacent to VIP Tiers. This setting will only appear for Accordion and Accordion Blocks style variants.	No image Left: Positions the image to the left of VIP Tier information. Right: Positions the image to the right of VIP Tier information.
Image	Allows an image upload (PNG or JPEG preferred). This option only appear if you select Left or Right image positions.	Minimum recommended height of 1200px
Image Crop Position	This setting controls the position of a cropped area, within an uploaded image, with the cropped area used as the module image. This setting will only appear if you select Left or Right image positions.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Align Title	Aligns the module title (ie "VIP Tiers").	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Refer Friends

This module allows members to send referrals directly from the landing page, creating a frictionless experience that encourages members to recommend your brand to their friends, family and colleagues.

⚠️ Okendo Referrals must be enabled to use this module.

Field	Description	Options
Image Position	Allows an image to be added to the module and positioned, adjacent to the referral fields.	No image Left Right
Expand to Full Width	Expands the Refer Friends module to the full width of the page, disregarding any content margins.	Toggle off/Toggle on
Image	Allows an image upload (PNG or JPEG preferred). This setting will only appear if you select Left or Right image positions.	Minimum recommended width of 1600px
Image Size	This setting changes the crop orientation of the image used. This setting will only appear if you select Left or Right image positions.	Square Portrait Lanscape Custom Height
Image Crop Position	This setting controls the position of a cropped area, within the uploaded image, with the cropped area used as the module image. This setting will only appear if you select Left or Right image positions.	Top Center Bottom Left Right
Align Content	Aligns the referrals fields	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

FAQ

This module allows you to catalogue and display the most frequently asked questions about your loyalty program.

💡 You can configure Frequently Asked Questions in Loyalty > Settings > Program FAQ.

Field	Description	Options
Style	Provides different layout options to display frequently asked questions	Dividers: Each questions and answer is separated by a divider Separate Blocks: Each question and answer is contained within it's own expandable block. Single Block: All questions and answers are contained within a single block.
Image Position	Allows an image to be added to the module, adjacent to the expandable sections.	No image Left Right
Image	Allows an image upload (PNG or JPEG preferred). This setting will only appear if you select Left or Right image positions.	Minimum recommended height of 1200px
Image Crop Position	This setting controls the position of a cropped area, within an uploaded image, with the cropped area used as the module image. This setting will only appear if you select Left or Right image positions.	Cardinal (top, bottom, left, right) and inter-cardinal direction, as well as center
Align Title	Aligns the module title (ie "Frequently Asked Questions").	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Achievements

This module displays achievement badges that have been both earned and yet to be earned by members.

⚠️ Achievements need to be enabled to use this module.

Field	Description	Options
Style	Provides different layout options to display achievements	Carousel: Achievements are displayed in a single row, with navigation arrows (to move left and right), to view different achievements. Grid: Achievements are displayed in a responsive grid.
Cards	Controls whether or not achievements are presented in a card format (ie contents encased in a bordered area).	Toggle off/Toggle on.
Align Title	Aligns the module title (ie "Earn Achievements").	Left align Center align Right align
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Join Program CTA

This module allows members to add an additional call to action on their landing page, to entice customers to enrol. You can add this further down you landing page to improve the user experience, by making enrolment easier.

Field	Description	Options
Title	The main heading used in the Join Program CTA.	Free text field
Body Text	The main text body, where merchants can add key messaging about their loyalty program.	Free text field with text styling
Background	Allows a background color or background image to be add to the module.	No background Background color Background image
Background Color	Specify a hex color code as the background color for the module. This setting will only appear if you choose Background Color against the Background setting.	Hex color code
Background Image	Upload an image as the module background (PNG or JPEG preferred). This setting will only appear if you choose Background Image against the Background setting.	Minimum recommended width of 3200px
Image Crop Position	Controls the position of a cropped area within the uploaded image, with the cropped area used as the module background. This setting will only appear if you choose Background Image against the Background setting.	Top Center Bottom Left Right

Customize Style Settings

Style Settings

Area	Field	Description
General	Icon Size	Dictates the size of icons used on your landing page.
General	Content Max Width	The maximum width (in pixels) of modules and the Loyalty Page Plus app block. Where allowed, can be made full width at the module level.
General	Image Border Radius	The extent of rounding of corners, on an image.
General	Block Spacing	Padding added to the top and bottom of modules, in pixels.
General	Accent Color	Hex color code used for elements such as check marks and slider coloring
General	Shading Color	Hex color code used for shading elements, such as the member's VIP Tier.
General	Icon Color	Hex color code used for icons used on Earn Rules and Redeem Rewards.
Text	Primary Text Color	Hex color code used on title text and labels.
Text	Primary Font Type	Main font used for you landing page. You can specify a separate Google Font, inherit the existing page font or use an uploaded custom font.
Text	Font Family (Primary)	The name of the font family selected for your landing page. This setting will only show if you have selected Google Font, as the Primary Font Type.
Text	Primary Font Family	The name of the primary font family selected for your landing page. This setting will only show if you have selected Custom, as the Primary Font Type.
Text	Secondary Text Color	Hex color code used on text content such as table information, answers in FAQ and referral placeholder text.
Text	Secondary Font Type	Secondary font used for you landing page. You can specify a separate Google Font, inherit the existing page font or use an uploaded custom font.
Text	Font Family (Secondary)	The name of the secondary font family selected for your landing page. This setting will only show if you have selected Google Font, as the Secondary Font Type.
Text	Secondary Font Family	The name of the font family selected for your landing page. This setting will only show if you have selected Custom, as the Secondary Font Type.
Text	H1 Text Size	Changes the font size of level 1 headings. Title Text in the Welcome Header is a form of level 1 heading.
Text	H1 Font Weight	Changes the font weight of level 1 headers
Text	H2 Text Size	Changes the font size of level 2 headings. Module title text are forms of level 2 heading.
Text	H2 Font Weight	Changes the font weight of level 2 headers
Text	H3 Text Size	Changes the font size of level 3 headings. Earn and redemption rule title text are forms of level 3 headings.
Text	H3 Font Weight	Changes the font weight of level 3 headers
Text	Body Text Size	Changes the font size of body text. Earn rule, redemption rule and tier descriptors are forms of body text.
Text	Body Font Weight	Changes the font weight of body text.
Text	Body Bold Weight	Changes the font weight of subtitle body text. Examples include question text in FAQ and tier names in VIP tier tables.
Cards	Fill Color	Hex color code used for card backgrounds. These include Earn and Redemption Rules, and Achievements.
Cards	Border Color	Hex color code used on card borders and dividers, throughout the landing page.
Cards	Text Color	Hex color code used on cards. Examples include Earn and Redemption Rules, and Achievements.
Cards	Border Radius	The extent of rounding of corners, on a card.
Cards	Border Width	The border width of cards.
Primary Buttons	Fill Color	Hex color code used on primary buttons backgrounds. Primary buttons include call to actions for Join, Earn and Redemption rules as well as highlighted tabbed sections (for example if the Available tab is selected under Redeem Rewards, it is a primary button).
Primary Buttons	Text Color	Hex color code used on primary buttons text
Primary Buttons	Border Color	Hex color code used on primary buttons borders.
Primary Buttons	Border Radius	The extent to which corners are rounded, on primary buttons.
Primary Buttons	Border Width	The border width for primary buttons.
Primary Buttons	Hover Fill Color	Hex color code used on hover over primary buttons.
Primary Buttons	Hover Text Color	Hex color code used for primary button text, on hover.
Primary Buttons	Hover Border Color	Hex color code used for primary button border, on hover.
Secondary Buttons	Fill Color	Hex color code used on secondary buttons backgrounds. Secondary buttons include unhighlighted tabbed sections (for example if the Redeemed tab is not selected under Redeem Rewards, it is a secondary button).
Secondary Buttons	Text Color	Hex color code used on secondary buttons text
Secondary Buttons	Border Color	Hex color code used on secondary buttons borders.
Secondary Buttons	Border Radius	The extent to which corners are rounded on secondary buttons.
Secondary Buttons	Border Width	The border width for secondary buttons.
Secondary Buttons	Hover Fill Color	Hex color code used on hover over secondary buttons.
Secondary Buttons	Hover Text Color	Hex color code used for secondary button text, on hover.
Secondary Buttons	Hover Border Color	Hex color code used for secondary button border, on hover.

If you have any specific questions or need further assistance, feel free to reach out to our support team.

Reviews Widget Style Glossary

Send Review Request Emails From Klaviyo

Styling a Quiz

Customizing Okendo Loyalty Emails

Customize CTA Buttons in Klaviyo Review Requests

Loyalty Page Plus - Module and Styling Reference Guide