Skip to main content

[Shopify] Join block

Let customers sign up for your referral or affiliate program using an embedded signup form (app block) on your Shopify Online Store pages.

Adam avatar
Written by Adam
Updated yesterday

This article is for Shopify merchants only.

What the Join block is

  • The Join block is a standalone ReferralCandy widget that you add as an app block in your Shopify theme editor.

  • It can be used on any Online Store page (for example: a dedicated “Refer a friend” page).

  • After a customer submits the form:

    • If they qualify, they’ll be enrolled and can start sharing.

    • If they don’t qualify and you allow signup/waitlist, they’ll be waitlisted (until or unless they meet your segment criteria).


Compatibility and requirements

  • Only Online Store 2.0 themes support app blocks like the Join block. You can’t add the Join block on vintage themes (and some custom themes may not support it).

  • Your campaign must be Live for the Join block to appear on your pages.


Most common confusion: Join block vs Join Page

These are different things and are edited in different places:

  • Join block (the embedded widget on your Shopify page)

    • This is the signup form widget you add as an app block.

    • Text is edited in ReferralCandy > Campaign > Widgets (not in the campaign page editor).

  • Join Page (campaign pages inside the ReferralCandy campaign theme editor)

    • These are standalone ReferralCandy pages/templates (not the embedded Join block).

    • Editing these changes those pages, not the Join block widget.

Tip: If you’re looking at a Shopify page and you see a form embedded in the page layout, that’s the Join block.


Step 1: Add the Join block to a page (Shopify theme editor)

  1. In your Shopify admin, go to Online Store > Themes.

  2. Find your active theme and click Customize.

  3. Navigate to the page where you want the Join block to appear.

  4. Click Add section (or Add block), then go to the Apps tab.

  5. Select Join block.

  6. Click Save.

Notes:

  • You can use up to 4 Join blocks across all campaigns in your ReferralCandy account.

  • If you add multiple app blocks to a page, reorder them in the template sidebar.


Step 2: Link the Join block to a campaign (ReferralCandy > Campaign > Widgets)

Important: You may not see the Join block show real content in the theme preview until it’s linked to a campaign.

  1. In Shopify admin, open the ReferralCandy app.

  2. Go to Campaigns > select your campaign.

  3. In the Promote campaign section, click Widgets.

  4. Find the Join block section.

  5. Use the dropdown to link a Join block to this campaign.

  6. Click Save.

Notes:

  • One campaign can be linked to one Join block.

  • Once linked, you can place that Join block on multiple Shopify pages (it will still point to the same campaign).


Step 3: Adjust layout and visibility (Shopify theme editor)

  1. Go to Online Store > Themes > Customize.

  2. Open the page where you added the Join block.

  3. Click the Join block.

  4. In the left sidebar, adjust:

  • Form alignment (Left / Center / Right)

  • Show header (toggle)

  • Show offer (toggle)

  1. Click Save.

Reminder: These are layout/visibility controls only. They don’t change the actual wording.


Step 4: Edit the Join block text (ReferralCandy > Campaign > Widgets)

This is the main place to edit Join block wording.

  1. Go to ReferralCandy > Campaigns > select your campaign > Widgets.

  2. Open the Join block section.

  3. Click Edit text (or expand the text fields).

  4. If you support multiple languages, choose the language you want to edit.

  5. Update the fields available for your campaign, commonly including:

  • Signup form text

    • Header

    • Offer

    • Email label / placeholder

    • Name label / placeholder

    • Button label (CTA)

  • Post-submission messages

    • Enrolled (what qualified customers see after signing up)

    • Unenrolled (what previously-enrolled but now-ineligible customers see)

    • Waitlisted (what unqualified customers see if signup/waitlist is enabled)

  • Paused campaign messages

    • What customers see if the campaign is paused

  • Tier table text (FlexiTiers)

    • Column labels and tier messages (when shown)

  1. Click Save.


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.

If you’re using a tiered reward structure, the tier table appears under the form. The table lets customers know when and how they get rewarded.


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 submission depends on whether they meet your campaign’s segment criteria.

  • Enrolled

    • If they meet the segment criteria after signup, they see their referral link and sharing options.

  • Waitlisted

    • Waitlisted contacts (or contacts who didn’t meet the segment criteria after signup) see the “You’re on the waitlist” message.

    • To edit what waitlisted contacts see, update the Join block’s text fields in:

      • ReferralCandy > Campaigns > (select campaign) > Widgets > Join block

        • Look for the waitlisted fields (for example: waitlisted header/body/CTA, depending on what your account shows).

(Insert “Never signed up or enrolled” table screenshot here)


Already signed up

