Wix Referral Program: Customizing Your Referral Program Pages
When you add the Wix Referral Program to your site, 2 new site pages are automatically generated. Your new Refer Friends page shares details of your referral program with site visitors. Your new Referral Landing Page is the page referred friends see when they click a referral link.
Customize these pages' settings, design and layout to match the style of your site.
Tip:
In addition to the customization options unique to the Wix Referral Program, you can use various tools within the Wix Editor or Studio Editor to customize elements on your pages.
Customizing your Refer Friends page
From your editor, make your mark on your new Refer Friends page. Customize the design and layout to inform your visitors of your program perks and encourage them to take part.
To customize your Refer Friends page:
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Referral Pages.
Click the Refer Friends page.
Click the Refer Friends element on your page.
Choose what you want to do:
View the page from a different visitor's perspective
You can "switch the state" of your Refer Friends page to view it from the perspectives of different visitors.
Click Switch State.
Use the drop-down to view how your site will appear to:
A customer who is logged in.
A customer who is logged out.
A referred friend who is visiting the page.
Show or hide parts of the Refer Friends element
Click the Elements icon
.
Select or deselect the checkboxes to show or hide text and visuals.
Change the text on the page
You can edit certain text, including your program info and the text on your "Copy" button. Write a few lines to share program perks and let customers know why they should start referring.
Click the element of the text you want to edit.
Depending on the element you've selected, click Edit Text, Change Text & Icon, or begin typing.
Tip: Click the AI Tools icon
to generate or improve your text.
Note: Certain content (e.g. Title, Description, Terms and Conditions) is automatically generated based on how you've set up your program in your dashboard. This text cannot be edited in the editor. To change it, update your program details.
Change the design of the page
Click the Design icon
.
Select a pre-made design or click Customize Design to individually customize elements on the page.
Change the layout of the page
Customize the layout of your Refer Friends page in any of the following ways:
Change the padding of the main element: Click the Layout icon
to change the padding.
Change the alignment of text within the content box:
Click the Content Box element on your page
Click the Layout icon
and select the alignment you'd like to use.
Change the alignment of text within the banner:
Click the Banner element on your page.
Click the Layout icon
and select the alignment you'd like to use.
Studio Editor
Click Pages
on the left side of the editor.
Click Refer Friends under Referral Pages.
Click the Refer Friends element on the page.
Choose what you want to do:
View the page from a different visitor's perspective
You can "switch the state" of the Refer Friends page to view it from the perspectives of different visitors.
Click Switch State.
Use the drop-down to view how your client's site will appear to:
A customer who is logged in.
A customer who is logged out.
A referred friend who is visiting the page.
Show or hide parts of the Refer Friends element
Click the Elements icon
.
Select or deselect the checkboxes to show or hide text and visuals.
Change the text on the page
You can edit certain text, including the program info and the text appearing on the "Copy" button. Write a few lines to share program perks and let customers know why they should start referring.
Click the element of the text you want to edit.
Depending on the element you've selected, double click to begin typing or click Settings.
Tip: Click Create AI Text to have the AI Text Creator generate text for you.
Note: Certain content (e.g. Title, Description, Terms and Conditions) is automatically generated based on how you've set up your program in your dashboard. This text cannot be edited in the editor. To change it, update your program details.
Change the design of the page
Click the Open Inspector icon
at the top right of the editor.
Select the element you want to design.
Use the available options in the Inspector panel to design the element.
Change the layout of the page
Customize the layout of your Refer Friends page in any of the following ways:
Change the padding of the main element: Click the Layout icon
to change the padding.
Change the alignment of text within the content box:
Click the Content Box element on your page
Click the Layout icon
and select the alignment you'd like to use.
Change the alignment of text within the banner:
Click the Banner element on your page.
Click the Layout icon
and select the alignment you'd like to use.
Customizing your Referral Landing Page
From your editor, design your new Referral Landing Page. This is the page referred friends see when they click a referral link. It may be their first experience of your brand, so make sure it makes an impact and encourages them to browse.
Note:
Currently, it is not possible to move the Content Box within the Referral program pages.
To customize your Referral Landing Page:
Wix Editor
Click Pages & Menu
on the left side of the editor.
Click Referral Pages.
Click the Referral Landing Page.
Click the Refer Friends element on your page.
Choose what you want to do:
View the page from a different visitor's perspective
You can "switch the state" of your Referral Landing Page to view it from the perspectives of different visitors.
Click Switch State.
Use the drop-down to view how your site will appear to:
A referred friend who is logged in.
A referred friend who is logged out.
Show or hide parts of the Referral Landing Page element
Click the Elements icon
.
Select or deselect the checkboxes to show or hide text and visuals.
Change the text on the page
You can edit certain text, including your reward info and the text on your "Copy" button.
Click the element of the text you want to edit.
Depending on the element you've selected, click Edit Text, Change Text & Icon, or begin typing.
Tip: Click the AI Tools icon
to generate or improve your text.
Note: Certain content (e.g. Title, Subtitle) is automatically generated based on how you've set up your program in your dashboard. This text cannot be edited in the editor. To change it, update your program details.
Change the design of the page
Click the Design icon
.
Select the part of the page you want to edit and then choose fonts, colors, etc. to match your brand.
Change the layout of the page
You can change the alignment of text within the content box on your Referral Landing Page.
Click the Content Box element on your page and click the Layout icon
to select the alignment you'd like to use.
Studio Editor
Click Pages
on the left side of the editor.
Click Referral Landing Page under Referral Pages.
Click the Refer Landing Page element on the page.
Choose what you want to do:
View the page from a different visitor's perspective
You can "switch the state" of your Referral Landing Page to view it from the perspectives of different visitors.
Click Switch State.
Use the drop-down to view how your site will appear to:
A referred friend who is logged in.
A referred friend who is logged out.
Show or hide parts of the Referral Landing Page element
Click the Elements icon
.
Select or deselect the checkboxes to show or hide text and visuals.
Change the text on the page
You can edit certain text, including your reward info and the text on your "Copy" button.
Click the element of the text you want to edit.
Depending on the element you've selected, double click to begin typing or click Settings. Tip: Click Create AI Text to have the AI Text Creator generate text for you.
Note: Certain content (e.g. Title, Subtitle) is automatically generated based on how you've set up your program in your dashboard. This text cannot be edited in the editor. To change it, update your program details.
Change the design of the page
Click the Refer Friends element on the page.
Click the Design icon
.
Customize the elements on the page using the sidebar.
Change the layout of the page
You can change the alignment of text within the content box on the Referral Landing Page.
Click the Content Box element on the page and click the Layout icon
to select the alignment you'd like to use.