Skip to main content

[Shopify] Customizing your referral emails, pages, and widgets

Customize the text, branding, and content of your Shopify referral campaign emails, pages, and supported widgets in the Visual Editor.

Written by Adam

This article discusses features and capabilities available only for Shopify merchants. If you're using another platform, visit this article.

Your campaign's Theme controls how your referral emails, pages, and supported widgets look to your customers. The Visual Editor lets you customize text, branding, fonts, and supported block content without touching code. Branding set at the Theme level (logo, colors, fonts) cascades to every email and ReferralCandy-hosted page using that Theme — with separate fine-tuning available for emails vs pages when you need it.

What this article covers (and what it doesn't)

This article is for Shopify merchants using ReferralCandy.

It covers how to edit your ReferralCandy campaign Theme in the Shopify embedded app, including:

  • Shared branding across your campaign emails and ReferralCandy pages

  • The available emails, pages, and widgets shown in the Visual Editor

  • Where to edit common theme content

Shopify checkout blocks/extensions and campaign Widget settings also have controls outside the Visual Editor. Use these guides for their full setup:

  • Referral extension (Shopify checkout "Thank you" page block) → text and banner image in your campaign's Widgets settings; design and icon visibility in Shopify Checkout Editor. To change the main sharing button, use Theme settings > Primary sharing method.

  • Customer referral details extension (Customer Account block) → edited in Shopify Theme/Customer Account Editor + your campaign's Widgets settings

  • Join block (storefront embedded signup block) → form fields edited in your campaign's Widgets settings; layout, text, and styling edited in the Shopify theme editor (click the placed block)

If you're trying to edit something and cannot find it in the ReferralCandy Visual Editor, check whether that element is edited in Shopify or in your campaign's Widgets settings instead.


Quick map: where to edit what

Use this as a quick routing guide when you're trying to figure out where something should be edited.

Edit in ReferralCandy → Campaigns → select your campaign → Themes → Customize:

  • Campaign emails shown in the Theme

  • ReferralCandy pages shown in the Theme

  • Theme assets and shared branding

  • Content for editable blocks shown inside the Visual Editor

  • The main sharing button (Primary sharing method) — also used by the Referral extension; choose the shared default in Theme settings > Primary sharing method

Edit in Shopify and/or your campaign's Widgets settings:

  • Referral extension text, banner image, design, and icon visibility. To change the main sharing button, use the Primary sharing method control in Theme settings.

  • Customer referral details extension

  • Join block — placement, layout, and text in the Shopify theme editor; form fields in your campaign's Widgets settings

  • Shopify app block / app embed layout or placement

Rule of thumb:

  • If the item appears inside the ReferralCandy Visual Editor, edit it there

  • If it does not appear there, it is likely edited elsewhere


Open the Visual Editor

  1. In your Shopify admin, go to ReferralCandy.

  2. Click Referral campaigns.

  3. Select the campaign you want to edit.

  4. Click Themes.

  5. Find the Theme you want to work on.

  6. Click Customize.

This opens Theme Assets. Choose the email or page you want to edit. If a theme is marked Emails upgraded · View only, its View button opens the older version; use Customize on the upgraded theme for email editing.


Editing content inside the Visual Editor

Inside the Theme, the available emails, pages, and widgets are grouped into sections. Depending on the Theme, you may see sections like:

  • Entry

  • Engagement

  • Friend Experience

  • Notification Emails

  • Advocate Account Pages

Open the section you want, then click the specific email, page, or widget you want to edit.

Examples of items you may be able to edit here include:

Note: Some Themes may also show legacy Post-Purchase Widget and Referral Widget assets in the Entry section. These are kept for back-compatibility with older campaigns. For your current widgets — Referral extension, Friend offer popup, Join block, Customer referral details extension, Cookie consent — start from your campaign's Widgets settings and follow the guide for that widget's controls. The Referral extension's Primary sharing method is a theme setting: change the main sharing button in Theme settings > Primary sharing method.

For pages and older email editors with controls on the left:

  1. Click the block or section you want to edit in the preview

  2. Update its settings in the left sidebar

  3. Use the right sidebar preview options when needed

  4. Click Save when finished

Common examples:

  • Click the email subject area to edit the subject

  • Click the header area to edit the logo or banner-related content

  • Click the main content block to edit headings, body text, CTA text, and similar content

  • Click footer areas to edit footer text such as opt-in reminders or unsubscribe-related text

  • Click form sections on pages like the Join Page to edit labels, placeholders, descriptions, button text, and similar fields


Languages and translations

If your campaign uses multiple languages, ReferralCandy provides default translations for the standard content in supported languages. After you enable a language for your campaign, the default translations are immediately available on the Theme — we recommend reviewing each one to make sure the wording matches how you'd describe your campaign, and editing any that don't fit your preferred tone or terminology. See Enabling multiple languages for your campaign to add or remove languages.


What kinds of things can usually be edited here?

The Visual Editor is best for standard content and branding edits, such as:

  • Logo and banner images

  • Colors and fonts

  • Email subject lines

  • Headings and body text

  • CTA button text

  • Form labels, placeholder text, and descriptions

  • Footer text — You can add a custom link in the Advocate Portal, such as a link to your Terms and Conditions. In the Visual Editor, open Advocate Account Pages → Advocate Portal, select Share, and click the page in the preview. In the left sidebar, find Footer text, enter and highlight your link text, click the Link icon, paste the URL, and click Apply. Click Save when finished.

  • "How it works" section text

  • Supported widget text shown in the Theme

Not every block will expose the same settings, and available options can vary by Theme.


Not everything visible in the preview is edited the same way

When you see something in the Visual Editor preview, it may fall into one of these categories:

  1. Directly editable in the selected block

    • Click the relevant block in the preview

    • Edit the available fields in the settings panel

  2. Controlled by the parent block

    • Some visible items do not have their own separate editing controls

    • Instead, they are part of a larger selected section, and only certain fields from that section are exposed for editing

  3. Generated from campaign settings

    • Some content is rendered automatically from campaign settings, rewards, offers, conditional logic, or other dynamic values

    • In those cases, update the campaign setting that feeds that content, then return to the preview to confirm the result

Important:

  • A visible item in the preview is not always independently editable

  • If clicking a specific item does not open dedicated controls for that exact item, check whether it belongs to a parent block or is generated from campaign settings


How the Visual Editor is organized

The layout depends on the asset and editor version. The page editor and older email editor use the arrangement below. Upgraded emails use the new email editor.

Older email editor: settings on the left, preview in the centre and preview options on the right.

Welcome Email editor with text controls on the left, the Refer-a-friend email preview in the centre, and Friend Offer and Tier Position preview controls on the right.
  1. Main preview area

    • This shows the current email, page, or widget preview

    • Click a block or section in the preview to edit that specific item

    • Some editable items are not immediately obvious at first glance, such as the email subject line at the top of email previews

  2. Left sidebar

    • This shows the editing options for the currently selected block or section

    • The settings shown here change depending on what you clicked in the preview

  3. Right sidebar

    • This shows preview options for the current item

    • Depending on what you are editing, this can include preview variations such as reward tier position, friend offer state, page state, or other preview controls

At the Theme level, you'll also see Theme settings, where you can manage shared branding and styling across the Theme.


Editing an email in the new editor

If your email opens with Sections on the left and Settings, Translations and Checks on the right, use these controls:

  1. Select a section or block in the Sections list or on the email preview. Edit text on the email; use the right-hand Settings panel for the selected item's appearance, spacing and other available controls.

  2. Open Subject and preview text above the email to edit those fields. Check the selected Language and Preview as option: different preview variants can have different subject and preview text.

  3. Use Desktop and Mobile to check the layout. Use Translations to review your enabled languages and Checks to see missing-text or other save checks.

  4. Save your changes and check that the top bar shows Saved before leaving.

New Welcome Email editor with Sections on the left, the email preview in the centre, and Share channels in the selected Share buttons block's Settings panel on the right.

Select Page for settings that apply to this email. The panel distinguishes Button style for this email from settings inherited From theme, and provides Change it for every email in theme settings for shared defaults.

For the main sharing button, select Your primary sharing method under Link destination, then use the separate Sharing method selector to inherit the theme setting or choose a channel for this email. See Choose the main sharing method.


Theme settings (full settings page)

From Themes, click Customize on the theme, then Theme settings on the Theme Assets page. This is where you manage shared branding, including logo, banner, colors, fonts, favicon and email footer defaults. Individual assets can also have their own overrides.

Default theme colors match your store's brand colors automatically — RC pulls them from your Shopify store when you create a new Theme, so your defaults will look unique to your store rather than a fixed palette.

The first two settings, just below the Page/Email tabs, are your Theme-wide images. They stay visible on both tabs, because they apply to every page and email in the Theme:

  • Logo image (recommended: 260 × 200px max; PNG, JPG, or WebP) — the logo at the top of your pages and emails.

  • Banner image (recommended: 1200 × 300px; PNG, JPG, or WebP) — the wide image directly below the logo. If you are trying to change the picture under your logo on the Thank You Page, the Join Page, or a campaign email, this is the setting you want.

Note: in your published pages and emails, the banner is shown at full width and keeps the proportions of the file you upload — it is not cropped or stretched to fit. The 1200 × 300px recommendation is a shape (wide and short, about 4:1), not just a file size.

If your banner does not look right, the shape is almost always why. One that fills the whole email, or pushes the rest of the content down the page, is too tall. And because the small preview beside the upload button is banner-shaped, a taller image shows there as a cropped slice rather than the whole picture — so the preview and the finished page disagree. Re-crop your file wide and short and both go away.

Use the Page/Email tabs at the top of the panel to configure each surface separately.

Page tab — controls how your ReferralCandy pages render:

  • Theme colors: Primary, Heading, Text, Background, Accent, Card

  • Page Fonts: Heading font, Body font — pick from the built-in font library, or upload your own font (WOFF2, WOFF, TTF, or OTF, up to 2MB)

  • Favicon (recommended: 32 × 32px; ICO, PNG, GIF, JPG, or SVG — appears in the browser tab)

Email tab — controls how your campaign emails render:

  • Buttons: Button & link color, button style (Filled or Outlined), button text color, corner radius

  • Email Font: Heading font, Body font — web-safe fonts only; email clients don’t support custom fonts, so uploaded fonts apply to pages, not emails

  • Email Footer defaults: Permission Reminder, Email Preferences Link Text, Unsubscribe Link Text


Choose the main sharing method

The theme’s Primary sharing method chooses the featured sharing option on the Share Page and in emails that inherit it. The setting also applies to a Referral extension that shows a main sharing button. An email with its own sharing method keeps that choice when the theme default changes.

  1. Open your campaign’s Themes and click Customize on the theme you want to edit. Use the Selected theme for the campaign’s current design.

  2. On Theme Assets, click Theme settings.

  3. Find Primary sharing method and choose WhatsApp, Facebook, Messenger, X, Telegram, Email, Copy link or Threads. Choose the option your customers are most likely to use.

  4. Click Save.

Theme settings Primary sharing method control, showing WhatsApp and help explaining that an email-specific choice takes precedence.

Use a different sharing method in one email

In the block email editor, the main Button has two separate controls: Link destination chooses where it goes; Sharing method chooses the channel when that destination is Your primary sharing method.

  1. From Theme Assets, open Welcome Email and select its main Button in the preview or Sections list.

  2. Under Link, set Link destination to Your primary sharing method. The other destinations are The friend offer page (referral link), The advocate portal and The store home page.

  3. In Sharing method, choose Theme setting to inherit the current theme default, or select one of the eight channels for this email. The selector shows the inherited channel in parentheses, such as Theme setting (WhatsApp) or Theme setting (Copy link).

  4. Save the email and check that it shows Saved before leaving.

The email’s Sharing method applies to every main share button in that email. To change the shared default, use Theme settings → Primary sharing method; to choose the separate row of icons, use Share buttons.


Inline Theme controls inside the asset editor

In the page editor and older email editor, the left sidebar can show a Page Design section with Theme-level controls. These shared controls edit the same Theme data as the Theme settings page. In the new email editor, use the Page settings and their labels to distinguish this-email overrides from Theme defaults.

What you'll see varies by asset type:

  • Page-type assets (Join Page, Thank You Page, Friend Offer Page, etc.) show the full Page Design block — all 6 theme colors (Primary, Heading, Text, Background, Accent, Card) and both fonts (Heading + Body), same as the Theme settings page's Page tab. Page-type assets may also surface asset-specific controls above Page Design — for example, the Join Page shows a Layout selector with Single Column / Split Panel / Hero Form / Card Form options.

  • Older email editors can show a minimal Page Design block, typically just Primary Color. The new email editor uses Page and the right-hand Settings panel instead.

  • The Header block in older email editors can show Logo image and Banner image labelled From theme settings. Those are shared Theme images. The Show logo and Show banner controls apply to the individual asset. In the new editor, check the selected block’s settings and use Theme settings for the shared images.

  • To choose the shared Primary sharing method, open Theme settings from Theme Assets. See Choose the main sharing method for the default and per-email override steps.

    This setting only changes which sharing option is primarily highlighted. It doesn't remove the other share methods, and it doesn't change your default Facebook/X/WhatsApp share copy — those are edited in Editing the default X, Facebook and WhatsApp sharing message. To choose which sharing icons appear in your campaign emails — or hide them — see Choosing the social sharing icons in campaign emails below.

Changes to shared Theme controls affect assets using those defaults. Settings labelled for this email only apply to that email.

Notes:

  • Theme settings affect that Theme's emails and ReferralCandy pages. Primary sharing method also sets the Referral extension’s main sharing button when it shows one.

  • They do not control Shopify checkout extension styling outside the Theme editor

  • Available settings can vary slightly by Theme

When you're done, click Save.


Showing or hiding the friend discount code

You can keep sharing focused on the referral link by hiding the friend discount code on supported stock-theme pages. The referral link and offer description stay visible; the code and its copy button are hidden. Codes are shown by default.

For a referral campaign’s portal, open Advocate Account Pages → Advocate Portal, select Share, and click the sharing area in the preview. In the left sidebar, turn off Show friend discount code. Check the Dashboard view too. For friend offers, open Friend Experience → Friend offer landing and check both Page and Popup. Preview each surface you want to change, then click Save. Developer-mode themes do not use this setting.

For an affiliate campaign, open Affiliate Account Pages → Affiliate Portal, select Dashboard, and click the sharing toolkit in the preview to open the Home Page controls. This is where you can find Show friend discount code; the affiliate’s Login view does not show their sharing toolkit.

Hiding the code changes its display, not the coupon itself or referral tracking. It does not make the code secret: it may still be visible in a discount link or at checkout. Advocate reward codes and campaign benefit codes have their own purpose and are not hidden by this setting.

Friends can continue through the referral link to use the offer at Shopify checkout. Check the complete checkout flow before hiding codes on a headless or custom storefront; see Testing the referral process.

Shopify Advocate Portal editor with Share selected and Show friend discount code in the left sidebar.

The Share button on referral pages

On supported stock-theme pages, Share opens the device’s own share menu. Advocates choose an available app, such as Messages (SMS), and complete the send there. The available apps depend on their device and browser; opening the menu does not send a message.

The button appears only in browsers that support a device share menu. Supported surfaces include the advocate portal’s Share Page and rewards dashboard. Older stock themes and developer-mode themes do not include this button. It is separate from the sharing controls in campaign emails and Shopify extensions.

To choose whether it appears on a referral campaign’s portal, open Advocate Account Pages → Advocate Portal, find Social icons to show in the left sidebar. Select or clear Share button. This panel also lets you choose WhatsApp, X, Email, Facebook, Messenger, Telegram and Threads. Keep Show social sharing icons on to display your selected buttons. Click Save. The browser still needs to support the device share menu for the button to appear.

For an affiliate campaign, open Affiliate Account Pages → Affiliate Portal → Dashboard and click the sharing toolkit. Under Home Page → Social icons to show, select or clear Share button, then save.

The Share button uses the campaign’s WhatsApp message, including its language and paused/stopped variants. Edit that text in Social media messages; see Editing the default X, Facebook and WhatsApp sharing message. Advocates can still copy their referral link into another app.

Shopify Advocate Portal editor with Show social sharing icons and the Share button checkbox in the left sidebar.

Choosing the social sharing icons in campaign emails

Campaign emails can include a row of sharing icons, giving advocates more ways to share their referral link. Keep the channels that suit your audience. Each email has its own selection, so repeat your changes for every email you want to adjust.

Block email editor

  1. Open the email and select its Share buttons block in the preview or Sections list.

  2. In the right-hand Settings panel, expand Share channels. Select or clear Facebook, WhatsApp, Email, Copy link, Messenger, X, Telegram or Threads. At least one channel must stay selected in this picker.

  3. Use Skip the channel the main button uses if you do not want that channel repeated in the row.

  4. To hide the sharing section, use that section’s ... menu in the left-hand list and choose Hide in the email customers receive. This hides the whole section, including its text. The main button is in a separate section in the default Welcome Email layout; if you rearranged the blocks, check the section’s contents first.

  5. Preview the email, save your changes and check that it shows Saved before leaving.

Older editable email editor

If the left sidebar shows Show social share icons and Social icons to show, use the first control to hide the row or select individual channels under the second, then click Save. In that editor, hiding the Welcome Email’s social icons while a social channel is the primary sharing method switches the primary option to Copy link. The block editor’s channel picker and section Hide action are different controls.


Where merchants usually get confused

If you're trying to edit something specific, use these checks first:

  1. Is it inside a ReferralCandy campaign email or ReferralCandy page preview in Themes?

    • Edit it in the Visual Editor

  2. Is it on Shopify's Thank you / Order status page, customer account area, or a Shopify app block surface?

    • That is usually edited in Shopify and/or your campaign's Widgets settings. For the Referral extension's main sharing button, use Theme settings > Primary sharing method; see how to change the main sharing button.

  3. Is it a placement/layout question rather than a text/content question?

    • That is often controlled in Shopify's editor, not the ReferralCandy Theme editor


How tiered rewards appear in campaign emails and pages

If you're using Tiered rewards (FlexiTiers), your campaign emails and pages can show a reward tiers table to encourage advocates or affiliates to reach those milestones.

Important:

  • The reward tiers table is automatically generated from your campaign's Advocate reward tier settings

  • In supported themes, you may see this table in the Visual Editor preview

  • The table itself may not be directly editable as a separate block in the Visual Editor

  • To change the tier ranges or reward descriptions shown in the table, update the Advocate reward settings for the campaign

For example:

  • The referral range shown in the table comes from the tier setup

  • The reward text shown in the table comes from the reward description for that tier

To update the rewards shown in the table:

  1. Open ReferralCandy in Shopify

  2. Go to Referral campaigns

  3. Select your campaign

  4. Open the Advocate reward / Tiers settings

  5. Update the referral ranges or reward descriptions for each tier

  6. Save your changes

  7. Return to Themes or the Visual Editor to confirm how the updated tiers appear in the preview


FAQ

How do I edit without affecting live customers?

Best practice:

  1. Go to Themes

  2. Click the ... menu on your current Theme

  3. Click Duplicate

  4. Edit the duplicate Theme first

  5. When ready, go back to Themes and click Select on the Theme you want to activate

Why can't I find the thing I want to edit?

Check whether it appears inside the ReferralCandy Theme editor first. If not, the most common alternatives are:

  • Your campaign's Widgets settings — for ReferralCandy storefront widgets (Referral extension, Friend offer popup, the Join block's form fields, Customer referral details extension, Cookie consent). The Referral extension's main sharing button is a theme setting: change the main sharing button through Theme settings > Primary sharing method.

  • Directly in Shopify — for checkout block placement, customer account block, or app block layout and text (the Join block's layout, text, and styling are edited in the Shopify theme editor)

Why do the available settings look different from another merchant's account?

Available sections, blocks, and settings can vary depending on the Theme and the specific campaign setup.

Why can't I click the reward tiers table to edit it in the Visual Editor?

The reward tiers table is generated automatically from your campaign's Advocate reward tier settings. In supported themes, it may appear in the preview, but it is not always editable as its own standalone block in the Visual Editor. To change the content shown in the table, update the campaign's tier settings instead.

Why are the emails and pages different for my affiliate campaign?

Affiliate campaigns use the Affiliates Theme. For integrated signup forms, edit the questions in Join Page → Form Steps or Affiliate Portal → Join → Signup form, depending on the editor your theme shows. If your theme has a separate Onboarding → Signup Details Page, edit its fields there. See Managing affiliate signups for the form-editing steps.

To manage invitations and whether public applicants need approval, use Affiliates > Enrollment.

What is the "Friend's name" field on the Share Page?

The "Friend's name" field is optional. It lets your advocate add a friend's name before sharing their referral link, so the referred friend sees a more personal greeting after they click the link (for example: "Hi Alice").

Leaving it blank won't affect referral tracking, friend offers, or rewards — the link still works as normal.

In the Theme editor (Share Page), you can edit the "Friend's Name Field Text" label, or hide the field using the "Hide friend name field text" option.

Regarding selecting one Primary sharing method: can advocates still share using other channels?

Yes. The primary sharing method only sets the default/featured button. Advocates can still choose the other sharing icons/links. In campaign emails, the icons advocates see are the ones you've left enabled under Share channels in the new editor, or Social icons to show in the older editor — any you've hidden won't appear.

Why might advocates see "about:blank" when sharing?

This is standard browser behavior for mailto: links, not a ReferralCandy issue. It happens when an advocate clicks a share option that opens their email client with a pre-composed message — and they don't have a default email client set on that device (common on shared computers, some browsers, or mobile without a Mail app).

Advocates who hit this can still share using any of the other share options. If this is coming up often from your audience, let us know — that kind of feedback helps us prioritize where to invest in improvements.

Why does my preview show "John" or other placeholder data?

The theme editor uses placeholder data so you can see the layout before going live. You'll see things like "John" for names, "UNUSED" for the coupon code, "$10 cash" for the reward, and "john@example.com" for email fields. Older editors label these views “Preview”; the new email editor also provides Preview as options. These are previews, not a real advocate’s message. Real customers see their own data.

Does "Send test email" use real customer data?

No. It still uses the same placeholder data as the editor preview. The test email is meant to help you verify how the email looks and lands in an inbox — deliverability, layout, fonts, images — not to be a fully functional working email. Buttons inside test emails aren't tied to a real referral, so they may not lead anywhere meaningful. The real version your customers receive is fully working.

Why does a referral link show "SAMPLE" instead of a real coupon code?

If you see SAMPLE instead of a coupon code after opening a referral link, ReferralCandy may have treated the visit as a self-referral. Opening your own referral link, or testing it on the same network as the advocate, can trigger this protection.

You may also see this banner: "Don't worry if you can't see the coupon code. The actual code will appear when your friends see this page."

For a referral test, open the link on a different device and a different network from those used by the advocate and those used to manage ReferralCandy — for example, a phone using cellular data. Switching browsers or using incognito on the same Wi-Fi does not change your public IP.

For the complete test steps, including the friend's email and purchase setup, see Testing the referral process.

Did this answer your question?