If a customer already signed up before, how the Join block looks after form submission depends on their enrollment status.

  • Enrolled

    • Customers who are enrolled in the campaign see their referral link and sharing options.

  • Unenrolled

    • Contacts who were previously enrolled in your campaign but stopped meeting your segment criteria are unenrolled.

    • Unenrolled contacts see the ineligible message.

To edit what unenrolled contacts see, update the Join block’s text fields in:

  • ReferralCandy > Campaigns > (select campaign) > Widgets > Join block

    • Look for the unenrolled fields (for example: unenrolled header/body/CTA, depending on what your account shows).


Paused or stopped campaign

  • Paused

    • If you pause your campaign, the Join block linked to it shows your paused campaign messaging.

    • To edit paused messaging, go to:

      • ReferralCandy > Campaigns > (select campaign) > Widgets > Join block

        • Look for the paused campaign fields (for example: header/offer/CTA for paused campaign).

  • 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.


Waitlisted and paused messages: where to edit them

  • If you want to change what customers see inside the Join block after they submit the form:

    • Edit the Waitlisted and Paused fields in ReferralCandy > Campaign > Widgets > Join block.

  • The campaign theme pages (Join Page / Share Page) are separate page templates.

    • They do not control the embedded Join block text.


Styling notes

  • The Join block inherits most styling (fonts/colors) from your Shopify theme.

  • For highly custom themes:

    • Additional CSS customization may be possible (advanced).

    • ReferralCandy typically can’t troubleshoot issues caused by custom code or non-standard themes.

Note: ReferralCandy doesn’t provide troubleshooting support for issues related to custom code or custom themes.


Troubleshooting

The Join block doesn’t appear on my page

  • Confirm your theme supports app blocks (Online Store 2.0).

  • Confirm the campaign is Live.

  • Confirm the Join block is linked to a campaign:

    • ReferralCandy > Campaigns > campaign > Widgets > Join block

I can change alignment/show-hide in Shopify, but can’t change the wording

  • That’s expected.

    • Shopify theme editor: alignment + show/hide toggles

    • ReferralCandy Widgets: the actual text fields and post-submission messages

I linked the Join block but it still looks wrong / shows unexpected messaging

  • Check which state you’re viewing:

    • Not enrolled / enrolled / unenrolled / waitlisted

  • Then update the matching fields in:

    • ReferralCandy > Campaign > Widgets > Join block


FAQ

Can I place the Join block on multiple pages?

  • Yes. Once a Join block is linked to a campaign, you can add it to multiple Shopify pages.

Can I link one Join block to multiple campaigns?

  • No. A Join block can be linked to one campaign at a time.

Does editing Join Page / Share Page change the Join block text?

  • No. Those are campaign page templates.

  • The embedded Join block text is edited in ReferralCandy > Campaign > Widgets.

Why can’t I add or link the Join block?

Here are possible reasons why you can’t add or use the Join block:

  • Theme compatibility

    • You can’t add the Join block if you’re using a vintage theme or some custom themes.

    • Only Online Store 2.0 themes support app blocks like the Join block.

    • Note: ReferralCandy doesn’t provide troubleshooting support for issues related to custom code or custom themes.

  • Metaobjects permission (required to link a campaign to a Join block)

    • You may not be able to link a campaign to a Join block until you grant permission for the widget to use metaobjects.

    • Metaobjects let Shopify dynamically use data from your ReferralCandy campaign (for example, reward descriptions).

    • To grant permission:

      1. From your Shopify admin, go to ReferralCandy > Campaigns and select your campaign.

      2. In the Promote campaign section, click Widgets.

      3. Find the Join block section.

      4. Click Grant permission, then click Update.

      5. Once granted, the option to link a Join block becomes editable.


Developer-only: Customize the Join block with CSS (optional)

If you’re using a non-Shopify theme, you can further customize the Join block with CSS. Here are the classnames you can target:

Classnames dropdown

  • Containers

    • .rc-join-block-container — container that holds the join block

    • .rc-join-form — container for the form inputs and buttons

    • .rc-button-container — container for the join button

  • Signup section

    • .rc-button — the button on the join block

    • .rc-field — container that holds the label + text input field

    • .rc-label — the label (for example: “First name”) for each text input field

    • .rc-input — the text input field

    • .rc-custom-join-header — header text in the signup section

    • .rc-custom-join-header-2 (optional) — allows two different styles applied to two parts of the same header (for example: two header text colors)

    • .rc-custom-join-offer — offer text in the signup section

  • Share section

    • .rc-custom-share-header — header text in the share section

    • .rc-custom-share-description — description text in the share section

    • .rc-share-icon — share icons in the join block (for example: icon size)

Note: ReferralCandy doesn’t provide troubleshooting support for issues related to custom code or themes.

Did this answer your question?