Using Yotpo Subscriber Collection Tools on Shopify Hydrogen

      Using Yotpo Subscriber Collection Tools on Shopify Hydrogen


        Article Summary

        Products


        SMS & Email
        Supported plans

        Free, Growth, Prime, Powerhouse, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus

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

        Please note:
        This article is highly technical and assumes a foundational understanding of the subject matter. We strongly recommend consulting with a skilled developer or technical expert to ensure accurate implementation.

        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.

        Screenshot1.png

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

        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" />
        
        1. 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.
        2. When in the root file, you must import the Script component from @shopify/hydrogen package:

        Screenshot3.png

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

        1. 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):

        Screenshot4.png

        <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" />
        
        1. 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.

        Was this article helpful?