Prerequisite You should have a Shopify store and administrative access to your Growi dashboard.

How to Set Up Shopify Headless with Growi

In a few simple steps, you can set up Growi with your Shopify Headless integration to track affiliate sales and enable automated discount codes.

1. Add Tracking Scripts to Your Root File

Insert the following two scripts in the <head> section of your root HTML file:
<script src="https://shopify.growi.io/embed.js" defer="defer"></script>
<script src="https://shopify.growi.io/cookie-utils.js" defer="defer"></script>
This step sets up affiliate sales tracking on Shopify and enables automated discount codes if available.

2. Embed the Signup Form (Optional)

If you want to allow visitors to sign up as ambassadors directly on your site, you can embed the signup form on your dashboard. Place the following code in the div on the page where you would like to embed the ambassador signup form:
<div data-growi-signup data-program="PROGRAM_ID"></div>
<script src="https://shopify.growi.io/embed-signup.js" defer></script>

Getting Your Program ID

To obtain the Program ID:
  1. Navigate to your Growi dashboard
  2. Go to Shopify > Ambassadors Program > Setup
  3. Click the clipboard icon next to your program to copy the ID
Shopify Program ID Location
Replace PROGRAM_ID in the code above with your actual program ID.

Example Implementation

Here’s a complete example of how to implement both steps:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Shopify Store</title>
  
  <!-- Growi Tracking Scripts -->
  <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 -->
  
  <!-- Ambassador Signup Form (Optional) -->
  <div class="ambassador-signup-section">
    <h2>Become an Ambassador</h2>
    <div data-growi-signup data-program="your_program_id_here"></div>
    <script src="https://shopify.growi.io/embed-signup.js" defer></script>
  </div>
</body>
</html>

Troubleshooting

Here’s how to solve some common problems when setting up Shopify Headless with Growi.