Using Yotpo Subscriber Collection Tools on Shopify Hydrogen

In this article, you'll learn how to add Yotpo subscriber collection tools to a store with a Hydrogen setup.

Before you start

Please note that the following tools are currently not supported for Shopify:

• Footer form
• Signup page

Adding collection tools to a Shopify store with a Hydrogen setup

To enable Yotpo Collection tools on a Hydrogen store:

1. Create, customize, and set up the tool you’d like to display in the Yotpo SMS & Email app. Then, publish it in the app with the status Live.
2. From the Actions menu, click Get code.

3. From the modal containing the code for the form, copy the URL after the 'src=' part of the script. Example:
   

The URL copied should not contain any apostrophes and should look like this:

<Script src="https://forms-akamai.smsbump.com/532062/form_244820.js?ver=1697807930" />

4. Go to your Hydrogen project and navigate to the app/root file. Please note that the extension for the root file varies depending on your setup, so the file you’re looking for should be named either root.jsx or root.tsx.
5. When in the root file, you must import the Script component from @shopify/hydrogen package:

import {useNonce, Script} from '@shopify/hydrogen';

6. In the root file, navigate to the App component. Insert a Script with src equal to the src of the tool’s script (the URL retrieved in step 3):

<Script src="https://forms-akamai.smsbump.com/532062/form_244820.js?ver=1697807930" />

The Script component should be inserted either in the body html element or in the head html element. If it's inserted in the head html element, you will need to add an async attribute:

<Script async src="https://forms-akamai.smsbump.com/532062/form_244820.js?ver=1697807930" />

7. Save the changes you made to the code, rebuild the project (this happens automatically after saving), and then hard-refresh the store’s page in order to see the tool loaded.