Setting Up the Referrals App Block in Shopify Using Raleon

Introduction

This guide provides step-by-step instructions on how to integrate and customize the Referrals section in your Shopify theme using the Raleon app. This is ideal for enhancing your store's engagement by encouraging referrals through customized and branded referral options.

Requirements

Active account with Raleon with referrals enabled.
Access to Shopify theme editor.

Configuration Steps

Step 1: Enable and Brand Referrals in Raleon

Before adding the referral block to your Shopify site, ensure that you have enabled and customized the referrals in Raleon. This includes setting up the appearance and branding to match your site's design. It's recommended to launch your program before proceeding, although testing can be done beforehand.

Step 2: Add Referral Section to Shopify

Access the Theme Editor: Navigate to your Shopify admin panel and go to the theme editor.
Add the Referral Section: Look for the 'Add section' option within the theme editor. Navigate to the 'Apps' tab and select the Raleon referral section.

Step 3: Customize Referral Settings

Within the theme editor, you can further customize the referral block:

Container Height: Adjust the container height to fit your design needs, especially if you plan to include images or other content around the referral block.
Container Width: Set the overall container width. A common setting is 100% to use the full width of the page.
Spacing and Alignment: Adjust the percentage of space the referral component occupies. For example, setting it to 50% centers it on desktop views and defaults to 100% on mobile for better visibility.
Font Styling: Customize the title and description fonts, sizes, and weights.
Button Customization: Adjust the button's font size, weight, and width. Set the button's background and text colors to align with your brand.

Step 4: Add Visual Elements

Optionally, add images or set colors to enhance the referral block's appeal:

Images: Upload and position images to the left or right of the referral component.
Colors: Set the background color, button background color, and text color to ensure consistency across your site. Its important to set the background color to the same color as your page background.

Step 5: Integration with Klaviyo

To enhance the referral experience with email capabilities:

Email Integration: Connect the Raleon Program with Klaviyo to manage referral notifications and email communications directly through Klaviyo's platform.
Customize Email Interaction: In Raleon's settings, navigate to 'Loyalty Branding' and 'Referrals' to customize the link-sharing experience, including the option to show an email input box for direct email sending via Klaviyo.

Testing and Launch

After setting up and customizing the referral section, test the functionality thoroughly in various user states (e.g., signed in vs. not signed in). Once confirmed, launch the referral program to your customers.