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

Global Style Settings

These settings apply across the same elements, across all modules, added to the landing page. If you want to apply style settings to a particular module only, then please refer to style overrides, within each module section.

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 H1 text.
Text	H1 Font Weight	Changes the font weight of H1 text.
Text	H2 Text Size	Changes the font size of H2 text. Module title text are forms of H2 text.
Text	H2 Font Weight	Changes the font weight of H2 text.
Text	H3 Text Size	Changes the font size of H3 text. Earn and redemption rule title text are forms of H3 text.
Text	H3 Font Weight	Changes the font weight of H3 text.
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.

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	Adjusts corner rounding of the text container. This setting is only available for full width image styles	Desired border radius value, (in pixels)
Align Content	Adjusts 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

Welcome Header Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module. Only applies if the Welcome Header is not expanded to full width.	Min: 800px Max: 1600px
General / Image Border Radius	Adjusts corner rounding on the Welcome Header image. Only applies if the Style is set to Half Width Image AND is not expanded to full width.	Min: 0px Max: 100px
Text / Primary Text Color	Add a hex color code to adjust the the module title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust the the module body text. Includes the enrolment prompt text.	Hex color code
Text / H1 Text Size	Adjusts the size of H1 text. Includes module title text.	Min: 8px Max: 100px
Text / H1 Font Weight	Adjusts the thickness of H1 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text. Includes the enrolment prompt text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of the module body text. Includes the enrolment prompt text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjust the border width of primary buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust the background color of primary buttons, on hover.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust the text color of primary buttons, on hover.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust the border color of primary buttons, on hover.	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

How It Works Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Image Border Radius	Adjusts corner rounding of images used at each step. Applies to Small Images and Large Images style variants.	Min: 0px Max: 100px
General / Accent Color	Add a hex color code to adjust accented elements. Includes Numbers Only, Brush Numbers, Dots, Small Squares and Large Squares style variants.	Hex Color Code
General / Shading Color	Add a hex color code to adjust the shading of elements. Includes the background colors used for Small Circles, Large Circles, Organic Circles, Small Squares and Large Squares style variants.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust the module title text and step title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust the the secondary text. Includes body text for each step.	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 title text. Includes title text used at each step.	Min: 8px Max: 100px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes title text used at each step.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of the body text used at each step.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of the body text used at each step.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black

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
Rules Displayed	Displays all active earn rules. Select the icon against each to update or upload your own. Select Configure to open the Points Rules section.	Icon \| Upload

Earn Points Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Icon Size	Adjusts the size of icons used in cards. Applies to Icons and Icons In Circles styles.	Min: 8px Max: 60px
General / Image Border Radius	Adjusts corner rounding of images used in each card. Applies to Images style.	Min: 0px Max: 100px
General / Accent Color	Add a hex color code to adjust accented elements. Include check marks against cards.	Hex Color Code
General / Shading Color	Add a hex color code to adjust the shading of elements. Includes background colors against in-built icons for Icons in Circles and Image styles.	Hex Color Code
General / Icon Color	Add a hex color code to adjust in-built icon colors. Applies to Icons and Icons in Circles styles.	Hex color code
Text / Primary Text Color	Add a hex color code to adjust module title text and step title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Used on text elements like points earned, per earn rule (must have Cards view disabled).	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes card title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes card title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text. Includes points earned text and button text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text. Includes points earned text and button text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of cards.	Hex color code
Cards / Border Radius	Adjusts corner rounding of cards.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of cards.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons. Includes call-to-action buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes call-to-action buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes call-to-action buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes call-to-action buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes call-to-action buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover. Includes call-to-action buttons.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes call-to-action buttons.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes call-to-action buttons.	Hex color code
Secondary Buttons / Background Color	Add a hex color code to adjust the background color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Text Color	Add a hex color code to adjust the text color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Border Color	Add a hex color code to adjust the border color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Border Radius	Adjusts corner rounding of secondary buttons. Includes incremental page load buttons ("Show More").	Min: 0px Max: 100px
Secondary Buttons / Border Width	Adjusts the border width of secondary buttons. Includes incremental page load buttons ("Show More").	Min: 0px Max: 10px
Secondary Buttons / Hover Background Color	Add a hex color code to adjust secondary button, on hover. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Hover Text Color	Add a hex color code to adjust secondary button text, on hover. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Hover Border Color	Add a hex color code to adjust secondary button borders, on hover. Includes incremental page load buttons ("Show More").	Hex color code

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
Rules Displayed	Displays all active redemption rules. Select the icon against each to update or upload your own. Select Configure to open the Points Rules section.	Icon \| Upload

