Embed a join block on your Shopify store pages. The join block shows a signup form where your customers can register for your referral or affiliate program.
Note: The join block is compatible only with Online Store 2.0 themes. This widget doesn't support vintage themes and may not work on custom themes.
Add the join block
You can add the join block on any page in your theme editor.
From your Shopify admin, go to Online store > Themes.
Find your active theme and click Customize.
Click the Apps
tab in the sidebar.Navigate to the desired page in the theme. For example, a page dedicated to your referral program.
Click Add section and go to the Apps tab.
Select a join block. You can use up to 4 join blocks across all campaigns in your ReferralCandy app.
If your page uses multiple app blocks, you can reorder the join block in the Template section.
Click Save.
Link the join block to a campaign
After the join block is added to your theme, you won't see it in the theme editor preview pane yet. You must link the join block to a campaign first.
From your Shopify admin, go to Campaigns > Select your campaign. In the Promote campaign section, click Widgets.
Find the Join block section and click the dropdown.
Select the join block that you want to link to this campaign.
Click Save.
Note: Your campaign must be Live for the join block to appear on your pages.
You can link only 1 join block per campaign. However, you can add the linked join block to multiple pages in your Shopify theme.
Customize the join block
Once a join block is linked to the campaign, you can start customizing it in the theme editor page with a preview.
From your Shopify admin, go to Online store > Themes.
Find your active theme and click Customize.
Navigate to the page where you added the join block.
Click the join block to access customization options.
Customize the widget:
Set the Form alignment to Left, Center or Right
Show or hide the Header and Offer text with a toggle
Edit the header and offer text. To add your rewards information to the join block's content, click the Connect dynamic source icon
> Metaobjects > ReferralCandy Rewards > Select your campaign > Add the following:Advocate Reward Description
Friend Offer Description
Note: You can modify the advocate and friend offer reward descriptions on your campaign's reward settings page.
Set a First name label to display as the field's ghost text
Click Save.
The join block's colors, typography, and input box designs adapt to the configuration in your Shopify theme settings.
Using a custom theme? If you're on a non-Shopify theme, you can further customize the styling of the join block in your theme editor with CSS. Learn more
What customers see based on enrollment or campaign status
When customers visit the page where the join block is embedded, they see the signup form. Customers must enter their name and email address to register for your referral or affiliate program.
Never signed up or enrolled
If a customer has never been enrolled and submits the signup form for the first time, the join block's behavior after form submission depends on whether they meet your campaign's segment criteria.
Never enrolled | What customers see |
Enrolled | If they meet the segment criteria after signup, they see their referral link and sharing options.  |
Unqualified | Unqualified contacts or contacts who didn't meet the segment criteria after signup, see the ineligible message.  |
Waitlisted | Waitlisted contacts see the You're on the waitlist message.  |
Already signed up
If a customer already signed up before, how the join block looks like after form submission depends on their enrollment status.
Enrollment status | What customers see |
Enrolled advocates | Customers who are enrolled in the campaign see their referral link and sharing options.  |
Unenrolled contacts | Contacts who were previously enrolled in your campaign but stopped meeting your segment criteria are unenrolled. Unenrolled contacts see the ineligible message.  |
Paused or stopped campaign
Paused - If you paused your campaign, the join block linked to it shows the content you set for the join page Header (paused campaign) and Offer Text (paused campaign). How to edit your campaign's theme
Stopped - If you stop your campaign or ReferralCandy automatically stops your campaign due to an issue, customers won't see the join block at all.
Join block (Shopify) FAQ
Can I customize the styling of my join block with CSS?
Can I customize the styling of my join block with CSS?
If you're using a non-Shopify theme, you can further customize the join block in your theme editor with CSS. Here are the classnames you may override:
.rc-button- This styles the button on the join block.rc-field- This styles the container that holds the label and text input field on the join block.rc-label- This styles the label (e.g., "First name") for each text input field on the join block.rc-input- This styles the text field on the join block
Note: ReferralCandy doesn't provide troubleshooting support for issues related to custom code or themes.
Why can't I add or link the join block?
Why can't I add or link the join block?
Here are possible reasons why you can't add or use the join block:
You can't add the join block if you're using a vintage theme or a custom theme. Only Online Store 2.0 themes support the join block. ReferralCandy doesn't provide troubleshooting support for custom themes.
You can't link a campaign to a join block if you don't grant permission for the widget to use metaobjects. Adding metaobjects lets Shopify dynamically use data about your ReferralCandy campaign such as reward descriptions. To grant permission:
From your Shopify admin go to Campaigns > Select your campaign. In the Promote campaign section, click Widgets.
Find the Join block section.
Click Grant permission and then click Update. Once granted, the option to link a join block becomes editable.
Why can't I see the join block?
Why can't I see the join block?
The join block may not be visible to you if:
Your theme doesn't support app blocks
Your campaign is paused or stopped. Make sure that your campaign is live. If the campaign is not active, you see "undefined" instead of the join block
The join block is not linked to any campaign. Go to your campaign's Widgets page to verify that the join block is linked to the campaign.
💬 Need help? Click the chat widget on the right to start a conversation. Learn more