Integrating Gather into your Shopify Hydrogen Headless Setup

Headless e-commerce is gaining traction, and Shopify's headless offering is Hydrogen. Hydroge uses GraphQL to fetch and send data to your Shopify backend.

‍

Because of this unbundled setup, installing Gather in your store does not provide the one-click integration of the Gather embedded UIs.

‍

This guide runs through how you can integrate the Gather widgets in your Hydrogen channel. It's worth noting that depending on your Hydrogen setup the required set-up may vary to the suggestions here.

‍

Gather serves the UI in your store through a script tag that fetches the Gather code (HTML, CSS and Javascript) from a CDN. You can add the script tag to your Hydrogen setup by following the following steps.

‍

1. Locate the handleRequest function in entry.server.jsx

This function is responsible for rendering the server-side content and setting up the Content Security Policy (CSP).

‍

2. Update the Content Security Policy

Ensure that the script source is included in the scriptSrc array of the CSP configuration. For example, if you are integrating the Gather script, it should look like this:

‍

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
  scriptSrc: [
    "'self'",
    'https://cdn.shopify.com',
    'https://ajax.googleapis.com',
    'https://cdn.jsdelivr.net',
    'https://d3fowg7x2sdsj4.cloudfront.net', // Add the Gather script source
    "'unsafe-eval'"
  ],
  // other CSP configurations...
});

‍

In addition to scriptSrc, you may need to update the CSP directives to include the Gather script source:

  1. connectSrc: If the Gather script makes any network requests, you need to allow its source in connectSrc.
  2. imgSrc: Because Gather script loads any images, you may need to allow its source in imgSrc.
  3. frameSrc: Because Gather script embeds iframes, you may need to allow its source in frameSrc.
  4. styleSrc: Because the Gather script can inject styles, you need to allow its source in styleSrc.

‍

3. Add the Script Tag in the Root Component:

  • Open the root.jsx file.
  • Use the Script component from @shopify/hydrogen to add the script tag. Ensure that you pass the nonce to the Script component for CSP compliance.
import {
  useNonce,
  Script,
  // other imports...
} from '@shopify/hydrogen';
// other imports...

export default function App() {
  const nonce = useNonce();

  return (
    <html lang="en">
      <head>
        {/* other head elements */}
        <Script
          nonce={nonce}
          src="YOUR GATHER SCRIPT TAG SOURCE URL"
          async
        />
      </head>
      <body>
        {/* other body elements */}
      </body>
    </html>
  );
}

‍

4. Verify the Integration

Run the application and check the browser's console to ensure that the script is loaded correctly without any CSP violations.

‍

Also, ensure that the script is functioning as expected on the client side.

By following these steps, you can successfully integrate the Gather script tag into your Shopify Hydrogen codebase while adhering to the Content Security Policy.

‍

Oops! Something went wrong.