Redeem Rewards Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Icon Size	Adjusts the size of icons used in cards. Applies to Icons and Icons in Circles styles.	Min: 8px Max: 60px
Text / Primary Text Color	Add a hex color code to adjust the module title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Used on text elements like points to redeem, per reward rule (must have Cards view disabled).	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 Text. Includes tile title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes tile title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text. Includes points earned text and button text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text. Includes points earned text and button text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of cards.	Hex color code
Cards / Border Radius	Adjusts corner rounding of cards.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of cards.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons. Includes active section buttons and redemption buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes active section buttons and redemption buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes active section buttons and redemption buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes active section buttons and redemption buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes active section buttons and redemption buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover. Includes active section buttons and redemption buttons.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes active section buttons and redemption buttons.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes active section buttons and redemption buttons.	Hex color code
Secondary Buttons / Background Color	Add a hex color code to adjust the background color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Text Color	Add a hex color code to adjust the text color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Color	Add a hex color code to adjust the border color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Radius	Adjusts corner rounding of secondary buttons. Includes resting state section buttons.	Min: 0px Max: 100px
Secondary Buttons / Border Width	Adjusts the border width of secondary buttons. Includes resting state section buttons.	Min: 0px Max: 10px
Secondary Buttons / Hover Background Color	Add a hex color code to adjust secondary button, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Text Color	Add a hex color code to adjust secondary button text, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Border Color	Add a hex color code to adjust secondary button borders, on hover. Includes resting state section buttons.	Hex color code

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

Profile Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Shading Color	Add a hex color code to adjust the shading of elements. Only applies Shaded styles.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust the module title text and tile title text (when using Shaded style).	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes body text (when using Shaded style).	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes tile title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes tile title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the size of body text. Includes body text used in tiles and cards.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text. Includes body text used in tiles and cards.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Emphasis Font Weight	Adjusts the thickness of emphasized body text. Includes body text used in tiles and cards.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards. Cards must be selected as the style.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards. Cards must be selected as the style..	Hex color code
Cards / Text Color	Add a hex color code to adjust the color of card text. Cards must be selected as the style.	Hex color code
Cards / Border Radius	Adjusts corner rounding of profile cards. Cards must be selected as the style.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of profile cards. Cards must be selected as the style.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons. Includes active section buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes active section buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes active section buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes active section buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes active section buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes active section buttons.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes active section buttons.	Hex color code
Secondary Buttons / Background Color	Add a hex color code to adjust the background color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Text Color	Add a hex color code to adjust the text color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Color	Add a hex color code to adjust the border color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Radius	Adjusts corner rounding of secondary buttons. Includes resting state section buttons.	Min: 0px Max: 100px
Secondary Buttons / Border Width	Adjusts the border width of secondary buttons. Includes resting state section buttons.	Min: 0px Max: 10px
Secondary Buttons / Hover Background Color	Add a hex color code to adjust secondary button backgrounds, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Text Color	Add a hex color code to adjust secondary button text, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Border Color	Add a hex color code to adjust secondary button borders, on hover. Includes resting state section buttons.	Hex color code

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

