Using Yotpo Subscriber Collection Tools on Shopify Hydrogen

Yotpo Subscriber Collection Tools on Shopify Hydrogen Overview

The Yotpo Subscriber Collection Tools seamlessly integrate with Shopify Hydrogen to help you grow your SMS and email subscriber list directly from your Hydrogen storefront. This integration empowers you to capture customer contact information with attractive and responsive forms that align with your brand's aesthetics. Whether you're launching campaigns, nurturing leads, or driving conversions, these tools ensure that your audience stays connected, no matter where they interact with your business.

By leveraging this feature, you can harness the flexibility of Shopify Hydrogen’s customizable framework while enjoying Yotpo’s powerful marketing automation and subscriber management capabilities. Engage your visitors at every touchpoint and turn casual browsers into loyal customers with an easy-to-implement, efficient, and scalable solution.

Getting Started

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.