This article discusses features and capabilities available only for Shopify merchants. If you're using another platform, visit this article.
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
How to access the Code Editor for advanced code-level changes
This article does not cover Shopify checkout blocks/extensions and campaign Widget settings, which are edited elsewhere:
Referral extension (Shopify checkout “Thank you” page block) → edited in Shopify Checkout Editor + your campaign’s Widgets settings
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) → edited in your campaign’s Widgets settings (not in your Shopify theme editor)
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.
Visual Editor vs Code Editor (Developer Mode)
ReferralCandy Themes for Shopify support two editing modes:
Visual Editor
Best for most merchants
Use this for standard branding and content updates
Lets you edit available text, images, colors, fonts, email content, page content, and supported widgets without editing code
Code Editor
Use this for advanced code-level edits
Best for merchants or developers who are comfortable editing theme code directly
Lets you edit supported theme files for that Theme
Important:
Code-level editing is enabled per Theme
Automatic theme updates are turned off for that Theme after developer mode is enabled
Incorrect code changes can break that Theme’s emails, pages, or layout
ReferralCandy does not provide support for fixing broken custom code
Best practice:
Duplicate your current Theme first
Test your changes in the duplicate Theme
Only switch to that Theme when you’re ready
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
Edit in ReferralCandy → Campaigns → select your campaign → Themes → ... menu on the Theme → Code Editor:
Advanced HTML / CSS / Liquid edits for that Theme
Edit in Shopify and/or your campaign’s Widgets settings:
Referral extension on the Thank you / Order status page
Customer referral details extension
Join block placement or Shopify-side block 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
In your Shopify admin, go to ReferralCandy.
Click Referral campaigns.
Select the campaign you want to edit.
Click Themes.
Find the Theme you want to work on.
Click Customize.
This opens the Visual Editor for that Theme.
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
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:
Welcome Email
Join Page
Thank You Page
Post-Purchase Widget
Referral Widget
Other supported emails or account pages included in that Theme
Once opened:
Click the block or section you want to edit in the preview
Update its settings in the left sidebar
Use the right sidebar preview options when needed
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
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
“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:
Directly editable in the selected block
Click the relevant block in the preview
Edit the available fields in the left sidebar
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
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
If you open one of the panels, let's say the "Welcome Email", you’ll usually see three main areas:
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
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
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.
Theme Assets: shared branding across your Theme
In Themes, opening Theme settings lets you update shared assets and styling used across the Theme.
Depending on your Theme, this can include:
Logo image
Banner image
Main color
Heading color
Text color
Background color
Card color
Page font
Body font
Favicon
These settings control the overall branding across supported campaign emails and ReferralCandy pages in that Theme.
Notes:
These Theme asset settings affect the Theme’s emails and ReferralCandy pages
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.
Open the Code Editor for advanced edits
Use this only if you need code-level changes and you are experienced in editing code.
In your Shopify admin, go to ReferralCandy.
Click Referral campaigns.
Select your campaign.
Click Themes.
Find the Theme you want to edit.
Click the ... menu on that Theme.
Click Code Editor.
Review the warning message carefully.
Confirm the acknowledgement checkbox.
Enable developer mode.
After that, you can edit supported theme files for that Theme in the Code Editor.
Important:
Developer mode is enabled per Theme, not per campaign as a whole
Automatic theme updates are turned off for that Theme after developer mode is enabled
If you want a safer setup, duplicate the Theme first and test there
Where merchants usually get confused
If you’re trying to edit something specific, use these checks first:
Is it inside a ReferralCandy campaign email or ReferralCandy page preview in Themes?
Edit it in the Visual Editor
Is it an advanced code change to a Theme file?
Use the Code Editor
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, not in Themes
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:
Open ReferralCandy in Shopify
Go to Referral campaigns
Select your campaign
Open the Advocate reward / Tiers settings
Update the referral ranges or reward descriptions for each tier
Save your changes
Return to Themes or the Visual Editor to confirm how the updated tiers appear in the preview
Important:
If you are using a custom developer-mode Theme, the tiered rewards table may not appear correctly even if tiered rewards are configured in the campaign
In those cases, you may need to create or switch to a supported Theme, or contact support for help updating the custom Theme code
FAQ
How do I edit without affecting live customers?
Best practice:
Go to Themes
Click the ... menu on your current Theme
Click Duplicate
Edit the duplicate Theme first
When ready, go back to Themes and click Select on the Theme you want to activate
Can I still use the old editor?
Some accounts may still show an Old Editor button temporarily, but merchants should use the Visual Editor unless they specifically need the older interface during the transition period.
How do I reopen the Code Editor later?
Go to ReferralCandy → Referral campaigns → select your campaign → Themes, then click the ... menu on the Theme and choose Code Editor.
Why can’t I find the thing I want to edit?
Check whether it appears inside the ReferralCandy Theme editor first.
If it does not, it is likely edited in Shopify and/or your campaign’s Widgets settings instead.
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.