Promotions Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
Text / Primary Text Color	Add a hex color code to adjust module title text.	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes promotion titles.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes promotion titles.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of cards.	Hex color code
Cards / Border Radius	Adjusts corner rounding of cards.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of cards.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes call-to-action buttons against promotions.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes call-to-action buttons against promotions.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes call-to-action buttons against promotions.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes call-to-action buttons against promotions.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover. Includes call-to-action buttons against promotions.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes call-to-action buttons against promotions.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes call-to-action buttons against promotions.	Hex color code

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 image to be added and positioned, adjacent to VIP Tiers. Only applies to 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

Tier Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Icon Size	Adjusts the size of icons.	Min: 8px Max: 60px
General / Image Border Radius	Adjusts corner rounding of images in the module. Applies to Accordians and Accordian Blocks style variants.	Min: 0px Max: 100px
General / Accent Color	Add a hex color code to adjust accented elements. Includes check marks and tier pills.	Hex Color Code
General / Shading Color	Add a hex color code to adjust the shading of elements. Only applies to non-Card style variants.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust module title text and section title text (non-Card style variants only).	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust body text (non-Card style variants only).	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes section title text and tier title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes section title text and tier title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text used in the module.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Emphasis Font Weight	Adjusts the thickness of emphasized body text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards. Applies to the Card style variant only.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards. Applies to the Card style variant only.	Hex color code
Cards / Text Color	Add a hex color code to adjust the color of card text. Applies to the Card style variant only.	Hex color code
Cards / Border Radius	Adjusts corner rounding of cards. Applies to the Card style variant only.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of cards. Applies to the Card style variant only.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover.	Hex color code

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

Refer Friends Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The content area width of the module.	Min: 800px Max: 1600px
General / Image Border Radius	Adjusts corner rounding of images added. Applys only if Expand to Full Width is not selected.	Min: 0px Max: 100px
General / Shading Color	Add a hex color code to adjust the shading of elements. Includes background colors used in share channel buttons.	Hex Color Code
General / Icon Color	Add a hex color code to adjust icon colors.	Hex color code
Text / Primary Text Color	Add a hex color code to adjust module title text and section title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes body text.	Hex color code
Text / H1 Text Size	Adjusts the size of H1 text. Applies to module title text shown guests.	Min: 8px Max: 100px
Text / H1 Font Weight	Adjusts the thickness of H1 text. Applies to module title text shown to guests.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H2 Text Size	Adjusts the size of H2 text. Applies to module title text shown to logged in customers.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Applies to module title text shown to logged in customers.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text used in the module.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Emphasis Font Weight	Adjusts the thickness of emphasized body text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of cards. Applies to modal windows, like Invite History.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of cards. Applies to modal windows, like Invite History.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of cards. Applies to modal windows, like Invite History.	Hex color code
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes main call-to-actions.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes main call-to-actions.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes main call-to-actions.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes main call-to-actions.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover. Includes main call-to-actions.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes main call-to-actions.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes main call-to-actions.	Hex color code

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

FAQ Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The maximum content area width of the module.	Min: 800px Max: 1600px
General / Image Border Radius	Adjusts corner rounding of image added to FAQ. Applies to Accordians and Accordian Blocks style variants.	Min: 0px Max: 100px
General / Shading Color	Add a hex color code to adjust the shading of elements. Applies to Separate Blocks and Single Block style variants.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust the module title text and question text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes answer text.	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes the module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes the module title text	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes icons used to expand sections.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes icons used to expand sections.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text. Includes question and answer text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of body text used in the module. Includes question and answer text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Emphasis Font Weight	Adjusts the thickness of emphasized body text. Includes question and answer text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Border Color	Add a hex color code to adjust the border color. Applies to the Dividers style variant.	Hex color code
Cards / Border Radius	Adjusts corner rounding of cards. Applies to the Separate Blocks and Single Block style variant.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of cards. Applies to the Dividers style variant	Min: 0px Max: 10px

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

