Customize Referral Widget
Plans: All plans Platforms: Shopify
Referral marketing has long been one of the most effective strategies for driving business growth, as it fosters strong customer engagement, generates positive word-of-mouth, and boosts sales without requiring significant investment.
AfterShip Referral simplifies the entire referral marketing process for Shopify users while offering impressive Referral Widget Customization options to enhance the experience for both advocates and referred friends.
Before you start, make sure
Your Shopify store is connected to AfterShip Referral for the referral widget to display on your store.
Log in to your AfterShip Referral account.
Move to the Referral > Campaign section. On this page, you get the option to activate as well as customize the referral widget.
Let's first customize the widget before you can launch it on your store. Click the Customize button to land on the referral widget editor.
On the referral widget editor, you will see three tabs: Settings, Content, and Style that allows you to customize the functionality, customer-facing content, and aesthetics of the referral widget editor.
Under the Settings tab you can define the rewards and conditions for both advocates and referred friends. In case you want to learn in-depth on how to configure the rewards program for your online store, please check this help article.
In the Content settings, you can customize the customer-facing content that will appear on your referral widget.
Here, you can modify the content for the referral widget that will be visible to both advocates, and referred friends when they visit your online store through the referral link. The Content tab is organized into two steps.
In Step 1, you can customize the content for Advocates.
Header: Input your desired text in the Header section to grab visitors' attention.
Description: Provide a short description explaining what the offer includes.
Get link button: Modify the call-to-action button text to encourage advocates to participate in the referral campaign by generating the referral link and inviting their friends and family to your online store.
Copy invite link: Write a text for advocates to copy the referral link to share with friends and family, allowing them to benefit from the referral program.
In step 2, you can customize the content for Referred friends as you did for your Advocates.
Under the Widget section, you can change the text and position (for both desktop and mobile versions) of the referral widget.
You can also decide whether you want to show the referral widget with its icon or not.
This tab is all about the look of the referral widget. It lets you choose colors related to the widget, popup, and buttons. Play around to match the appearance of the referral widget with your store’s theme.
Double-check everything and hit the Save button when you are satisfied.
Once the customization of your referral widget is complete, it's now time to enable it to display on your online store for customers. On the Referral Campaign main page, Activate the referral program by shifting the toggle to the right.
Overview
Referral marketing has long been one of the most effective strategies for driving business growth, as it fosters strong customer engagement, generates positive word-of-mouth, and boosts sales without requiring significant investment.
AfterShip Referral simplifies the entire referral marketing process for Shopify users while offering impressive Referral Widget Customization options to enhance the experience for both advocates and referred friends.
Prerequisite
Before you start, make sure
Your Shopify store is connected to AfterShip Referral for the referral widget to display on your store.
Customize the referral widget
Log in to your AfterShip Referral account.
Move to the Referral > Campaign section. On this page, you get the option to activate as well as customize the referral widget.
Let's first customize the widget before you can launch it on your store. Click the Customize button to land on the referral widget editor.
On the referral widget editor, you will see three tabs: Settings, Content, and Style that allows you to customize the functionality, customer-facing content, and aesthetics of the referral widget editor.
1. Settings
Under the Settings tab you can define the rewards and conditions for both advocates and referred friends. In case you want to learn in-depth on how to configure the rewards program for your online store, please check this help article.
2. Content
In the Content settings, you can customize the customer-facing content that will appear on your referral widget.
Here, you can modify the content for the referral widget that will be visible to both advocates, and referred friends when they visit your online store through the referral link. The Content tab is organized into two steps.
In Step 1, you can customize the content for Advocates.
Header: Input your desired text in the Header section to grab visitors' attention.
Description: Provide a short description explaining what the offer includes.
Get link button: Modify the call-to-action button text to encourage advocates to participate in the referral campaign by generating the referral link and inviting their friends and family to your online store.
Copy invite link: Write a text for advocates to copy the referral link to share with friends and family, allowing them to benefit from the referral program.
In step 2, you can customize the content for Referred friends as you did for your Advocates.
Under the Widget section, you can change the text and position (for both desktop and mobile versions) of the referral widget.
You can also decide whether you want to show the referral widget with its icon or not.
3. Styles
This tab is all about the look of the referral widget. It lets you choose colors related to the widget, popup, and buttons. Play around to match the appearance of the referral widget with your store’s theme.
Double-check everything and hit the Save button when you are satisfied.
Activate the referral program
Once the customization of your referral widget is complete, it's now time to enable it to display on your online store for customers. On the Referral Campaign main page, Activate the referral program by shifting the toggle to the right.
Customer experience
Updated on: 27/03/2025
Thank you!