When you
add a Wix Loyalty Program to your site, 2 new site pages are automatically generated. Your new Loyalty Program page shares details of your program with visitors. Your new My Rewards page is where is program members keep track of their points and rewards. Customize these pages to match the style of your site.
In this article, learn more about customizing your loyalty program pages:
Customizing your Loyalty Program page
From your Editor, make your mark on your new Loyalty Program page. Customize the design and layout to inform your visitors of your program perks and encourage them to sign up.
To customize your Loyalty Program page:
- Click Pages
on the left side of the Editor. - Click Main Pages.
- Click the page named after your loyalty program. This is the name you chose during setup.
- Click the Loyalty element on your page and click Settings.
- Choose what you want to customize:
Header and program details
Click the Display tab.
Select and deselect checkboxes to see your page display changing live. Decide whether you'd like to include a header, image, title, subtitle, program details and steps.
If you've added
tiers, you'll be able to choose the tiers info displayed as well.
Note: You must include a header or program details. Deselecting one will select the other by default.
Click the Layout tab.
Select different options to see your page changing live. Choose your preferred layout and customize many aspects of your header and program details. If you've added
tiers, you'll be able to customize the layout of tiers info too. Upload your own image and points icon to keep your page on brand.
Note: To change your points icon, click the Main tab and click Manage Program to access your program dashboard.
Click the Text tab.
- Edit your page title and subtitle to draw visitors' attention to your program.
- Edit the text of your two buttons: The button visitors click to sign up and the button members click to view their points.
- Edit the text in your program details section.
- If you've added tiers, edit the title and description of your tiers section.
Click the Design tab and click Header.
Customize your header and the image and button within it. Set background color, opacity and more. Make your button stand out to encourage visitors to click.
Click the Design tab and click Program Details.
Design the cards that outline your program steps. Try out different colors, border styles and more. Choose the font and color of the text to make it stand out.
Click the Design tab and click Tiers.
If you've added
tiers, design the cards that outline your tiers. Try out different colors, border styles and more. Choose the font and color of the text to make it stand out.
Customizing your My Rewards page
From your Editor, design your new My Rewards page. A visitor signing up to be member of your site or loyalty program will have access to their own personal My Rewards page when logged in. Make sure it clearly presents rewards information to your loyalty program members.
To customize your My Rewards page:
- Click Pages on the left side of the Editor.
- Click Member Pages.
- Click the My Rewards page title.
- Click the My Rewards element on your page and click Settings.
- Choose what you want to customize:
Click the Layout tab.
Select different options to see your page changing live. Choose your preferred layout and customize spacing, padding and alignment.
Click the Text tab.
Under Page Header, edit your page title and description to let members know how they can use this page.
Click the Text tab and scroll to Rewards list.
Edit the text in the Section title field. This is the title shown above your rewards cards.
Members will see up to three buttons depending on the rewards available to them. Choose the button text you'd like to edit:
- Copy code button: This button appears next to an activated coupon. It allows members to copy a discount code to use at checkout.
- Redeem points button: This button appears next to an available coupon. It allows members to redeem points for that coupon.
- Apply reward button: This button appears next to an available reward. It allows members to redeem points for a restaurant order discount. This reward type only applies to sites with the Wix Restaurants app installed.
Click the Design tab and click Text Style.
Edit the font and color of the text in your header, total points section and rewards list. Under Rewards list, click the With rewards and Without rewards tabs to customize the text that members see when they have and haven't got rewards.
If you've added
tiers, customize the text design of the widget that displays your customer's current tier.
Background and borders design
Click the Design tab and click Backgrounds and Borders.
Design the background of each section of the page, including opacity, color and borders. You can also make changes to the divider lines that show between individual rewards.
Buttons and progress bar design
Click the Design tab and click Buttons and Progress Bar.
Customize the font, color, corners and borders of your buttons. Choose the buttons you'd like to customize and click the relevant tab:
- Primary: These buttons relate to rewards waiting to be activated (e.g. the member has the number of points required to redeem an award).
- Secondary: These buttons relate to rewards already activated (e.g. copying the code of an activated coupon).