Achievements Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The maximum content area width of the module.	Min: 800px Max: 1600px
General / Accent Color	Add a hex color code to adjust accented elements. Includes progress bars.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust the module title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes "completed" text.	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes achievement title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness H3 text. Includes achievement title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of the body text. Includes completion dates, the number of achievement badges and button text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of the body text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of Achievement cards.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of Achievement cards.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of Achievement cards.	Hex color code
Cards / Border Radius	Adjusts corner rounding of Achievement cards.	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of Achievement cards.	Min: 0px Max: 10px
Secondary Buttons / Background Color	Add a hex color code to adjust the background color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Text Color	Add a hex color code to adjust the text color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Border Color	Add a hex color code to adjust the border color of secondary buttons. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Border Radius	Adjusts corner rounding of secondary buttons. Includes incremental page load buttons ("Show More").	Min: 0px Max: 100px
Secondary Buttons / Border Width	Adjusts the border width of secondary buttons. Includes incremental page load buttons ("Show More").	Min: 0px Max: 10px
Secondary Buttons / Hover Background Color	Add a hex color code to adjust secondary button backgrounds, on hover. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Hover Text Color	Add a hex color code to adjust secondary button text, on hover. Includes incremental page load buttons ("Show More").	Hex color code
Secondary Buttons / Hover Border Color	Add a hex color code to adjust secondary button borders, on hover. Includes incremental page load buttons ("Show More").	Hex color code

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.

💡 You can add multiple instances of this module to your landing page and style each individually!

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

Join Program CTA Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The maximum content area width of the module.	Min: 800px Max: 1600px
Text / Primary Text Color	Add a hex color code to adjust the module title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes body text.	Hex color code
Text / H3 Text Size	Adjusts the size of H3 text. Includes the module title text.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes the module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of the body text. Includes button text.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the thickness of the body text. Includes button text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover.	Hex color code

Free Product Showcase

This module only displays active, free product rewards that can redeemed in your loyalty program. Members can view both unused rewards and available rewards. Members can redeem rewards, if they have enough points or view their progress towards other rewards.

💡 The Free Product Showcase only displays free product rewards that are relevant to a member and their VIP tier (where enabled).

💡 The Free Product Showcase can be placed on the same Shopify page template, as the Redeem Rewards module. When this occurs, free product rewards will only display in the Free Product Showcase.

If the Free Product Showcase and Redeem Rewards module are placed on different Shopify page templates, the Redeem Rewards module will display all relevant rewards.

💡 You have the option to automatically hide free product rewards, should you run out of stock. This ensures that your members have the best experience possible, by only redeeming products that have sufficient quantities. To enable this, go to Okendo Admin > Loyalty > Settings and select Hide 'Free Product' rewards when product is unavailable.

If you allow products to be backordered (by selecting the Continue selling when out of stock checkbox against products in Shopify), then any associated free product rewards will continue to display and members can redeem them, should they have enough points.

Field	Description	Options
Style	Used to control iconography against each free product reward.	Icons: Uses icons specified against free product reward. Icons in circles: Encases icons in a circular frame Images: Uses images specified against free product reward. You can use the main image against each product or override this by uploading your own image.
Layout	Controls how free product rewards are laid out in the module.	Carousel: Displayed in a single row, with navigation arrows (to move left and right) to view all rewards. Grid: Rewards are displayed in a responsive grid.
Cards	Controls whether or not each free product rewards 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 free product rewards. 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 free product rewards). 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 Free Products").	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
Rules Displayed	Displays all active free product rewards. Select to choose the existing product image or upload your own. Select Configure to open the Points Rules section.	Product Image \| Upload

Free Product Showcase Style Overrides

