Reading list Switch to dark mode

    Guide for the Shopify Hydrogen Hooks

    Updated 24 August 2023

    Shopify Hydrogen is react based framework that allow developer to create custom storefront with the collection of prebuild ready to use components.

    Shopping cart , Variation Picker and content Galley these are examples of the prebuild component available in the Shopify Hydrogen.

    As we know that Shopify Hydrogen is react based framework , similary the way hooks work in the reactjs, Hydrogen Hooks works similary manner , It hooks the feature in the React functional component.

    Hydrogen has two api versions available
    1. 2023-07
    2. 2023-04.

    On its version of 2023-7 now it supports one more new hook which is useLoadScript() hook. it helps in the lazy load of third party dependencies.

    Shopify Hydrogen mainly support the three hooks in its 2023-7 version
    1. useLoadScript()
    2. useMoney()
    3. useShopifyCookies()

    Searching for a Shopify
    Headless solution ?
    Find out More

    useLoadScript() helps in the load external script tag in the browser.
    It allows developers to lazy load the third party dependecies in their React Component.

    import React, {useEffect} from 'react';
    import {useLoadScript} from '@shopify/hydrogen';
    export default function App() {
      const loadStatus = useLoadScript('');
      useEffect(() => {
        if (loadStatus === 'done') {
          // your code goes here 
      }, [scriptStatus]);
      return (
         {loadStatus === "done" ? <h1> Script Loaded SuccessFully !! </h1 : 
           <h1> Script Loading !!</h1>


    useMoney() hook return the default-formatted string of given amount with currency indicator. It usually takes the MoneyV2 object as parameter.

    import {useMoney, ShopifyProvider} from '@shopify/hydrogen';
    export function App() {
     const myMoney = {amount: '100', currencyCode: 'USD'}; // MoneyV2 object.
      return (
        <ShopifyProvider languageIsoCode="EN" countryIsoCode="US">
          <UsingMoney myMoney = {myMoney} />
    function UsingMoney({myMoney) {
      const money = useMoney(myMoney);
      return (
          <h1>Your money: {money.localizedString}</h1>
          <h1>Currency Name : {money.currencyName}</h1>


    This hooks is help in the setting the Shopify user session cookies and as a developer you can manipulate the cookie as per the need. It helps in the authentication of the headless app.

    import * as React from 'react';
    import {useShopifyCookies} from '@shopify/hydrogen';
    export default function App({Component, pageProps}) {
      useShopifyCookies({hasUserConsent: false});
      return <Component {...pageProps} />;

    Thanks for Reading , If you want to know more about the Shopify Hydrogen Hooks pls visiti their offical documentation , doc link.
    Happy Coding !!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home