Overview
Growi can put your ambassador application form directly on a page of your Shopify store, so visitors apply without leaving your site. The form is hosted by Growi, matches your program's settings, and sends every application straight into your Ambassadors tab. Once approved, each ambassador gets their own promo code and affiliate link and every sale they drive is tracked in Growi.
Comfrt's ambassador page is a live example of the finished result: comfrt.com/content/sign-up. Their page collects name and email, Instagram and TikTok handles, a few screening questions, a date of birth, country, Discord username, and an 18+ and terms checkbox. All of those come from the program's own settings in Growi, not from custom code.
Note: This guide assumes you already have a Shopify store connected to Growi and at least one ambassador program created. If you have not created a program yet, start with Setting up your ambassador program, then come back here. |
Before you start
You need three things ready before you touch Shopify:
Growi installed on your Shopify store. Go to Stores > Shopify in the left sidebar of Growi. If the store is connected, you will see your ambassador tabs. If not, connect the store first.
An active ambassador program. Go to Stores > Shopify > Ambassadors > Setup and click Create ambassador program if you do not have one. The program's Applications section controls what the embedded form asks for (more on this below).
Your program's form ID. In the Setup tab, open the actions menu (⋯) on the program's row and click Copy form ID. This is the number Shopify needs to know which form to show.
Tip: The Setup tab also has a built-in Shopify setup guide in the page's top-right menu. It shows the same steps as this article with screenshots, side by side with your program list. |
Which setup do I need?
Growi supports both kinds of Shopify storefront. Pick the one that matches yours:
Your store | Use this option | Who does it |
A standard Shopify Online Store theme (Dawn, Sense, Impulse, Prestige, or any other theme you edit in the theme editor) | Option A: App embed. Add the Growi block in the theme editor. No code. | Anyone with access to the Shopify theme editor. |
A headless or custom storefront (Shopify Hydrogen, Next.js, Remix, or any front end that is not a Shopify theme) | Option B: Headless. Paste two script tags and one div into your site's code. | Your developer, or whoever maintains the storefront code. |
If you are not sure which you have: if you can open Online Store > Themes > Customize in Shopify admin and it shows your live site, you are on a standard theme. Use Option A.
Option A: Standard Shopify theme (app embed)
This takes about five minutes and does not require a developer.
1. Open the Shopify theme editor
In your Shopify admin, go to Online Store > Themes and click Customize on your live theme.
2. Go to the page where you want the form
Use the page selector at the top of the theme editor to open the page that will hold the form. Most brands create a dedicated page for this (for example, a page called "Ambassadors" or "Sign up" under Online Store > Pages) and link to it from the site footer or navigation. You can also add the form to an existing page.
3. Add the Growi signup form block
In the left sidebar of the theme editor, click Add section (or Add block inside an existing section), open the Apps tab, and choose Affiliate Signup Form under Growi.
4. Paste your form ID
With the new block selected, paste the ID you copied from Growi into the Ambassador Program ID field on the right. The form loads in the preview as soon as the ID is valid.
5. Turn on Growi tracking under App embeds
In the theme editor's left sidebar, click the App embeds icon and make sure the Growi Affiliate Tracking toggle is on. This is what records sales that come through your ambassadors' links and codes. Without it the form still works, but ambassador sales will not be attributed.
6. Save and test
Click Save in the top right of the theme editor, then open the page on your live store. The form should appear with your program's heading and fields, and it resizes itself to fit the page as visitors fill it in. Submit a test application from an email address you control to confirm it arrives in Stores > Shopify > Ambassadors.
Note: If the block shows the message "Please enter an Ambassador Program ID in the section settings", the ID field is empty. Paste the form ID again and save. |
Option B: Headless or custom storefront
If your storefront is built on Hydrogen or another custom front end, hand these two steps to your developer. Full developer documentation is at Shopify Headless Integration.
1. Add the Growi tracking scripts
Place both scripts in the <head> of your storefront's root HTML (the layout every page shares). They enable affiliate sales tracking and automatic discount codes.
<script src="https://shopify.growi.io/embed.js" defer="defer"></script>
<script src="https://shopify.growi.io/cookie-utils.js" defer="defer"></script>
2. Add the signup form where you want it
On the page that should show the form, add this markup where the form belongs. Replace PROGRAM_ID with the form ID you copied from Growi.
<div data-growi-signup data-program="PROGRAM_ID"></div>
<script src="https://shopify.growi.io/embed-signup.js" defer></script>
Complete example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Store</title>
<!-- Growi tracking -->
<script src="https://shopify.growi.io/embed.js" defer="defer"></script>
<script src="https://shopify.growi.io/cookie-utils.js" defer="defer"></script>
</head>
<body>
<!-- Your page content -->
<section>
<h2>Become an Ambassador</h2>
<div data-growi-signup data-program="12345"></div>
<script src="https://shopify.growi.io/embed-signup.js" defer></script>
</section>
</body>
</html>
Important: The tracking scripts must load on every page of the storefront, including checkout-adjacent pages, so that a visitor who arrives through an ambassador link is still attributed when they buy later. The signup form markup only needs to be on the page that shows the form. |
Controlling what the form asks for
The embedded form is generated from your program's settings in Growi, so you never edit fields in Shopify. To change the form, edit the program in Stores > Shopify > Ambassadors > Setup.
Setting | Where | What it changes on the form |
Social accounts | Program editor > Applications | Which platforms appear (Instagram, TikTok, YouTube, and so on) and whether each is Required or optional. Applicants can add more than one handle per platform. |
Discord | Program editor > Applications | Turn on to require a Discord username, and optionally connect your Discord server. |
Application questions | Program editor > Applications | Extra questions such as "Why do you want to join?", date of birth, country, or an 18+ confirmation. Each can be required or optional, free text or a list of options. |
Program description | Program editor > Applications | Rich text shown at the top of the form. Use it for perks, expectations, and who should apply. |
Application review | Program editor > Applications | Review manually holds every application for your approval. Auto-approve everyone gives applicants a code and link instantly. |
Heading, subheading, button, and success message | Setup tab > row menu (⋯) > Customize signup form copy | Replace the default "Join our Ambassador Program" heading, the "Join" button text, and the message shown after submitting. Leave a field empty to keep the default. You can also hide the program name. |
Changes apply the next time the page loads. You do not need to touch Shopify again.
What happens after someone applies
When the applicant clicks Join, Growi emails them a one-time code to confirm their email address. They enter it in the form, which also creates their Growi creator login.
They then see your success message. By default that is "Request pending" for programs you review manually, or "Congrats! You've been accepted!" with a link to their dashboard for auto-approve programs.
The application appears in Stores > Shopify > Ambassadors. If the program is set to review manually, approve or reject it there. If it is set to auto-approve, the applicant is already an ambassador.
On approval, Growi emails the ambassador, creates their promo code and affiliate link, and they can log in to Growi to find them.
Sales made with their code or link show up under Stores > Shopify > Ambassadors > Sales, and commission is calculated using the program's payout settings.
Sharing the form without embedding it
You do not have to embed the form to use it. Every program also has a hosted signup page on Growi. In the Setup tab, open the program's actions menu (⋯) and click Copy signup link, choose a language, and share the link anywhere: your Instagram bio, a Linktree, an email, or a QR code. The embedded form and the hosted link feed the same program, so you can use both.
You can also invite recent customers automatically. Open Referral email setup from the Setup tab's menu to customize the post-purchase email that invites customers to join your program.
Important notes
Ended or canceled programs stop the form. If you end or cancel a program from the Setup tab, the embedded form shows "Sorry, this program is no longer active" instead. There is no pause option, so keep the program active for as long as you want to take applications.
One form ID per program. If you run several programs (for example, one per region or product line), each has its own ID. You can embed different programs on different pages.
Tracking and the form are separate. The form collects applications. The App embed toggle (Option A) or the tracking scripts (Option B) attribute sales. You need both for a complete setup.
Languages. The form is available in English and German. The hosted signup link lets you pick the language when you copy it.
Troubleshooting
The form does not appear on my page
Check that the form ID is pasted correctly with no extra spaces, that the program is still active in Growi, and that you saved the theme after adding the block. On a headless store, confirm the embed-signup.js script tag sits right after the div and that the browser console shows no errors.
The block says "Please enter an Ambassador Program ID in the section settings"
The ID field is empty. Select the block in the theme editor, paste the form ID, and save.
Applications arrive but ambassador sales are not tracked
On a standard theme, open App embeds in the theme editor and confirm Growi Affiliate Tracking is toggled on. On a headless store, confirm both tracking scripts are in the <head> of every page.
The form is cut off or shows a scrollbar
The form tells the page how tall it is as visitors fill it in. If it looks cut off, make sure the block or the container it sits in does not have a fixed height set in your theme's custom CSS.
I do not see Growi under Apps in the theme editor
The Growi Shopify app is not installed on this store, or the theme does not support app blocks (Online Store 2.0). Connect the store from Stores > Shopify in Growi first. If your theme is older, use Option B or ask us for help.
FAQs
Can I style the form to match my site?
The form uses a clean neutral design that fits most themes, and the heading, subheading, button text, and success message are editable from Growi. Deeper styling changes are not available in the theme editor. Reach out via live chat if you need a specific look.
Can I embed the same form on more than one page or store?
Yes. Paste the same form ID into as many pages as you like. All submissions go to the same program.
Do applicants need a Growi account?
Not beforehand. They fill out the form on your site and confirm their email with a one-time code. That creates their Growi creator login, which they use later to see their code, link, and earnings.
Can I ask for a date of birth, country, or an age confirmation like Comfrt does?
Yes. Add them as application questions in the program's Applications section and mark them required.
Does this work on Shopify Plus?
Yes. Both options work on every Shopify plan.
Have questions or want us to check your embed? Reach out anytime via live chat and we will take a look with you.