Pack Documentation
  • Welcome to the Pack!
  • Guides
    • Getting started
    • Creating your first Storefront
    • Previewing your Storefront
    • Editing your Storefront
    • Scheduling Content
    • Start developing
  • Fundamentals
    • Organization
    • Storefronts
    • Customizer
  • For Merchants
    • Creating Organizations
    • Creating Storefronts
    • Deploys
    • Product Bundles
    • Product Groupings
    • Inviting Teammates
    • Redirects
    • Editing Storefront Settings
  • For Marketers
    • Creating Pages
    • Sections
    • Publishing/Unpublishing
    • Managing Media
  • For Developers
    • Storefront Hooks
      • Settings Hooks
      • Page Hooks
      • Product Hooks
      • Collection Hooks
      • Blog Hooks
      • Article Hooks
    • Section API
      • Schema
      • Fields
        • Text
        • Color
        • Text Area
        • Markdown
        • Image
        • Number
        • Link
        • Product
        • Product Bundle
        • HTML
        • Group
        • List
        • Group List
        • Toggle
        • Select
        • Radio Group
        • Tags
    • Creating Storefront Settings
    • Shopify Hooks
      • Cart
        • useCart
        • useCartClear
        • useCartCheckout
        • useCartUpdateNote
        • useCartAddItems
        • useCartUpdateItems
        • useCartRemoveItems
        • useCartAddAttributes
        • useCartUpdateAttributes
        • useCartRemoveAttributes
        • useCartAddDiscount
        • useCartRemoveDiscount
        • useCartAddGiftCard
        • useCartRemoveGiftCard
      • Customer
        • useCustomer
        • useCustomerCreate
        • useCustomerLogin
        • useCustomerLogout
        • useCustomerCreateAddress
        • useCustomerUpdateAddress
        • useCustomerDeleteAddress
        • useCustomerUpdateDetails
        • useCustomerRecoverPassword
        • useCustomerResetPassword
      • Hydrogen Framework
    • Asynchronous Hooks
    • Pack API
      • Queries
    • Transform Specification
    • Adding Tailwind CSS
Powered by GitBook
On this page
  1. For Developers

Shopify Hooks

Pack offers a library of hooks that make building your Shopify Storefront easy. These hooks are available to help you start developing customer and cart experience out-of-the-box right away.

Getting Started

Make sure to initialize your Storefront first

To get started it is important that you initialize the Storefront with the useStorefrontInit() hook inside your Storefront layout.

/src/layouts/Storefront.jsx
import { useStorefrontInit } from '@backpackjs/storefront';

function StorefrontLayout({ ContentForLayout, ...props }) {
  // initialize customer, cart, shop and markets
  useStorefrontInit();

  ...
}
PreviousCreating Storefront SettingsNextCart

Last updated 2 years ago