Star Products & Rewards
What this section does
Showcase of coffee rewards: free gifts redeemable with stars and menu items that earn stars (bento showcase, reward cards, tabbed menu, counter list, carousel)
Where it goes
- Can be used as many times as you like on one page.
- This section comes with the Loyalty Program plugin.
Styles
Different looks for the same section. You can change the style later; your content stays as it is.
The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.
Artisan Reward Cards
Freereward-cardsCoffee shop rewards grid with photos, star price badges, and personal progress meters
Specific to this style: title, showTitle, subtitle, showSubtitle, rewardType, showImages, showBadges, showProgress, showRedeemStatus, columns, tabletColumns, mobileColumns, accentColor, surfaceColor
Bento Showcase
Freebento-gridModern asymmetric bento layout spotlighting the featured gift coffee and quick earn items
Specific to this style: title, showTitle, subtitle, showSubtitle, rewardType, showImages, showBadges, showProgress, showRedeemStatus, columns, tabletColumns, mobileColumns, accentColor, surfaceColor
Barista Counter List
Page Editorcompact-listCompact rows with drink thumbnails and star pills, optimized for rapid counter exploration
Specific to this style: title, showTitle, subtitle, showSubtitle, rewardType, showImages, showBadges, showProgress, showRedeemStatus, columns, tabletColumns, mobileColumns, accentColor, surfaceColor
Rewards Carousel
Page EditorcarouselHorizontal swipeable carousel showcasing drinks with touch friendly slide controls
Specific to this style: title, showTitle, subtitle, showSubtitle, rewardType, showImages, showBadges, showProgress, showRedeemStatus, columns, tabletColumns, mobileColumns, accentColor, surfaceColor
Settings
The fields you see in the Section Settings panel on the right when this section is selected.
Shared by every style
- bg
- contentMaxWidth
- sectionMaxWidth
- horizontalPadding
- verticalPadding
- verticalAlignment
- horizontalAlignment
- horizontalMargin
- verticalMargin
- spacingOverrides
- animationType
- animationDuration
- animationDelay
- animationEasing
- animationStagger
- animationRepeat
- animationParallax
- imageParallax
- photoFocusX
- photoFocusY
- animationScrollEffect
- height
This page is generated straight from the product's own section definitions, so a newly shipped section appears here too.