Type / Field	Description	Options
General / Inner Page Max Width	The maximum content area width of the module.	Min: 800px Max: 1600px
General / Icon Size	Adjusts the size of icons used in cards. Applies to Icons and Icons in Circles styles.	Min: 8px Max: 60px
General / Accent Color	Add a hex color code to adjust accented elements. Includes notification pills.	Hex Color Code
Text / Primary Text Color	Add a hex color code to adjust module title text.	Hex color code
Text / Secondary Text Color	Add a hex color code to adjust secondary text. Includes warning text.	Hex color code
Text / H2 Text Size	Adjusts the size of H2 text. Includes module title text.	Min: 8px Max: 100px
Text / H2 Font Weight	Adjusts the thickness of H2 text. Includes module title text.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / H3 Text Size	Adjusts the size of H3 text. Includes title text used on cards.	Min: 8px Max: 60px
Text / H3 Font Weight	Adjusts the thickness of H3 text. Includes title text used on cards.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Text / Body Font Size	Adjusts the font size of body text. Includes points required and reward descriptions.	Min: 8px Max: 60px
Text / Body Font Weight	Adjusts the font weight of body text. Includes points required and reward descriptions.	Thin Extra Light Light Normal Medium Semi Bold Bold Extra Bold Black
Cards / Fill Color	Add a hex color code to adjust the background color of Free Product Showcase cards.	Hex color code
Cards / Border Color	Add a hex color code to adjust the border color of Free Product Showcase cards.	Hex color code
Cards / Text Color	Add a hex color code to adjust the text color of Free Product Showcase cards.	Hex color code
Cards / Border Radius	Adjusts corner rounding of Free Product Showcase cards..	Min: 0px Max: 100px
Cards / Border Width	Adjusts the border width of Free Product Showcase cards.	Min: 0px Max: 10px
Primary Buttons / Background Color	Add a hex color code to adjust the background color of primary buttons. Includes section toggles, redemption and apply to cart buttons.	Hex color code
Primary Buttons / Text Color	Add a hex color code to adjust the text color of primary buttons. Includes section toggles, redemption and apply to cart buttons.	Hex color code
Primary Buttons / Border Color	Add a hex color code to adjust the border color of primary buttons. Includes active section buttons, redemption and apply to cart buttons.	Hex color code
Primary Buttons / Border Radius	Adjusts corner rounding of primary buttons. Includes active section buttons, redemption and apply to cart buttons.	Min: 0px Max: 100px
Primary Buttons / Border Width	Adjusts the border width of primary buttons. Includes active section buttons, redemption and apply to cart buttons.	Min: 0px Max: 10px
Primary Buttons / Hover Background Color	Add a hex color code to adjust primary button backgrounds, on hover. Includes active section buttons, redemption and apply to cart buttons.	Hex color code
Primary Buttons / Hover Text Color	Add a hex color code to adjust primary button text, on hover. Includes active section buttons, redemption and apply to cart buttons.	Hex color code
Primary Buttons / Hover Border Color	Add a hex color code to adjust primary button borders, on hover. Includes active section buttons, redemption and apply to cart buttons.	Hex color code
Secondary Buttons / Background Color	Add a hex color code to adjust the background color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Text Color	Add a hex color code to adjust the text color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Color	Add a hex color code to adjust the border color of secondary buttons. Includes resting state section buttons.	Hex color code
Secondary Buttons / Border Radius	Adjusts corner rounding of secondary buttons used on Redeem Rewards cards. Includes resting state section buttons.	Min: 0px Max: 100px
Secondary Buttons / Border Width	Adjusts the border width of secondary buttons, used on Redeem Rewards cards. Includes resting state section buttons.	Min: 0px Max: 10px
Secondary Buttons / Hover Background Color	Add a hex color code to adjust secondary button backgrounds, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Text Color	Add a hex color code to adjust secondary button text, on hover. Includes resting state section buttons.	Hex color code
Secondary Buttons / Hover Border Color	Add a hex color code to adjust secondary button borders, on hover. Includes resting state section buttons.	Hex color code

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

Auto-Styling Your Response Form

Style Settings Glossary

Reviews Widget Style Glossary

Styling a Quiz

Configuring a landing page, using the Loyalty Page builder

Loyalty Page Plus - Module and Styling Reference Guide