Active Campaigns

Description

The Active Campaigns App Block lists all of the currently active Campaigns of the Loyalty Program, along with their campaign description and end date. The Active Campaigns App Block is only visible to logged-in customers, when the Campaigns feature is active, and when there is an Active Campaign at the moment.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Active Campaigns.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when you are done editing.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Card width

• Border radius

• Alignment

• 
  
  

CSS Class Selector

Additional custom CSS is possible using the .sc-loyalties-active-campaigns CSS class identifier. 

Example:

.sc-loyalties-activity {
    /*properties*/
}

Activity

Description

The Activity App Block lists a logged-in customer's activity log, including how many points they’ve earned, claimed, and redeemed with their types and timestamps. The Activity App Block is only visible to logged-in customers.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Activity.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Card width

• Border radius

• Alignment
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-activity CSS class identifier. 

Example:

.sc-loyalties-buy-with-points {
    /*properties*/
}

Buy with Points

Description

The Buy with Points app block provides a customer interface to exchange points for discounts and lists all previously generated discount codes that haven’t been redeemed. The Buy with Points App Block is only visible when the customer is logged-in, they have a positive balance, and the Buy with Points feature is enabled.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Buy with Points.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Card width & height

• Border radius

• Alignment

• Icons (default or from Storefront widget settings)
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-buy-with-points CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Description

The Coupon Rewards App Block displays a logged-in customer's available and claimed coupons. Animations attached to the reward cards can highlight claimable rewards. The Coupon Rewards App block is only visible to logged-in customers and when there are active coupon rewards in the Loyalty Program.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or App Block.

• Click Apps, then select Coupon Rewards.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Progress bar color

• Card width & height

• Border radius

• Alignment

• Icons (default or from Storefront widget settings)

• Claim animations
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-coupon-rewards CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Description

Displays available and claimed custom rewards, with animations highlighting claimable rewards. It’s only visible to logged-in customers and when there is at least one active Custom Reward.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Custom Rewards.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Progress bar color

• Card width & height

• Border radius

• Alignment

• Icons (default or from Storefront widget settings)

• Claim animations

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-custom-rewards CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Customer Profile

Description

The Customer Profile App Block is a composite App block consisting of the following App Blocks:

• Points Balance App Block

• Customer Tier App Block

• Activity App Block

• Active Campaign App Block
  
  

All display conditions mentioned in the individual App blocks apply to the Customer Profile App Block. We recommend adding this App block to the Customer Account page.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Customer Profile.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Border radius

• Icons (default or from Storefront widget settings)
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-customer-profile CSS class identifier.

 Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Customer Tier

Description

Displays the logged-in customer's current Customer Tier, that tier’s qualifications, and its benefits. The drop down also shows all available Customer Tiers. The App block is visible when the Customer is logged-in and at least one public Customer Tier is enabled.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Customer Tier.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Border radius

• Icons (default or from Storefront widget settings)
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-customer-tier CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Points Balance

Description

Displays the customer's current points balance and their point value if the Buy With Points feature is enabled. The Points Balance App block is only visible when the Customer is logged-in.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add Block.

• Click Apps, then select Points Balance.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• App block width

• Border radius

• Alignment
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-points-balance CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Referral and Referral Claim

Referral App Block

Description

Display how many points a customer has earned referring other customers as well as social media and referral links. The Referral App Block is only visible when the Customer is logged-in and the Referral feature is enabled.

How to Add the App Block

• Open the online theme editor by going to the Online Store page and clicking the Customize button for the desired theme.

• Select Add Section or Add block.

• Click Apps, then select Referral.

• Enable the preview option within the App block settings to view the block in the editor.

• Click Save when done.
  
  

Customization Options

• Title text

• Description text

• Background color

• Border color

• Card width

• Border radius

• Alignment
  
  

CSS Class Selector

Additional custom CSS possible using the .sc-loyalties-referral CSS class identifier. 

Example:

.sc-loyalties-coupon-rewards {
    /*properties*/
}

Note : In order for Referrals to work correctly, both Referral App Block and the Referral Claim App embed needs to be enabled in the theme. 

Referral Claim App Embed

Description

Shows a popup for referred customers to claim their reward. It’s only visible to customers who are referred and are not logged-in.

How to Add the App Block

• Open the theme editor by going to the Online Store page and clicking the Customize button.

• Select App embeds on the far left of the Theme editor.

• Enable the Referral Claim App Embed.

• Enable the preview option (ensure it is turned off before publishing).

• Click Save when done.
  
  

Customization Options

• Background color

• Border color

• Text color

• Border radius
  
  

CSS Class Selector

Additional custom CSS possible using the

.sc-loyalties-referral-claim 

 CSS class identifier. 

Example:

.sc-loyalties-referral-claim {

    /*properties*/

}

Note : In order for Referrals to work correctly, both Referral App Block and the Referral Claim App embed needs to be enabled in the theme.