Shopify i18n (#9)

2025-07-01 02:41:22 +00:00 · 2021-06-01 07:55:04 -03:00 · 2021-06-01 07:55:04 -03:00 · 628fbf50bb
commit 628fbf50bb
parent 05501c6f99
319 changed files with 44504 additions and 2202 deletions
--- a/.env.template
+++ b/.env.template
@ -1,5 +1,15 @@
+# Available providers: bigcommerce, shopify, swell
+COMMERCE_PROVIDER=
+
 BIGCOMMERCE_STOREFRONT_API_URL=
 BIGCOMMERCE_STOREFRONT_API_TOKEN=
 BIGCOMMERCE_STORE_API_URL=
 BIGCOMMERCE_STORE_API_TOKEN=
 BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_CHANNEL_ID=
+
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
+
+NEXT_PUBLIC_SWELL_STORE_ID=
+NEXT_PUBLIC_SWELL_PUBLIC_KEY=
--- a/.gitignore
+++ b/.gitignore
@ -18,6 +18,7 @@ out/
 # misc
 .DS_Store
 *.pem
+.idea

 # debug
 npm-debug.log*
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,4 +0,0 @@
-## Changelog
-
- Select Variants Working
- Click on cart item title, closes the sidebar
--- a/README.md
+++ b/README.md
@ -7,7 +7,10 @@ Start right now at [nextjs.org/commerce](https://nextjs.org/commerce)

 Demo live at: [demo.vercel.store](https://demo.vercel.store/)

-This project is currently <b>under development</b>.
+- Shopify Demo: https://shopify.vercel.store/
+- Swell Demo: https://swell.vercel.store/
+- BigCommerce Demo: https://bigcommerce.vercel.store/
+- Vendure Demo: https://vendure.vercel.store

 ## Features

@ -21,82 +24,66 @@ This project is currently <b>under development</b>.
 - Integrations - Integrate seamlessly with the most common ecommerce platforms.
 - Dark Mode Support

-## Work in progress
-
-We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
-
 ## Integrations

-Next.js Commerce integrates out-of-the-box with BigCommerce. We plan to support all major ecommerce backends.
+Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends.

-## Goals
+## Considerations

- **Next.js Commerce** should have a completely data **agnostic** UI
- **Aware of schema**: should ship with the right data schemas and types.
- All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
- `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
+- `framework/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
+- **Providers** live under `framework`'s root folder and they will extend Next.js Commerce types and functionality (`framework/commerce`).
+- We have a **Features API** to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
+- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
+- **Providers don't depend on anything that's specific to the application they're used in**. They only depend on `framework/commerce`, on their own framework folder and on some dependencies included in `package.json`

-There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
+## Configuration

-Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) we will also have to build a feature API to disable/enable features in the UI.
+### How to change providers

-People actively working on this project: @okbel & @lfades.
+Open `.env.local` and change the value of `COMMERCE_PROVIDER` to the provider you would like to use, then set the environment variables for that provider (use `.env.template` as the base).

-## Framework
+The setup for Shopify would look like this for example:

-Framework is where the data comes from. It contains mostly hooks and functions.
-
-## Structure
-
-Main folder and its exposed functions
-
- `product`
-  - usePrice
-  - useSearch
-  - getProduct
-  - getAllProducts
- `wishlist`
-  - useWishlist
-  - addWishlistItem
-  - removeWishlistItem
- `auth`
-  - useLogin
-  - useLogout
-  - useSignup
- `cart`
-
-  - useCart
-  - useAddItem
-  - useRemoveItem
-  - useCartActions
-  - useUpdateItem
-
- `config.json`
- README.md
-
-#### Example of correct usage of Commece Framework
-
-```js
-import { useUI } from '@components/ui'
-import { useCustomer } from '@framework/customer'
-import { useAddItem, useWishlist, useRemoveItem } from '@framework/wishlist'
+```
+COMMERCE_PROVIDER=shopify
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=xxxxxxx.myshopify.com
 ```

-## Config
+And check that the `tsconfig.json` resolves to the chosen provider:
+
+```
+  "@framework": ["framework/shopify"],
+  "@framework/*": ["framework/shopify/*"]
+```
+
+That's it!

 ### Features

-In order to make the UI entirely functional, we need to specify which features certain providers do not **provide**.
+Every provider defines the features that it supports under `framework/{provider}/commerce.config.json`

-**Disabling wishlist:**
+#### How to turn Features on and off

-```
-{
-  "features": {
-    "wishlist": false
+> NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
+
+- Open `commerce.config.json`
+- You'll see a config file like this:
+  ```json
+  {
+    "features": {
+      "wishlist": false
+    }
  }
-}
-```
+  ```
+- Turn wishlist on by setting wishlist to true.
+- Run the app and the wishlist functionality should be back on.
+
+### How to create a new provider
+
+Follow our docs for [Adding a new Commerce Provider](framework/commerce/new-provider.md).
+
+If you succeeded building a provider, submit a PR with a valid demo and we'll review it asap.

 ## Contribute

@ -106,11 +93,15 @@ Our commitment to Open Source can be found [here](https://vercel.com/oss).
 2. Create a new branch `git checkout -b MY_BRANCH_NAME`
 3. Install yarn: `npm install -g yarn`
 4. Install the dependencies: `yarn`
-5. Duplicate `.env.template` and rename it to `.env.local`.
-6. Add proper store values to `.env.local`.
+5. Duplicate `.env.template` and rename it to `.env.local`
+6. Add proper store values to `.env.local`
 7. Run `yarn dev` to build and watch for code changes
-8. The development branch is `canary` (this is the branch pull requests should be made against).
-   On a release, `canary` branch is rebased into `master`.
+
+## Work in progress
+
+We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
+
+People actively working on this project: @okbel & @lfades.

 ## Troubleshoot

@ -128,6 +119,7 @@ BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_URL=<>
 BIGCOMMERCE_STORE_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_CLIENT_ID=<>
+BIGCOMMERCE_CHANNEL_ID=<>
 ```

 If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.
--- a/framework/commerce/config.json
+++ b/framework/commerce/config.json
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@ -33,7 +33,7 @@ const CartItem = ({
    currencyCode,
  })

-  const updateItem = useUpdateItem(item)
+  const updateItem = useUpdateItem({ item })
  const removeItem = useRemoveItem()
  const [quantity, setQuantity] = useState(item.quantity)
  const [removing, setRemoving] = useState(false)
@ -92,15 +92,18 @@ const CartItem = ({
      })}
      {...rest}
    >
-      <div className="w-16 h-16 bg-violet relative overflow-hidden">
-        <Image
-          className={s.productImage}
-          width={150}
-          height={150}
-          src={item.variant.image!.url}
-          alt={item.variant.image!.altText}
-          unoptimized
-        />
+      <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
+        <Link href={`/product/${item.path}`}>
+          <Image
+            onClick={() => closeSidebarIfPresent()}
+            className={s.productImage}
+            width={150}
+            height={150}
+            src={item.variant.image!.url}
+            alt={item.variant.image!.altText}
+            unoptimized
+          />
+        </Link>
      </div>
      <div className="flex-1 flex flex-col text-base">
        <Link href={`/product/${item.path}`}>
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@ -1,15 +1,16 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import { UserNav } from '@components/common'
-import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icons'
-import { useUI } from '@components/ui/context'
-import useCart from '@framework/cart/use-cart'
-import usePrice from '@framework/product/use-price'
+import Link from 'next/link'
 import CartItem from '../CartItem'
 import s from './CartSidebarView.module.css'
+import { Button } from '@components/ui'
+import { UserNav } from '@components/common'
+import { useUI } from '@components/ui/context'
+import { Bag, Cross, Check } from '@components/icons'
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'

-const CartSidebarView: FC<{ wishlist?: boolean }> = ({ wishlist }) => {
+const CartSidebarView: FC = () => {
  const { closeSidebar } = useUI()
  const { data, isLoading, isEmpty } = useCart()

@ -48,7 +49,7 @@ const CartSidebarView: FC<{ wishlist?: boolean }> = ({ wishlist }) => {
            </button>
          </div>
          <div className="space-y-1">
-            <UserNav wishlist={wishlist} />
+            <UserNav />
          </div>
        </div>
      </header>
@ -87,11 +88,16 @@ const CartSidebarView: FC<{ wishlist?: boolean }> = ({ wishlist }) => {
      ) : (
        <>
          <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide">
-              My Cart
-            </h2>
+            <Link href="/cart">
+              <h2
+                className="pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide cursor-pointer inline-block"
+                onClick={handleClose}
+              >
+                My Cart
+              </h2>
+            </Link>
            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-accents-3 border-t border-accents-3">
-              {data!.lineItems.map((item) => (
+              {data!.lineItems.map((item: any) => (
                <CartItem
                  key={item.id}
                  item={item}
--- a/components/common/FeatureBar/FeatureBar.module.css
+++ b/components/common/FeatureBar/FeatureBar.module.css
@ -1,7 +1,9 @@
 .root {
  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
+}

-  @screen md {
+@screen md {
+  .root {
    @apply flex text-left;
  }
 }
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@ -44,20 +44,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
                  </a>
                </Link>
              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/">
-                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Careers
-                  </a>
-                </Link>
-              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/blog">
-                  <a className="text-primary hover:text-accents-6 transition ease-in-out duration-150">
-                    Blog
-                  </a>
-                </Link>
-              </li>
              {sitePages.map((page) => (
                <li key={page.url} className="py-3 md:py-0 md:pb-4">
                  <Link href={page.url!}>
--- a/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
+++ b/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
@ -5,20 +5,17 @@ import { Grid } from '@components/ui'
 import { ProductCard } from '@components/product'
 import s from './HomeAllProductsGrid.module.css'
 import { getCategoryPath, getDesignerPath } from '@lib/search'
-import wishlist from '@framework/api/wishlist'

 interface Props {
  categories?: any
  brands?: any
  products?: Product[]
-  wishlist?: boolean
 }

 const HomeAllProductsGrid: FC<Props> = ({
  categories,
  brands,
  products = [],
-  wishlist = false,
 }) => {
  return (
    <div className={s.root}>
@ -65,7 +62,6 @@ const HomeAllProductsGrid: FC<Props> = ({
                width: 480,
                height: 480,
              }}
-              wishlist={wishlist}
            />
          ))}
        </Grid>
--- a/components/common/I18nWidget/I18nWidget.module.css
+++ b/components/common/I18nWidget/I18nWidget.module.css
@ -16,14 +16,16 @@

 .dropdownMenu {
  @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}

-  @screen lg {
+@screen lg {
+  .dropdownMenu {
    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
  }
 }

-.closeButton {
-  @screen md {
+@screen md {
+  .closeButton {
    @apply hidden;
  }
 }
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@ -58,11 +58,10 @@ const Layout: FC<Props> = ({
  } = useUI()
  const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
  const { locale = 'en-US' } = useRouter()
-  const isWishlistEnabled = commerceFeatures.wishlist
  return (
    <CommerceProvider locale={locale}>
      <div className={cn(s.root)}>
-        <Navbar wishlist={isWishlistEnabled} />
+        <Navbar />
        <main className="fit">{children}</main>
        <Footer pages={pageProps.pages} />

@ -73,7 +72,7 @@ const Layout: FC<Props> = ({
        </Modal>

        <Sidebar open={displaySidebar} onClose={closeSidebar}>
-          <CartSidebarView wishlist={isWishlistEnabled} />
+          <CartSidebarView />
        </Sidebar>

        <FeatureBar
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@ -5,7 +5,7 @@ import { Searchbar, UserNav } from '@components/common'
 import NavbarRoot from './NavbarRoot'
 import s from './Navbar.module.css'

-const Navbar: FC<{ wishlist?: boolean }> = ({ wishlist }) => (
+const Navbar: FC = () => (
  <NavbarRoot>
    <Container>
      <div className="relative flex flex-row justify-between py-4 align-center md:py-6">
@ -25,6 +25,9 @@ const Navbar: FC<{ wishlist?: boolean }> = ({ wishlist }) => (
            <Link href="/search?q=accessories">
              <a className={s.link}>Accessories</a>
            </Link>
+            <Link href="/search?q=shoes">
+              <a className={s.link}>Shoes</a>
+            </Link>
          </nav>
        </div>

@ -33,7 +36,7 @@ const Navbar: FC<{ wishlist?: boolean }> = ({ wishlist }) => (
        </div>

        <div className="flex justify-end flex-1 space-x-8">
-          <UserNav wishlist={wishlist} />
+          <UserNav />
        </div>
      </div>

--- a/components/common/UserNav/DropdownMenu.module.css
+++ b/components/common/UserNav/DropdownMenu.module.css
@ -1,7 +1,9 @@
 .dropdownMenu {
  @apply fixed right-0 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+}

-  @screen lg {
+@screen lg {
+  .dropdownMenu {
    @apply absolute top-10 border border-accents-1 shadow-lg w-56 h-auto;
  }
 }
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@ -4,20 +4,19 @@ import cn from 'classnames'
 import type { LineItem } from '@framework/types'
 import useCart from '@framework/cart/use-cart'
 import useCustomer from '@framework/customer/use-customer'
+import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
-import { Avatar } from '@components/common'

 interface Props {
  className?: string
-  wishlist?: boolean
 }

 const countItem = (count: number, item: LineItem) => count + item.quantity

-const UserNav: FC<Props> = ({ className, wishlist = false }) => {
+const UserNav: FC<Props> = ({ className }) => {
  const { data } = useCart()
  const { data: customer } = useCustomer()
  const { toggleSidebar, closeSidebarIfPresent, openModal } = useUI()
@ -31,7 +30,7 @@ const UserNav: FC<Props> = ({ className, wishlist = false }) => {
            <Bag />
            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
          </li>
-          {wishlist && (
+          {process.env.COMMERCE_WISHLIST_ENABLED && (
            <li className={s.item}>
              <Link href="/wishlist">
                <a onClick={closeSidebarIfPresent} aria-label="Wishlist">
--- a/components/icons/CreditCard.tsx
+++ b/components/icons/CreditCard.tsx
@ -0,0 +1,20 @@
+const CreditCard = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+      <path d="M1 10h22" />
+    </svg>
+  )
+}
+
+export default CreditCard
--- a/components/icons/MapPin.tsx
+++ b/components/icons/MapPin.tsx
@ -0,0 +1,20 @@
+const MapPin = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </svg>
+  )
+}
+
+export default MapPin
--- a/components/icons/index.ts
+++ b/components/icons/index.ts
@ -14,3 +14,5 @@ export { default as RightArrow } from './RightArrow'
 export { default as Info } from './Info'
 export { default as ChevronUp } from './ChevronUp'
 export { default as Vercel } from './Vercel'
+export { default as MapPin } from './MapPin'
+export { default as CreditCard } from './CreditCard'
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@ -11,7 +11,6 @@ interface Props {
  product: Product
  variant?: 'slim' | 'simple'
  imgProps?: Omit<ImageProps, 'src'>
-  wishlist?: boolean
 }

 const placeholderImg = '/product-img-placeholder.svg'
@ -21,7 +20,6 @@ const ProductCard: FC<Props> = ({
  product,
  variant,
  imgProps,
-  wishlist = false,
  ...props
 }) => (
  <Link href={`/product/${product.slug}`} {...props}>
@ -59,11 +57,11 @@ const ProductCard: FC<Props> = ({
                {product.price.currencyCode}
              </span>
            </div>
-            {wishlist && (
+            {process.env.COMMERCE_WISHLIST_ENABLED && (
              <WishlistButton
                className={s.wishlistButton}
                productId={product.id}
-                variant={product.variants[0]}
+                variant={product.variants[0] as any}
              />
            )}
          </div>
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@ -7,7 +7,7 @@
 }

 .productDisplay {
-  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
+  @apply relative flex px-0 pb-0 box-border col-span-1 bg-violet;
  min-height: 600px;

  @screen md {
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@ -1,28 +1,23 @@
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import s from './ProductView.module.css'
-
-import { useUI } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
-import { Button, Container, Text } from '@components/ui'
-
+import { Button, Container, Text, useUI } from '@components/ui'
 import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
 import { useAddItem } from '@framework/cart'
-
 import { getVariant, SelectedOptions } from '../helpers'
 import WishlistButton from '@components/wishlist/WishlistButton'

 interface Props {
-  className?: string
  children?: any
  product: Product
-  wishlist?: boolean
+  className?: string
 }

-const ProductView: FC<Props> = ({ product, wishlist = false }) => {
+const ProductView: FC<Props> = ({ product }) => {
  const addItem = useAddItem()
  const { price } = usePrice({
    amount: product.price.value,
@ -31,12 +26,18 @@ const ProductView: FC<Props> = ({ product, wishlist = false }) => {
  })
  const { openSidebar } = useUI()
  const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<SelectedOptions>({
-    size: null,
-    color: null,
-  })
+  const [choices, setChoices] = useState<SelectedOptions>({})
+
+  useEffect(() => {
+    // Selects the default option
+    product.variants[0].options?.forEach((v) => {
+      setChoices((choices) => ({
+        ...choices,
+        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+      }))
+    })
+  }, [])

-  // Select the correct variant based on choices
  const variant = getVariant(product, choices)

  const addToCart = async () => {
@ -101,7 +102,6 @@ const ProductView: FC<Props> = ({ product, wishlist = false }) => {
            </ProductSlider>
          </div>
        </div>
-
        <div className={s.sidebar}>
          <section>
            {product.options?.map((opt) => (
@ -136,7 +136,7 @@ const ProductView: FC<Props> = ({ product, wishlist = false }) => {
            ))}

            <div className="pb-14 break-words w-full max-w-xl">
-              <Text html={product.description} />
+              <Text html={product.descriptionHtml || product.description} />
            </div>
          </section>
          <div>
@ -146,17 +146,16 @@ const ProductView: FC<Props> = ({ product, wishlist = false }) => {
              className={s.button}
              onClick={addToCart}
              loading={loading}
-              disabled={!variant && product.options.length > 0}
            >
              Add to Cart
            </Button>
          </div>
        </div>
-        {wishlist && (
+        {process.env.COMMERCE_WISHLIST_ENABLED && (
          <WishlistButton
            className={s.wishlistButton}
            productId={product.id}
-            variant={product.variants[0]!}
+            variant={product.variants[0]! as any}
          />
        )}
      </div>
--- a/components/product/Swatch/Swatch.module.css
+++ b/components/product/Swatch/Swatch.module.css
@ -1,32 +1,52 @@
-.root {
+.swatch {
+  box-sizing: border-box;
+  composes: root from 'components/ui/Button/Button.module.css';
  @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
  items-center justify-center cursor-pointer transition duration-150 ease-in-out
  p-0 shadow-none border-gray-200 border box-border;
+  margin-right: calc(0.75rem - 1px);
+  overflow: hidden;
+}

-  & > span {
-    @apply absolute;
-  }
+.swatch::before,
+.swatch::after {
+  box-sizing: border-box;
+}

-  &:hover {
-    @apply transform scale-110 bg-hover;
-  }
+.swatch:hover {
+  @apply transform scale-110 bg-hover;
+}
+
+.swatch > span {
+  @apply absolute;
 }

 .color {
  @apply text-black transition duration-150 ease-in-out;
+}

-  &:hover {
-    @apply text-black;
-  }
+.color :hover {
+  @apply text-black;
+}

-  &.dark,
-  &.dark:hover {
-    color: white !important;
-  }
+.color.dark,
+.color.dark:hover {
+  color: white !important;
 }

 .active {
-  &.size {
-    @apply border-accents-9 border-2;
-  }
+  @apply border-accents-9 border-2;
+  padding-right: 1px;
+  padding-left: 1px;
+}
+
+.textLabel {
+  @apply w-auto px-4;
+  min-width: 3rem;
+}
+
+.active.textLabel {
+  @apply border-accents-9 border-2;
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(1rem - 1px);
 }
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@ -4,50 +4,55 @@ import s from './Swatch.module.css'
 import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
-interface Props {
+interface SwatchProps {
  active?: boolean
  children?: any
  className?: string
-  label?: string
  variant?: 'size' | 'color' | string
  color?: string
+  label?: string | null
 }

-const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
+const Swatch: FC<Omit<ButtonProps, 'variant'> & SwatchProps> = ({
  className,
  color = '',
-  label,
+  label = null,
  variant = 'size',
  active,
  ...props
 }) => {
  variant = variant?.toLowerCase()
-  label = label?.toLowerCase()

-  const rootClassName = cn(
-    s.root,
+  if (label) {
+    label = label?.toLowerCase()
+  }
+
+  const swatchClassName = cn(
+    s.swatch,
    {
      [s.active]: active,
      [s.size]: variant === 'size',
      [s.color]: color,
      [s.dark]: color ? isDark(color) : false,
+      [s.textLabel]: !color && label && label.length > 3,
    },
    className
  )

  return (
    <Button
-      className={rootClassName}
+      className={swatchClassName}
      style={color ? { backgroundColor: color } : {}}
      aria-label="Variant Swatch"
+      {...(label && color && { title: label })}
      {...props}
    >
-      {variant === 'color' && active && (
+      {variant === 'color' && color && active && (
        <span>
          <Check />
        </span>
      )}
-      {variant === 'size' ? label : null}
+      {variant !== 'color' || !color ? label : null}
    </Button>
  )
 }
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@ -1,9 +1,5 @@
 import type { Product } from '@commerce/types'
-
-export type SelectedOptions = {
-  size: string | null
-  color: string | null
-}
+export type SelectedOptions = Record<string, string | null>

 export function getVariant(product: Product, opts: SelectedOptions) {
  const variant = product.variants.find((variant) => {
--- a/components/ui/Grid/Grid.module.css
+++ b/components/ui/Grid/Grid.module.css
@ -3,10 +3,6 @@
  @apply grid grid-cols-1 gap-0;
  min-height: var(--row-height);

-  @screen lg {
-    @apply grid-cols-3 grid-rows-2;
-  }
-
  & > * {
    @apply row-span-1 bg-transparent box-border overflow-hidden;
    height: 500px;
@ -19,6 +15,17 @@
  }
 }

+@screen lg {
+  .root {
+    @apply grid-cols-3 grid-rows-2;
+  }
+
+  .root & > * {
+    @apply col-span-1;
+    height: inherit;
+  }
+}
+
 .default {
  & > * {
    @apply bg-transparent;
--- a/components/ui/Hero/Hero.module.css
+++ b/components/ui/Hero/Hero.module.css
@ -1,6 +1,9 @@
 .root {
  @apply mx-auto grid grid-cols-1 py-32 gap-4;
-  @screen md {
+}
+
+@screen md {
+  .root {
    @apply grid-cols-2;
  }
 }
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@ -21,7 +21,7 @@ const Hero: FC<Props> = ({ headline, description }) => {
            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
              {description}
            </p>
-            <Link href="/blog">
+            <Link href="/">
              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
                Read it here
                <RightArrow width="20" heigh="20" className="ml-1" />
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@ -8,6 +8,7 @@ export interface State {
  displayToast: boolean
  modalView: string
  toastText: string
+  userAvatar: string
 }

 const initialState = {
@ -17,6 +18,7 @@ const initialState = {
  modalView: 'LOGIN_VIEW',
  displayToast: false,
  toastText: '',
+  userAvatar: '',
 }

 type Action =
@ -57,7 +59,12 @@ type Action =
      value: string
    }

-type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
+type MODAL_VIEWS =
+  | 'SIGNUP_VIEW'
+  | 'LOGIN_VIEW'
+  | 'FORGOT_VIEW'
+  | 'NEW_SHIPPING_ADDRESS'
+  | 'NEW_PAYMENT_METHOD'
 type ToastText = string

 export const UIContext = React.createContext<State | any>(initialState)
--- a/components/wishlist/WishlistButton/WishlistButton.tsx
+++ b/components/wishlist/WishlistButton/WishlistButton.tsx
@ -1,13 +1,12 @@
 import React, { FC, useState } from 'react'
 import cn from 'classnames'
-import { Heart } from '@components/icons'
-
 import { useUI } from '@components/ui'
-import type { Product, ProductVariant } from '@commerce/types'
-import useCustomer from '@framework/customer/use-customer'
+import { Heart } from '@components/icons'
 import useAddItem from '@framework/wishlist/use-add-item'
+import useCustomer from '@framework/customer/use-customer'
+import useWishlist from '@framework/wishlist/use-wishlist'
 import useRemoveItem from '@framework/wishlist/use-remove-item'
-import useWishlist from '@framework/wishlist/use-add-item'
+import type { Product, ProductVariant } from '@commerce/types'

 type Props = {
  productId: Product['id']
@ -27,8 +26,12 @@ const WishlistButton: FC<Props> = ({
  const { openModal, setModalView } = useUI()
  const [loading, setLoading] = useState(false)

+  // @ts-ignore Wishlist is not always enabled
  const itemInWishlist = data?.items?.find(
-    (item) => item.product_id === productId && item.variant_id === variant.id
+    // @ts-ignore Wishlist is not always enabled
+    (item) =>
+      item.product_id === Number(productId) &&
+      (item.variant_id as any) === Number(variant.id)
  )

  const handleWishlistChange = async (e: any) => {
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@ -22,7 +22,8 @@ const WishlistCard: FC<Props> = ({ product }) => {
    baseAmount: product.prices?.retailPrice?.value,
    currencyCode: product.prices?.price?.currencyCode!,
  })
-  const removeItem = useRemoveItem({ includeProducts: true })
+  // @ts-ignore Wishlist is not always enabled
+  const removeItem = useRemoveItem({ wishlist: { includeProducts: true } })
  const [loading, setLoading] = useState(false)
  const [removing, setRemoving] = useState(false)
  const addItem = useAddItem()
--- a/config/seo.json
+++ b/config/seo.json
@ -1,12 +1,22 @@
 {
  "title": "ACME Storefront | Powered by Next.js Commerce",
  "titleTemplate": "%s - ACME Storefront",
-  "description": "Next.js Commerce -> https://www.nextjs.org/commerce",
+  "description": "Next.js Commerce - https://www.nextjs.org/commerce",
  "openGraph": {
+    "title": "ACME Storefront | Powered by Next.js Commerce",
+    "description": "Next.js Commerce - https://www.nextjs.org/commerce",
    "type": "website",
    "locale": "en_IE",
    "url": "https://nextjs.org/commerce",
-    "site_name": "Next.js Commerce"
+    "site_name": "Next.js Commerce",
+    "images": [
+      {
+        "url": "/card.png",
+        "width": 800,
+        "height": 600,
+        "alt": "Next.js Commerce"
+      }
+    ]
  },
  "twitter": {
    "handle": "@nextjs",
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@ -1 +0,0 @@
-# Roadmap
--- a/framework/bigcommerce/.env.template
+++ b/framework/bigcommerce/.env.template
@ -0,0 +1,8 @@
+COMMERCE_PROVIDER=bigcommerce
+
+BIGCOMMERCE_STOREFRONT_API_URL=
+BIGCOMMERCE_STOREFRONT_API_TOKEN=
+BIGCOMMERCE_STORE_API_URL=
+BIGCOMMERCE_STORE_API_TOKEN=
+BIGCOMMERCE_STORE_API_CLIENT_ID=
+BIGCOMMERCE_CHANNEL_ID=
--- a/framework/bigcommerce/README.md
+++ b/framework/bigcommerce/README.md
@ -1,45 +1,34 @@
-# Table of Contents
+# Bigcommerce Provider

- [BigCommerce Storefront Data Hooks](#bigcommerce-storefront-data-hooks)
-  - [Installation](#installation)
-  - [General Usage](#general-usage)
-    - [CommerceProvider](#commerceprovider)
-    - [useLogin hook](#uselogin-hook)
-    - [useLogout](#uselogout)
-    - [useCustomer](#usecustomer)
-    - [useSignup](#usesignup)
-    - [usePrice](#useprice)
-  - [Cart Hooks](#cart-hooks)
-    - [useCart](#usecart)
-    - [useAddItem](#useadditem)
-    - [useUpdateItem](#useupdateitem)
-    - [useRemoveItem](#useremoveitem)
-  - [Wishlist Hooks](#wishlist-hooks)
-  - [Product Hooks and API](#product-hooks-and-api)
-    - [useSearch](#usesearch)
-    - [getAllProducts](#getallproducts)
-    - [getProduct](#getproduct)
-  - [More](#more)
+**Demo:** https://bigcommerce.demo.vercel.store/

-# BigCommerce Storefront Data Hooks
+With the deploy button below you'll be able to have a [BigCommerce](https://www.bigcommerce.com/) account and a store that works with this starter:

-> This project is under active development, new features and updates will be continuously added over time
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)

-UI hooks and data fetching methods built from the ground up for e-commerce applications written in React, that use BigCommerce as a headless e-commerce platform. The package provides:
+If you already have a BigCommerce account and want to use your current store, then copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):

- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
- Code splitted data fetching methods for initial data population and static generation of content
- Helpers to create the API endpoints that connect to the hooks, very well suited for Next.js applications
-
-## Installation
-
-To install:
-
-```
-yarn add storefront-data-hooks
+```bash
+cp framework/bigcommerce/.env.template .env.local
 ```

-After install, the first thing you do is: <b>set your environment variables</b> in `.env.local`
+Then, set the environment variables in `.env.local` to match the ones from your store.
+
+## Contribute
+
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
+
+If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).
+
+## Troubleshoot
+
+<details>
+<summary>I already own a BigCommerce store. What should I do?</summary>
+<br>
+First thing you do is: <b>set your environment variables</b>
+<br>
+<br>
+.env.local

 ```sh
 BIGCOMMERCE_STOREFRONT_API_URL=<>
@ -47,333 +36,24 @@ BIGCOMMERCE_STOREFRONT_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_URL=<>
 BIGCOMMERCE_STORE_API_TOKEN=<>
 BIGCOMMERCE_STORE_API_CLIENT_ID=<>
+BIGCOMMERCE_CHANNEL_ID=<>
 ```

-## General Usage
+If your project was started with a "Deploy with Vercel" button, you can use Vercel's CLI to retrieve these credentials.

-### CommerceProvider
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and Github accounts (creates .vercel file): `vercel link`
+3. Download your environment variables: `vercel env pull .env.local`

-This component is a provider pattern component that creates commerce context for it's children. It takes config values for the locale and an optional `fetcherRef` object for data fetching.
+Next, you're free to customize the starter. More updates coming soon. Stay tuned.

-```jsx
-...
-import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
+</details>

-const App = ({ locale = 'en-US', children }) => {
-  return (
-    <CommerceProvider locale={locale}>
-      {children}
-    </CommerceProvider>
-  )
-}
-...
-```
-
-### useLogin hook
-
-Hook for bigcommerce user login functionality, returns `login` function to handle user login.
-
-```jsx
-...
-import useLogin from '@bigcommerce/storefront-data-hooks/use-login'
-
-const LoginView = () => {
-  const login = useLogin()
-
-  const handleLogin = async () => {
-    await login({
-      email,
-      password,
-    })
-  }
-
-  return (
-    <form onSubmit={handleLogin}>
-      {children}
-    </form>
-  )
-}
-...
-```
-
-### useLogout
-
-Hook to logout user.
-
-```jsx
-...
-import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
-
-const LogoutLink = () => {
-  const logout = useLogout()
-  return (
-    <a onClick={() => logout()}>
-      Logout
-    </a>
-  )
-}
-```
-
-### useCustomer
-
-Hook for getting logged in customer data, and fetching customer info.
-
-```jsx
-...
-import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
-...
-
-const Profile = () => {
-  const { data } = useCustomer()
-
-  if (!data) {
-    return null
-  }
-
-  return (
-    <div>Hello, {data.firstName}</div>
-  )
-}
-```
-
-### useSignup
-
-Hook for bigcommerce user signup, returns `signup` function to handle user signups.
-
-```jsx
-...
-import useSignup from '@bigcommerce/storefront-data-hooks/use-login'
-
-const SignupView = () => {
-  const signup = useSignup()
-
-  const handleSignup = async () => {
-    await signup({
-      email,
-      firstName,
-      lastName,
-      password,
-    })
-  }
-
-  return (
-    <form onSubmit={handleSignup}>
-      {children}
-    </form>
-  )
-}
-...
-```
-
-### usePrice
-
-Helper hook to format price according to commerce locale, and return discount if available.
-
-```jsx
-import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-...
-  const { price, discount, basePrice } = usePrice(
-    data && {
-      amount: data.cart_amount,
-      currencyCode: data.currency.code,
-    }
-  )
-...
-```
-
-## Cart Hooks
-
-### useCart
-
-Returns the current cart data for use
-
-```jsx
-...
-import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
-
-const countItem = (count: number, item: LineItem) => count + item.quantity
-
-const CartNumber = () => {
-  const { data } = useCart()
-  const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0
-
-  return itemsCount > 0 ? <span>{itemsCount}</span> : null
-}
-```
-
-### useAddItem
-
-```jsx
-...
-import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
-
-const AddToCartButton = ({ productId, variantId }) => {
-  const addItem = useAddItem()
-
-  const addToCart = async () => {
-    await addItem({
-      productId,
-      variantId,
-    })
-  }
-
-  return <button onClick={addToCart}>Add To Cart</button>
-}
-...
-```
-
-### useUpdateItem
-
-```jsx
-...
-import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item'
-
-const CartItem = ({ item }) => {
-  const [quantity, setQuantity] = useState(item.quantity)
-  const updateItem = useUpdateItem(item)
-
-  const updateQuantity = async (e) => {
-    const val = e.target.value
-    await updateItem({ quantity: val })
-  }
-
-  return (
-    <input
-      type="number"
-      max={99}
-      min={0}
-      value={quantity}
-      onChange={updateQuantity}
-    />
-  )
-}
-...
-```
-
-### useRemoveItem
-
-Provided with a cartItemId, will remove an item from the cart:
-
-```jsx
-...
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item'
-
-const RemoveButton = ({ item }) => {
-  const removeItem = useRemoveItem()
-
-  const handleRemove = async () => {
-    await removeItem({ id: item.id })
-  }
-
-  return <button onClick={handleRemove}>Remove</button>
-}
-...
-```
-
-## Wishlist Hooks
-
-Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`.
-
-```jsx
-import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item'
-import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
-import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
-
-const WishlistButton = ({ productId, variant }) => {
-  const addItem = useAddItem()
-  const removeItem = useRemoveItem()
-  const { data } = useWishlist()
-  const { data: customer } = useCustomer()
-  const itemInWishlist = data?.items?.find(
-    (item) =>
-      item.product_id === productId &&
-      item.variant_id === variant?.node.entityId
-  )
-
-  const handleWishlistChange = async (e) => {
-    e.preventDefault()
-
-    if (!customer) {
-      return
-    }
-
-    if (itemInWishlist) {
-      await removeItem({ id: itemInWishlist.id! })
-    } else {
-      await addItem({
-        productId,
-        variantId: variant?.node.entityId!,
-      })
-    }
-  }
-
-  return (
-    <button onClick={handleWishlistChange}>
-      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
-    </button>
-  )
-}
-```
-
-## Product Hooks and API
-
-### useSearch
-
-`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string.
-
-```jsx
-...
-import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search'
-
-const SearchPage = ({ searchString, category, brand, sortStr }) => {
-  const { data } = useSearch({
-    search: searchString || '',
-    categoryId: category?.entityId,
-    brandId: brand?.entityId,
-    sort: sortStr || '',
-  })
-
-  return (
-    <Grid layout="normal">
-      {data.products.map(({ node }) => (
-        <ProductCard key={node.path} product={node} />
-      ))}
-    </Grid>
-  )
-}
-```
-
-### getAllProducts
-
-API function to retrieve a product list.
-
-```js
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getAllProducts from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
-
-const { products } = await getAllProducts({
-  variables: { field: 'featuredProducts', first: 6 },
-  config,
-  preview,
-})
-```
-
-### getProduct
-
-API product to retrieve a single product when provided with the product
-slug string.
-
-```js
-import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
-import getProduct from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
-
-const { product } = await getProduct({
-  variables: { slug },
-  config,
-  preview,
-})
-```
-
-## More
-
-Feel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))
+<details>
+<summary>BigCommerce shows a Coming Soon page and requests a Preview Code</summary>
+<br>
+After Email confirmation, Checkout should be manually enabled through BigCommerce platform. Look for "Review & test your store" section through BigCommerce's dashboard.
+<br>
+<br>
+BigCommerce team has been notified and they plan to add more detailed about this subject.
+</details>
--- a/framework/bigcommerce/api/utils/parse-item.ts
+++ b/framework/bigcommerce/api/utils/parse-item.ts
@ -1,6 +1,11 @@
 import type { ItemBody as WishlistItemBody } from '../wishlist'
 import type { CartItemBody, OptionSelections } from '../../types'

+type BCWishlistItemBody = {
+  product_id: number
+  variant_id: number
+}
+
 type BCCartItemBody = {
  product_id: number
  variant_id: number
@ -8,9 +13,11 @@ type BCCartItemBody = {
  option_selections?: OptionSelections
 }

-export const parseWishlistItem = (item: WishlistItemBody) => ({
-  product_id: item.productId,
-  variant_id: item.variantId,
+export const parseWishlistItem = (
+  item: WishlistItemBody
+): BCWishlistItemBody => ({
+  product_id: Number(item.productId),
+  variant_id: Number(item.variantId),
 })

 export const parseCartItem = (item: CartItemBody): BCCartItemBody => ({
--- a/framework/bigcommerce/auth/use-login.tsx
+++ b/framework/bigcommerce/auth/use-login.tsx
@ -1,54 +1,40 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useCommerceLogin from '@commerce/use-login'
+import useLogin, { UseLogin } from '@commerce/auth/use-login'
 import type { LoginBody } from '../api/customers/login'
 import useCustomer from '../customer/use-customer'

-const defaultOpts = {
-  url: '/api/bigcommerce/customers/login',
-  method: 'POST',
-}
+export default useLogin as UseLogin<typeof handler>

-export type LoginInput = LoginBody
+export const handler: MutationHook<null, {}, LoginBody> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/customers/login',
+    method: 'POST',
+  },
+  async fetcher({ input: { email, password }, options, fetch }) {
+    if (!(email && password)) {
+      throw new CommerceError({
+        message:
+          'A first name, last name, email and password are required to login',
+      })
+    }

-export const fetcher: HookFetcher<null, LoginBody> = (
-  options,
-  { email, password },
-  fetch
-) => {
-  if (!(email && password)) {
-    throw new CommerceError({
-      message:
-        'A first name, last name, email and password are required to login',
+    return fetch({
+      ...options,
+      body: { email, password },
    })
-  }
-
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    body: { email, password },
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useLogin = () => {
+  },
+  useHook: ({ fetch }) => () => {
    const { revalidate } = useCustomer()
-    const fn = useCommerceLogin<null, LoginInput>(defaultOpts, customFetcher)

    return useCallback(
-      async function login(input: LoginInput) {
-        const data = await fn(input)
+      async function login(input) {
+        const data = await fetch({ input })
        await revalidate()
        return data
      },
-      [fn]
+      [fetch, revalidate]
    )
-  }
-
-  useLogin.extend = extendHook
-
-  return useLogin
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/auth/use-logout.tsx
+++ b/framework/bigcommerce/auth/use-logout.tsx
@ -1,38 +1,25 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
-import useCommerceLogout from '@commerce/use-logout'
+import type { MutationHook } from '@commerce/utils/types'
+import useLogout, { UseLogout } from '@commerce/auth/use-logout'
 import useCustomer from '../customer/use-customer'

-const defaultOpts = {
-  url: '/api/bigcommerce/customers/logout',
-  method: 'GET',
-}
+export default useLogout as UseLogout<typeof handler>

-export const fetcher: HookFetcher<null> = (options, _, fetch) => {
-  return fetch({
-    ...defaultOpts,
-    ...options,
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useLogout = () => {
+export const handler: MutationHook<null> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/customers/logout',
+    method: 'GET',
+  },
+  useHook: ({ fetch }) => () => {
    const { mutate } = useCustomer()
-    const fn = useCommerceLogout<null>(defaultOpts, customFetcher)

    return useCallback(
-      async function login() {
-        const data = await fn(null)
+      async function logout() {
+        const data = await fetch()
        await mutate(null, false)
        return data
      },
-      [fn]
+      [fetch, mutate]
    )
-  }
-
-  useLogout.extend = extendHook
-
-  return useLogout
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/auth/use-signup.tsx
+++ b/framework/bigcommerce/auth/use-signup.tsx
@ -1,54 +1,44 @@
 import { useCallback } from 'react'
-import type { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useCommerceSignup from '@commerce/use-signup'
+import useSignup, { UseSignup } from '@commerce/auth/use-signup'
 import type { SignupBody } from '../api/customers/signup'
 import useCustomer from '../customer/use-customer'

-const defaultOpts = {
-  url: '/api/bigcommerce/customers/signup',
-  method: 'POST',
-}
+export default useSignup as UseSignup<typeof handler>

-export type SignupInput = SignupBody
+export const handler: MutationHook<null, {}, SignupBody, SignupBody> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/customers/signup',
+    method: 'POST',
+  },
+  async fetcher({
+    input: { firstName, lastName, email, password },
+    options,
+    fetch,
+  }) {
+    if (!(firstName && lastName && email && password)) {
+      throw new CommerceError({
+        message:
+          'A first name, last name, email and password are required to signup',
+      })
+    }

-export const fetcher: HookFetcher<null, SignupBody> = (
-  options,
-  { firstName, lastName, email, password },
-  fetch
-) => {
-  if (!(firstName && lastName && email && password)) {
-    throw new CommerceError({
-      message:
-        'A first name, last name, email and password are required to signup',
+    return fetch({
+      ...options,
+      body: { firstName, lastName, email, password },
    })
-  }
-
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    body: { firstName, lastName, email, password },
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useSignup = () => {
+  },
+  useHook: ({ fetch }) => () => {
    const { revalidate } = useCustomer()
-    const fn = useCommerceSignup<null, SignupInput>(defaultOpts, customFetcher)

    return useCallback(
-      async function signup(input: SignupInput) {
-        const data = await fn(input)
+      async function signup(input) {
+        const data = await fetch({ input })
        await revalidate()
        return data
      },
-      [fn]
+      [fetch, revalidate]
    )
-  }
-
-  useSignup.extend = extendHook
-
-  return useSignup
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/cart/index.ts
+++ b/framework/bigcommerce/cart/index.ts
@ -1,5 +1,4 @@
 export { default as useCart } from './use-cart'
 export { default as useAddItem } from './use-add-item'
 export { default as useRemoveItem } from './use-remove-item'
-export { default as useWishlistActions } from './use-cart-actions'
-export { default as useUpdateItem } from './use-cart-actions'
+export { default as useUpdateItem } from './use-update-item'
--- a/framework/bigcommerce/cart/use-add-item.tsx
+++ b/framework/bigcommerce/cart/use-add-item.tsx
@ -1,29 +1,24 @@
-import type { MutationHandler } from '@commerce/utils/types'
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
 import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
 import { normalizeCart } from '../lib/normalize'
 import type {
-  AddCartItemBody,
  Cart,
  BigcommerceCart,
  CartItemBody,
+  AddCartItemBody,
 } from '../types'
 import useCart from './use-cart'
-import { BigcommerceProvider } from '..'

-const defaultOpts = {
-  url: '/api/bigcommerce/cart',
-  method: 'POST',
-}
+export default useAddItem as UseAddItem<typeof handler>

-export default useAddItem as UseAddItem<BigcommerceProvider, CartItemBody>
-
-export const handler: MutationHandler<Cart, {}, AddCartItemBody> = {
+export const handler: MutationHook<Cart, {}, CartItemBody> = {
  fetchOptions: {
    url: '/api/bigcommerce/cart',
-    method: 'GET',
+    method: 'POST',
  },
-  async fetcher({ input: { item }, options, fetch }) {
+  async fetcher({ input: item, options, fetch }) {
    if (
      item.quantity &&
      (!Number.isInteger(item.quantity) || item.quantity! < 1)
@ -34,20 +29,22 @@ export const handler: MutationHandler<Cart, {}, AddCartItemBody> = {
    }

    const data = await fetch<BigcommerceCart, AddCartItemBody>({
-      ...defaultOpts,
      ...options,
      body: { item },
    })

    return normalizeCart(data)
  },
-  useHook() {
+  useHook: ({ fetch }) => () => {
    const { mutate } = useCart()

-    return async function addItem({ input, fetch }) {
-      const data = await fetch({ input })
-      await mutate(data, false)
-      return data
-    }
+    return useCallback(
+      async function addItem(input) {
+        const data = await fetch({ input })
+        await mutate(data, false)
+        return data
+      },
+      [fetch, mutate]
+    )
  },
 }
--- a/framework/bigcommerce/cart/use-cart.tsx
+++ b/framework/bigcommerce/cart/use-cart.tsx
@ -1,13 +1,12 @@
 import { useMemo } from 'react'
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useCart, { UseCart, FetchCartInput } from '@commerce/cart/use-cart'
 import { normalizeCart } from '../lib/normalize'
 import type { Cart } from '../types'
-import type { BigcommerceProvider } from '..'

-export default useCart as UseCart<BigcommerceProvider>
+export default useCart as UseCart<typeof handler>

-export const handler: HookHandler<
+export const handler: SWRHook<
  Cart | null,
  {},
  FetchCartInput,
@ -21,9 +20,9 @@ export const handler: HookHandler<
    const data = cartId ? await fetch(options) : null
    return data && normalizeCart(data)
  },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input) => {
    const response = useData({
-      swrOptions: { revalidateOnFocus: false, ...input.swrOptions },
+      swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
    })

    return useMemo(
--- a/framework/bigcommerce/cart/use-remove-item.tsx
+++ b/framework/bigcommerce/cart/use-remove-item.tsx
@ -1,8 +1,12 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@commerce/utils/types'
+import type {
+  MutationHookContext,
+  HookFetcherContext,
+} from '@commerce/utils/types'
 import { ValidationError } from '@commerce/utils/errors'
-import useCartRemoveItem, {
-  RemoveItemInput as UseRemoveItemInput,
+import useRemoveItem, {
+  RemoveItemInput as RemoveItemInputBase,
+  UseRemoveItem,
 } from '@commerce/cart/use-remove-item'
 import { normalizeCart } from '../lib/normalize'
 import type {
@ -13,41 +17,41 @@ import type {
 } from '../types'
 import useCart from './use-cart'

-const defaultOpts = {
-  url: '/api/bigcommerce/cart',
-  method: 'DELETE',
-}
-
 export type RemoveItemFn<T = any> = T extends LineItem
  ? (input?: RemoveItemInput<T>) => Promise<Cart | null>
  : (input: RemoveItemInput<T>) => Promise<Cart | null>

 export type RemoveItemInput<T = any> = T extends LineItem
-  ? Partial<UseRemoveItemInput>
-  : UseRemoveItemInput
+  ? Partial<RemoveItemInputBase>
+  : RemoveItemInputBase

-export const fetcher: HookFetcher<Cart | null, RemoveCartItemBody> = async (
-  options,
-  { itemId },
-  fetch
-) => {
-  const data = await fetch<BigcommerceCart>({
-    ...defaultOpts,
-    ...options,
-    body: { itemId },
-  })
-  return normalizeCart(data)
-}
+export default useRemoveItem as UseRemoveItem<typeof handler>

-export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = <T extends LineItem | undefined = undefined>(
-    item?: T
+export const handler = {
+  fetchOptions: {
+    url: '/api/bigcommerce/cart',
+    method: 'DELETE',
+  },
+  async fetcher({
+    input: { itemId },
+    options,
+    fetch,
+  }: HookFetcherContext<RemoveCartItemBody>) {
+    const data = await fetch<BigcommerceCart>({
+      ...options,
+      body: { itemId },
+    })
+    return normalizeCart(data)
+  },
+  useHook: ({
+    fetch,
+  }: MutationHookContext<Cart | null, RemoveCartItemBody>) => <
+    T extends LineItem | undefined = undefined
+  >(
+    ctx: { item?: T } = {}
  ) => {
+    const { item } = ctx
    const { mutate } = useCart()
-    const fn = useCartRemoveItem<Cart | null, RemoveCartItemBody>(
-      defaultOpts,
-      customFetcher
-    )
    const removeItem: RemoveItemFn<LineItem> = async (input) => {
      const itemId = input?.id ?? item?.id

@ -57,17 +61,11 @@ export function extendHook(customFetcher: typeof fetcher) {
        })
      }

-      const data = await fn({ itemId })
+      const data = await fetch({ input: { itemId } })
      await mutate(data, false)
      return data
    }

-    return useCallback(removeItem as RemoveItemFn<T>, [fn, mutate])
-  }
-
-  useRemoveItem.extend = extendHook
-
-  return useRemoveItem
+    return useCallback(removeItem as RemoveItemFn<T>, [fetch, mutate])
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/cart/use-update-item.tsx
+++ b/framework/bigcommerce/cart/use-update-item.tsx
@ -1,9 +1,13 @@
 import { useCallback } from 'react'
 import debounce from 'lodash.debounce'
-import type { HookFetcher } from '@commerce/utils/types'
+import type {
+  MutationHookContext,
+  HookFetcherContext,
+} from '@commerce/utils/types'
 import { ValidationError } from '@commerce/utils/errors'
-import useCartUpdateItem, {
-  UpdateItemInput as UseUpdateItemInput,
+import useUpdateItem, {
+  UpdateItemInput as UpdateItemInputBase,
+  UseUpdateItem,
 } from '@commerce/cart/use-update-item'
 import { normalizeCart } from '../lib/normalize'
 import type {
@ -12,52 +16,59 @@ import type {
  BigcommerceCart,
  LineItem,
 } from '../types'
-import { fetcher as removeFetcher } from './use-remove-item'
+import { handler as removeItemHandler } from './use-remove-item'
 import useCart from './use-cart'

-const defaultOpts = {
-  url: '/api/bigcommerce/cart',
-  method: 'PUT',
-}
-
 export type UpdateItemInput<T = any> = T extends LineItem
-  ? Partial<UseUpdateItemInput<LineItem>>
-  : UseUpdateItemInput<LineItem>
+  ? Partial<UpdateItemInputBase<LineItem>>
+  : UpdateItemInputBase<LineItem>

-export const fetcher: HookFetcher<Cart | null, UpdateCartItemBody> = async (
-  options,
-  { itemId, item },
-  fetch
-) => {
-  if (Number.isInteger(item.quantity)) {
-    // Also allow the update hook to remove an item if the quantity is lower than 1
-    if (item.quantity! < 1) {
-      return removeFetcher(null, { itemId }, fetch)
+export default useUpdateItem as UseUpdateItem<typeof handler>
+
+export const handler = {
+  fetchOptions: {
+    url: '/api/bigcommerce/cart',
+    method: 'PUT',
+  },
+  async fetcher({
+    input: { itemId, item },
+    options,
+    fetch,
+  }: HookFetcherContext<UpdateCartItemBody>) {
+    if (Number.isInteger(item.quantity)) {
+      // Also allow the update hook to remove an item if the quantity is lower than 1
+      if (item.quantity! < 1) {
+        return removeItemHandler.fetcher({
+          options: removeItemHandler.fetchOptions,
+          input: { itemId },
+          fetch,
+        })
+      }
+    } else if (item.quantity) {
+      throw new ValidationError({
+        message: 'The item quantity has to be a valid integer',
+      })
    }
-  } else if (item.quantity) {
-    throw new ValidationError({
-      message: 'The item quantity has to be a valid integer',
+
+    const data = await fetch<BigcommerceCart, UpdateCartItemBody>({
+      ...options,
+      body: { itemId, item },
    })
-  }

-  const data = await fetch<BigcommerceCart, UpdateCartItemBody>({
-    ...defaultOpts,
-    ...options,
-    body: { itemId, item },
-  })
-
-  return normalizeCart(data)
-}
-
-function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
-  const useUpdateItem = <T extends LineItem | undefined = undefined>(
-    item?: T
+    return normalizeCart(data)
+  },
+  useHook: ({
+    fetch,
+  }: MutationHookContext<Cart | null, UpdateCartItemBody>) => <
+    T extends LineItem | undefined = undefined
+  >(
+    ctx: {
+      item?: T
+      wait?: number
+    } = {}
  ) => {
-    const { mutate } = useCart()
-    const fn = useCartUpdateItem<Cart | null, UpdateCartItemBody>(
-      defaultOpts,
-      customFetcher
-    )
+    const { item } = ctx
+    const { mutate } = useCart() as any

    return useCallback(
      debounce(async (input: UpdateItemInput<T>) => {
@ -71,20 +82,16 @@ function extendHook(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
          })
        }

-        const data = await fn({
-          itemId,
-          item: { productId, variantId, quantity: input.quantity },
+        const data = await fetch({
+          input: {
+            itemId,
+            item: { productId, variantId, quantity: input.quantity },
+          },
        })
        await mutate(data, false)
        return data
-      }, cfg?.wait ?? 500),
-      [fn, mutate]
+      }, ctx.wait ?? 500),
+      [fetch, mutate]
    )
-  }
-
-  useUpdateItem.extend = extendHook
-
-  return useUpdateItem
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/commerce.config.json
+++ b/framework/bigcommerce/commerce.config.json
@ -0,0 +1,6 @@
+{
+  "provider": "bigcommerce",
+  "features": {
+    "wishlist": true
+  }
+}
--- a/framework/bigcommerce/customer/get-customer-wishlist.ts
+++ b/framework/bigcommerce/customer/get-customer-wishlist.ts
@ -68,14 +68,15 @@ async function getCustomerWishlist({
      const productsById = graphqlData.products.reduce<{
        [k: number]: ProductEdge
      }>((prods, p) => {
-        prods[Number(p.node.entityId)] = p as any
+        prods[Number(p.id)] = p as any
        return prods
      }, {})
      // Populate the wishlist items with the graphql products
      wishlist.items.forEach((item) => {
        const product = item && productsById[item.product_id!]
        if (item && product) {
-          item.product = product.node
+          // @ts-ignore Fix this type when the wishlist type is properly defined
+          item.product = product
        }
      })
    }
--- a/framework/bigcommerce/customer/use-customer.tsx
+++ b/framework/bigcommerce/customer/use-customer.tsx
@ -1,11 +1,10 @@
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useCustomer, { UseCustomer } from '@commerce/customer/use-customer'
 import type { Customer, CustomerData } from '../api/customers'
-import type { BigcommerceProvider } from '..'

-export default useCustomer as UseCustomer<BigcommerceProvider>
+export default useCustomer as UseCustomer<typeof handler>

-export const handler: HookHandler<Customer | null> = {
+export const handler: SWRHook<Customer | null> = {
  fetchOptions: {
    url: '/api/bigcommerce/customers',
    method: 'GET',
@ -14,11 +13,11 @@ export const handler: HookHandler<Customer | null> = {
    const data = await fetch<CustomerData | null>(options)
    return data?.customer ?? null
  },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input) => {
    return useData({
      swrOptions: {
        revalidateOnFocus: false,
-        ...input.swrOptions,
+        ...input?.swrOptions,
      },
    })
  },
--- a/framework/bigcommerce/next.config.js
+++ b/framework/bigcommerce/next.config.js
@ -0,0 +1,8 @@
+const commerce = require('./commerce.config.json')
+
+module.exports = {
+  commerce,
+  images: {
+    domains: ['cdn11.bigcommerce.com'],
+  },
+}
--- a/framework/bigcommerce/product/get-product.ts
+++ b/framework/bigcommerce/product/get-product.ts
@ -2,7 +2,7 @@ import type { GetProductQuery, GetProductQueryVariables } from '../schema'
 import setProductLocaleMeta from '../api/utils/set-product-locale-meta'
 import { productInfoFragment } from '../api/fragments/product'
 import { BigcommerceConfig, getConfig } from '../api'
-import { normalizeProduct } from '@framework/lib/normalize'
+import { normalizeProduct } from '../lib/normalize'
 import type { Product } from '@commerce/types'

 export const getProductQuery = /* GraphQL */ `
--- a/framework/bigcommerce/product/use-price.tsx
+++ b/framework/bigcommerce/product/use-price.tsx
@ -1,2 +1,2 @@
-export * from '@commerce/use-price'
-export { default } from '@commerce/use-price'
+export * from '@commerce/product/use-price'
+export { default } from '@commerce/product/use-price'
--- a/framework/bigcommerce/product/use-search.tsx
+++ b/framework/bigcommerce/product/use-search.tsx
@ -1,9 +1,8 @@
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useSearch, { UseSearch } from '@commerce/product/use-search'
 import type { SearchProductsData } from '../api/catalog/products'
-import type { BigcommerceProvider } from '..'

-export default useSearch as UseSearch<BigcommerceProvider>
+export default useSearch as UseSearch<typeof handler>

 export type SearchProductsInput = {
  search?: string
@ -12,7 +11,7 @@ export type SearchProductsInput = {
  sort?: string
 }

-export const handler: HookHandler<
+export const handler: SWRHook<
  SearchProductsData,
  SearchProductsInput,
  SearchProductsInput
@ -37,7 +36,7 @@ export const handler: HookHandler<
      method: options.method,
    })
  },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input = {}) => {
    return useData({
      input: [
        ['search', input.search],
--- a/framework/bigcommerce/provider.ts
+++ b/framework/bigcommerce/provider.ts
@ -1,18 +1,34 @@
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
+import { handler as useUpdateItem } from './cart/use-update-item'
+import { handler as useRemoveItem } from './cart/use-remove-item'
+
 import { handler as useWishlist } from './wishlist/use-wishlist'
+import { handler as useWishlistAddItem } from './wishlist/use-add-item'
+import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
+
 import { handler as useCustomer } from './customer/use-customer'
 import { handler as useSearch } from './product/use-search'
+
+import { handler as useLogin } from './auth/use-login'
+import { handler as useLogout } from './auth/use-logout'
+import { handler as useSignup } from './auth/use-signup'
+
 import fetcher from './fetcher'

 export const bigcommerceProvider = {
  locale: 'en-us',
  cartCookie: 'bc_cartId',
  fetcher,
-  cart: { useCart, useAddItem },
-  wishlist: { useWishlist },
+  cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+  wishlist: {
+    useWishlist,
+    useAddItem: useWishlistAddItem,
+    useRemoveItem: useWishlistRemoveItem,
+  },
  customer: { useCustomer },
  products: { useSearch },
+  auth: { useLogin, useLogout, useSignup },
 }

 export type BigcommerceProvider = typeof bigcommerceProvider
--- a/framework/bigcommerce/types.ts
+++ b/framework/bigcommerce/types.ts
@ -43,9 +43,6 @@ export type CartItemBody = Core.CartItemBody & {
  optionSelections?: OptionSelections
 }

-type X = Core.CartItemBody extends CartItemBody ? any : never
-type Y = CartItemBody extends Core.CartItemBody ? any : never
-
 export type GetCartHandlerBody = Core.GetCartHandlerBody

 export type AddCartItemBody = Core.AddCartItemBody<CartItemBody>
--- a/framework/bigcommerce/wishlist/index.ts
+++ b/framework/bigcommerce/wishlist/index.ts
@ -1,4 +1,3 @@
 export { default as useAddItem } from './use-add-item'
 export { default as useWishlist } from './use-wishlist'
 export { default as useRemoveItem } from './use-remove-item'
-export { default as useWishlistActions } from './use-wishlist-actions'
--- a/framework/bigcommerce/wishlist/use-add-item.tsx
+++ b/framework/bigcommerce/wishlist/use-add-item.tsx
@ -1,43 +1,24 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useWishlistAddItem, {
-  AddItemInput,
-} from '@commerce/wishlist/use-add-item'
-import { UseWishlistInput } from '@commerce/wishlist/use-wishlist'
+import useAddItem, { UseAddItem } from '@commerce/wishlist/use-add-item'
 import type { ItemBody, AddItemBody } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
 import useWishlist from './use-wishlist'
-import type { BigcommerceProvider } from '..'

-const defaultOpts = {
-  url: '/api/bigcommerce/wishlist',
-  method: 'POST',
-}
+export default useAddItem as UseAddItem<typeof handler>

-// export type AddItemInput = ItemBody
-
-export const fetcher: HookFetcher<any, AddItemBody> = (
-  options,
-  { item },
-  fetch
-) => {
-  // TODO: add validations before doing the fetch
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    body: { item },
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useAddItem = (opts?: UseWishlistInput<BigcommerceProvider>) => {
+export const handler: MutationHook<any, {}, ItemBody, AddItemBody> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/wishlist',
+    method: 'POST',
+  },
+  useHook: ({ fetch }) => () => {
    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist(opts)
-    const fn = useWishlistAddItem(defaultOpts, customFetcher)
+    const { revalidate } = useWishlist()

    return useCallback(
-      async function addItem(input: AddItemInput<any>) {
+      async function addItem(item) {
        if (!customer) {
          // A signed customer is required in order to have a wishlist
          throw new CommerceError({
@ -45,17 +26,12 @@ export function extendHook(customFetcher: typeof fetcher) {
          })
        }

-        const data = await fn({ item: input })
+        // TODO: add validations before doing the fetch
+        const data = await fetch({ input: { item } })
        await revalidate()
        return data
      },
-      [fn, revalidate, customer]
+      [fetch, revalidate, customer]
    )
-  }
-
-  useAddItem.extend = extendHook
-
-  return useAddItem
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/wishlist/use-remove-item.tsx
+++ b/framework/bigcommerce/wishlist/use-remove-item.tsx
@ -1,43 +1,32 @@
 import { useCallback } from 'react'
-import { HookFetcher } from '@commerce/utils/types'
+import type { MutationHook } from '@commerce/utils/types'
 import { CommerceError } from '@commerce/utils/errors'
-import useWishlistRemoveItem from '@commerce/wishlist/use-remove-item'
-import type { RemoveItemBody } from '../api/wishlist'
+import useRemoveItem, {
+  RemoveItemInput,
+  UseRemoveItem,
+} from '@commerce/wishlist/use-remove-item'
+import type { RemoveItemBody, Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
-import useWishlist from './use-wishlist'
+import useWishlist, { UseWishlistInput } from './use-wishlist'

-const defaultOpts = {
-  url: '/api/bigcommerce/wishlist',
-  method: 'DELETE',
-}
+export default useRemoveItem as UseRemoveItem<typeof handler>

-export type RemoveItemInput = {
-  id: string | number
-}
-
-export const fetcher: HookFetcher<any | null, RemoveItemBody> = (
-  options,
-  { itemId },
-  fetch
-) => {
-  return fetch({
-    ...defaultOpts,
-    ...options,
-    body: { itemId },
-  })
-}
-
-export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (opts?: any) => {
+export const handler: MutationHook<
+  Wishlist | null,
+  { wishlist?: UseWishlistInput },
+  RemoveItemInput,
+  RemoveItemBody
+> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/wishlist',
+    method: 'DELETE',
+  },
+  useHook: ({ fetch }) => ({ wishlist } = {}) => {
    const { data: customer } = useCustomer()
-    const { revalidate } = useWishlist(opts)
-    const fn = useWishlistRemoveItem<any | null, RemoveItemBody>(
-      defaultOpts,
-      customFetcher
-    )
+    const { revalidate } = useWishlist(wishlist)

    return useCallback(
-      async function removeItem(input: RemoveItemInput) {
+      async function removeItem(input) {
        if (!customer) {
          // A signed customer is required in order to have a wishlist
          throw new CommerceError({
@ -45,17 +34,11 @@ export function extendHook(customFetcher: typeof fetcher) {
          })
        }

-        const data = await fn({ itemId: String(input.id) })
+        const data = await fetch({ input: { itemId: String(input.id) } })
        await revalidate()
        return data
      },
-      [fn, revalidate, customer]
+      [fetch, revalidate, customer]
    )
-  }
-
-  useRemoveItem.extend = extendHook
-
-  return useRemoveItem
+  },
 }
-
-export default extendHook(fetcher)
--- a/framework/bigcommerce/wishlist/use-wishlist-actions.tsx
+++ b/framework/bigcommerce/wishlist/use-wishlist-actions.tsx
@ -1,11 +0,0 @@
-import useAddItem from './use-add-item'
-import useRemoveItem from './use-remove-item'
-
-// This hook is probably not going to be used, but it's here
-// to show how a commerce should be structuring it
-export default function useWishlistActions() {
-  const addItem = useAddItem()
-  const removeItem = useRemoveItem()
-
-  return { addItem, removeItem }
-}
--- a/framework/bigcommerce/wishlist/use-wishlist.tsx
+++ b/framework/bigcommerce/wishlist/use-wishlist.tsx
@ -1,23 +1,24 @@
 import { useMemo } from 'react'
-import { HookHandler } from '@commerce/utils/types'
+import { SWRHook } from '@commerce/utils/types'
 import useWishlist, { UseWishlist } from '@commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
-import type { BigcommerceProvider } from '..'

-export default useWishlist as UseWishlist<BigcommerceProvider>
+export type UseWishlistInput = { includeProducts?: boolean }

-export const handler: HookHandler<
+export default useWishlist as UseWishlist<typeof handler>
+
+export const handler: SWRHook<
  Wishlist | null,
-  { includeProducts?: boolean },
-  { customerId?: number; includeProducts: boolean },
+  UseWishlistInput,
+  { customerId?: number } & UseWishlistInput,
  { isEmpty?: boolean }
 > = {
  fetchOptions: {
    url: '/api/bigcommerce/wishlist',
    method: 'GET',
  },
-  fetcher({ input: { customerId, includeProducts }, options, fetch }) {
+  async fetcher({ input: { customerId, includeProducts }, options, fetch }) {
    if (!customerId) return null

    // Use a dummy base as we only care about the relative path
@ -30,16 +31,16 @@ export const handler: HookHandler<
      method: options.method,
    })
  },
-  useHook({ input, useData }) {
+  useHook: ({ useData }) => (input) => {
    const { data: customer } = useCustomer()
    const response = useData({
      input: [
-        ['customerId', (customer as any)?.id],
-        ['includeProducts', input.includeProducts],
+        ['customerId', customer?.entityId],
+        ['includeProducts', input?.includeProducts],
      ],
      swrOptions: {
        revalidateOnFocus: false,
-        ...input.swrOptions,
+        ...input?.swrOptions,
      },
    })

--- a/framework/commerce/README.md
+++ b/framework/commerce/README.md
@ -0,0 +1,334 @@
+# Commerce Framework
+
+- [Commerce Framework](#commerce-framework)
+  - [Commerce Hooks](#commerce-hooks)
+    - [CommerceProvider](#commerceprovider)
+  - [Authentication Hooks](#authentication-hooks)
+    - [useSignup](#usesignup)
+    - [useLogin](#uselogin)
+    - [useLogout](#uselogout)
+  - [Customer Hooks](#customer-hooks)
+    - [useCustomer](#usecustomer)
+  - [Product Hooks](#product-hooks)
+    - [usePrice](#useprice)
+    - [useSearch](#usesearch)
+  - [Cart Hooks](#cart-hooks)
+    - [useCart](#usecart)
+    - [useAddItem](#useadditem)
+    - [useUpdateItem](#useupdateitem)
+    - [useRemoveItem](#useremoveitem)
+  - [Wishlist Hooks](#wishlist-hooks)
+  - [Commerce API](#commerce-api)
+  - [More](#more)
+
+The commerce framework ships multiple hooks and a Node.js API, both using an underlying headless e-commerce platform, which we call commerce providers.
+
+The core features are:
+
+- Code splitted hooks for data fetching using [SWR](https://swr.vercel.app/), and to handle common user actions
+- A Node.js API for initial data population, static generation of content and for creating the API endpoints that connect to the hooks, if required.
+
+> 👩‍🔬 If you would like to contribute a new provider, check the docs for [Adding a new Commerce Provider](./new-provider.md).
+
+> 🚧 The core commerce framework is under active development, new features and updates will be continuously added over time. Breaking changes are expected while we finish the API.
+
+## Commerce Hooks
+
+A commerce hook is a [React hook](https://reactjs.org/docs/hooks-intro.html) that's connected to a commerce provider. They focus on user actions and data fetching of data that wasn't statically generated.
+
+Data fetching hooks use [SWR](https://swr.vercel.app/) underneath and you're welcome to use any of its [return values](https://swr.vercel.app/docs/options#return-values) and [options](https://swr.vercel.app/docs/options#options). For example, using the `useCustomer` hook:
+
+```jsx
+const { data, isLoading, error } = useCustomer({
+  swrOptions: {
+    revalidateOnFocus: true,
+  },
+})
+```
+
+### CommerceProvider
+
+This component adds the provider config and handlers to the context of your React tree for it's children. You can optionally pass the `locale` to it:
+
+```jsx
+import { CommerceProvider } from '@framework'
+
+const App = ({ locale = 'en-US', children }) => {
+  return <CommerceProvider locale={locale}>{children}</CommerceProvider>
+}
+```
+
+## Authentication Hooks
+
+### useSignup
+
+Returns a _signup_ function that can be used to sign up the current visitor:
+
+```jsx
+import useSignup from '@framework/auth/use-signup'
+
+const SignupView = () => {
+  const signup = useSignup()
+
+  const handleSignup = async () => {
+    await signup({
+      email,
+      firstName,
+      lastName,
+      password,
+    })
+  }
+
+  return <form onSubmit={handleSignup}>{children}</form>
+}
+```
+
+### useLogin
+
+Returns a _login_ function that can be used to sign in the current visitor into an existing customer:
+
+```jsx
+import useLogin from '@framework/auth/use-login'
+
+const LoginView = () => {
+  const login = useLogin()
+  const handleLogin = async () => {
+    await login({
+      email,
+      password,
+    })
+  }
+
+  return <form onSubmit={handleLogin}>{children}</form>
+}
+```
+
+### useLogout
+
+Returns a _logout_ function that signs out the current customer when called.
+
+```jsx
+import useLogout from '@framework/auth/use-logout'
+
+const LogoutButton = () => {
+  const logout = useLogout()
+  return (
+    <button type="button" onClick={() => logout()}>
+      Logout
+    </button>
+  )
+}
+```
+
+## Customer Hooks
+
+### useCustomer
+
+Fetches and returns the data of the signed in customer:
+
+```jsx
+import useCustomer from '@framework/customer/use-customer'
+
+const Profile = () => {
+  const { data, isLoading, error } = useCustomer()
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>{error.message}</p>
+  if (!data) return null
+
+  return <div>Hello, {data.firstName}</div>
+}
+```
+
+## Product Hooks
+
+### usePrice
+
+Helper hook to format price according to the commerce locale and currency code. It also handles discounts:
+
+```jsx
+import useCart from '@framework/cart/use-cart'
+import usePrice from '@framework/product/use-price'
+
+// ...
+const { data } = useCart()
+const { price, discount, basePrice } = usePrice(
+  data && {
+    amount: data.subtotalPrice,
+    currencyCode: data.currency.code,
+    // If `baseAmount` is used, a discount will be calculated
+    // baseAmount: number,
+  }
+)
+// ...
+```
+
+### useSearch
+
+Fetches and returns the products that match a set of filters:
+
+```jsx
+import useSearch from '@framework/product/use-search'
+
+const SearchPage = ({ searchString, category, brand, sortStr }) => {
+  const { data } = useSearch({
+    search: searchString || '',
+    categoryId: category?.entityId,
+    brandId: brand?.entityId,
+    sort: sortStr,
+  })
+
+  return (
+    <Grid layout="normal">
+      {data.products.map((product) => (
+        <ProductCard key={product.path} product={product} />
+      ))}
+    </Grid>
+  )
+}
+```
+
+## Cart Hooks
+
+### useCart
+
+Fetches and returns the data of the current cart:
+
+```jsx
+import useCart from '@framework/cart/use-cart'
+
+const CartTotal = () => {
+  const { data, isLoading, isEmpty, error } = useCart()
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>{error.message}</p>
+  if (isEmpty) return <p>The cart is empty</p>
+
+  return <p>The cart total is {data.totalPrice}</p>
+}
+```
+
+### useAddItem
+
+Returns a function that adds a new item to the cart when called, if this is the first item it will create the cart:
+
+```jsx
+import { useAddItem } from '@framework/cart'
+
+const AddToCartButton = ({ productId, variantId }) => {
+  const addItem = useAddItem()
+
+  const addToCart = async () => {
+    await addItem({
+      productId,
+      variantId,
+    })
+  }
+
+  return <button onClick={addToCart}>Add To Cart</button>
+}
+```
+
+### useUpdateItem
+
+Returns a function that updates a current item in the cart when called, usually the quantity.
+
+```jsx
+import { useUpdateItem } from '@framework/cart'
+
+const CartItemQuantity = ({ item }) => {
+  const [quantity, setQuantity] = useState(item.quantity)
+  const updateItem = useUpdateItem({ item })
+
+  const updateQuantity = async (e) => {
+    const val = e.target.value
+
+    setQuantity(val)
+    await updateItem({ quantity: val })
+  }
+
+  return (
+    <input
+      type="number"
+      max={99}
+      min={0}
+      value={quantity}
+      onChange={updateQuantity}
+    />
+  )
+}
+```
+
+If the `quantity` is lower than 1 the item will be removed from the cart.
+
+### useRemoveItem
+
+Returns a function that removes an item in the cart when called:
+
+```jsx
+import { useRemoveItem } from '@framework/cart'
+
+const RemoveButton = ({ item }) => {
+  const removeItem = useRemoveItem()
+  const handleRemove = async () => {
+    await removeItem(item)
+  }
+
+  return <button onClick={handleRemove}>Remove</button>
+}
+```
+
+## Wishlist Hooks
+
+Wishlist hooks work just like [cart hooks](#cart-hooks). Feel free to check how those work first.
+
+The example below shows how to use the `useWishlist`, `useAddItem` and `useRemoveItem` hooks:
+
+```jsx
+import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'
+
+const WishlistButton = ({ productId, variant }) => {
+  const addItem = useAddItem()
+  const removeItem = useRemoveItem()
+  const { data, isLoading, isEmpty, error } = useWishlist()
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>{error.message}</p>
+  if (isEmpty) return <p>The wihslist is empty</p>
+
+  const { data: customer } = useCustomer()
+  const itemInWishlist = data?.items?.find(
+    (item) => item.product_id === productId && item.variant_id === variant.id
+  )
+
+  const handleWishlistChange = async (e) => {
+    e.preventDefault()
+    if (!customer) return
+
+    if (itemInWishlist) {
+      await removeItem({ id: itemInWishlist.id })
+    } else {
+      await addItem({
+        productId,
+        variantId: variant.id,
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleWishlistChange}>
+      <Heart fill={itemInWishlist ? 'var(--pink)' : 'none'} />
+    </button>
+  )
+}
+```
+
+## Commerce API
+
+While commerce hooks focus on client side data fetching and interactions, the commerce API focuses on static content generation for pages and API endpoints in a Node.js context.
+
+> The commerce API is currently going through a refactor in https://github.com/vercel/commerce/pull/252 - We'll update the docs once the API is released.
+
+## More
+
+Feel free to read through the source for more usage, and check the commerce vercel demo and commerce repo for usage examples: ([demo.vercel.store](https://demo.vercel.store/)) ([repo](https://github.com/vercel/commerce))
--- a/framework/commerce/api/index.ts
+++ b/framework/commerce/api/index.ts
@ -2,6 +2,7 @@ import type { RequestInit, Response } from '@vercel/fetch'

 export interface CommerceAPIConfig {
  locale?: string
+  locales?: string[]
  commerceUrl: string
  apiToken: string
  cartCookie: string
--- a/framework/commerce/auth/use-login.tsx
+++ b/framework/commerce/auth/use-login.tsx
@ -0,0 +1,19 @@
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { MutationHook, HookFetcherFn } from '../utils/types'
+import type { Provider } from '..'
+
+export type UseLogin<
+  H extends MutationHook<any, any, any> = MutationHook<null, {}, {}>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<null, {}> = mutationFetcher
+
+const fn = (provider: Provider) => provider.auth?.useLogin!
+
+const useLogin: UseLogin = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useLogin
--- a/framework/commerce/auth/use-logout.tsx
+++ b/framework/commerce/auth/use-logout.tsx
@ -0,0 +1,19 @@
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Provider } from '..'
+
+export type UseLogout<
+  H extends MutationHook<any, any, any> = MutationHook<null>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<null> = mutationFetcher
+
+const fn = (provider: Provider) => provider.auth?.useLogout!
+
+const useLogout: UseLogout = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useLogout
--- a/framework/commerce/auth/use-signup.tsx
+++ b/framework/commerce/auth/use-signup.tsx
@ -0,0 +1,19 @@
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Provider } from '..'
+
+export type UseSignup<
+  H extends MutationHook<any, any, any> = MutationHook<null>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<null> = mutationFetcher
+
+const fn = (provider: Provider) => provider.auth?.useSignup!
+
+const useSignup: UseSignup = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useSignup
--- a/framework/commerce/cart/use-add-item.tsx
+++ b/framework/commerce/cart/use-add-item.tsx
@ -1,69 +1,23 @@
-import { useCallback } from 'react'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
 import type { Cart, CartItemBody, AddCartItemBody } from '../types'
-import { Provider, useCommerce } from '..'
-import { BigcommerceProvider } from '@framework'
+import type { Provider } from '..'

-export type UseAddItemHandler<P extends Provider> = Prop<
-  Prop<P, 'cart'>,
-  'useAddItem'
->
-
-// Input expected by the action returned by the `useAddItem` hook
-export type UseAddItemInput<P extends Provider> = UseHookInput<
-  UseAddItemHandler<P>
->
-
-export type UseAddItemResult<P extends Provider> = ReturnType<
-  UseHookResponse<UseAddItemHandler<P>>
->
-
-export type UseAddItem<P extends Provider, Input> = Partial<
-  UseAddItemInput<P>
-> extends UseAddItemInput<P>
-  ? (input?: UseAddItemInput<P>) => (input: Input) => UseAddItemResult<P>
-  : (input: UseAddItemInput<P>) => (input: Input) => UseAddItemResult<P>
+export type UseAddItem<
+  H extends MutationHook<any, any, any> = MutationHook<Cart, {}, CartItemBody>
+> = ReturnType<H['useHook']>

 export const fetcher: HookFetcherFn<
  Cart,
  AddCartItemBody<CartItemBody>
-> = async ({ options, input, fetch }) => {
-  return fetch({ ...options, body: input })
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
 }

-type X = UseAddItemResult<BigcommerceProvider>
-
-export default function useAddItem<P extends Provider, Input>(
-  input: UseAddItemInput<P>
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.cart?.useAddItem
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? (() => () => {})
-  const fetchFn = provider.fetcher ?? fetcherRef.current
-  const action = useHook({ input })
-
-  return useCallback(
-    function addItem(input: Input) {
-      return action({
-        input,
-        fetch({ input }) {
-          return fetcherFn({
-            input,
-            options: opts!.fetchOptions,
-            fetch: fetchFn,
-          })
-        },
-      })
-    },
-    [input, fetchFn, opts?.fetchOptions]
-  )
-}
+export default useAddItem
--- a/framework/commerce/cart/use-cart-actions.tsx
+++ b/framework/commerce/cart/use-cart-actions.tsx
@ -1,17 +0,0 @@
-import type { HookFetcher, HookFetcherOptions } from '../utils/types'
-import useAddItem from './use-add-item'
-import useRemoveItem from './use-remove-item'
-import useUpdateItem from './use-update-item'
-
-// This hook is probably not going to be used, but it's here
-// to show how a commerce should be structuring it
-export default function useCartActions<T, Input>(
-  options: HookFetcherOptions,
-  fetcher: HookFetcher<T, Input>
-) {
-  const addItem = useAddItem<T, Input>(options, fetcher)
-  const updateItem = useUpdateItem<T, Input>(options, fetcher)
-  const removeItem = useRemoveItem<T, Input>(options, fetcher)
-
-  return { addItem, updateItem, removeItem }
-}
--- a/framework/commerce/cart/use-cart.tsx
+++ b/framework/commerce/cart/use-cart.tsx
@ -1,34 +1,21 @@
 import Cookies from 'js-cookie'
+import { useHook, useSWRHook } from '../utils/use-hook'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { Cart } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import useData from '../utils/use-data'
 import { Provider, useCommerce } from '..'

 export type FetchCartInput = {
  cartId?: Cart['id']
 }

-export type UseCartHandler<P extends Provider> = Prop<
-  Prop<P, 'cart'>,
-  'useCart'
->
-
-export type UseCartInput<P extends Provider> = UseHookInput<UseCartHandler<P>>
-
-export type CartResponse<P extends Provider> = UseHookResponse<
-  UseCartHandler<P>
->
-
-export type UseCart<P extends Provider> = Partial<
-  UseCartInput<P>
-> extends UseCartInput<P>
-  ? (input?: UseCartInput<P>) => CartResponse<P>
-  : (input: UseCartInput<P>) => CartResponse<P>
+export type UseCart<
+  H extends SWRHook<any, any, any> = SWRHook<
+    Cart | null,
+    {},
+    FetchCartInput,
+    { isEmpty?: boolean }
+  >
+> = ReturnType<H['useHook']>

 export const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
  options,
@ -38,32 +25,17 @@ export const fetcher: HookFetcherFn<Cart | null, FetchCartInput> = async ({
  return cartId ? await fetch({ ...options }) : null
 }

-export default function useCart<P extends Provider>(
-  input: UseCartInput<P> = {}
-) {
-  const { providerRef, fetcherRef, cartCookie } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.cart?.useCart
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
+const fn = (provider: Provider) => provider.cart?.useCart!

+const useCart: UseCart = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
  const wrapper: typeof fetcher = (context) => {
    context.input.cartId = Cookies.get(cartCookie)
    return fetcherFn(context)
  }
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: wrapper },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
 }
+
+export default useCart
--- a/framework/commerce/cart/use-remove-item.tsx
+++ b/framework/commerce/cart/use-remove-item.tsx
@ -1,10 +1,35 @@
-import useAction from '../utils/use-action'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Cart, LineItem, RemoveCartItemBody } from '../types'
+import type { Provider } from '..'

-// Input expected by the action returned by the `useRemoveItem` hook
-export interface RemoveItemInput {
+/**
+ * Input expected by the action returned by the `useRemoveItem` hook
+ */
+export type RemoveItemInput = {
  id: string
 }

-const useRemoveItem = useAction
+export type UseRemoveItem<
+  H extends MutationHook<any, any, any> = MutationHook<
+    Cart | null,
+    { item?: LineItem },
+    RemoveItemInput,
+    RemoveCartItemBody
+  >
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<
+  Cart | null,
+  RemoveCartItemBody
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}

 export default useRemoveItem
--- a/framework/commerce/cart/use-update-item.tsx
+++ b/framework/commerce/cart/use-update-item.tsx
@ -1,11 +1,38 @@
-import useAction from '../utils/use-action'
-import type { CartItemBody } from '../types'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Cart, CartItemBody, LineItem, UpdateCartItemBody } from '../types'
+import type { Provider } from '..'

-// Input expected by the action returned by the `useUpdateItem` hook
+/**
+ * Input expected by the action returned by the `useUpdateItem` hook
+ */
 export type UpdateItemInput<T extends CartItemBody> = T & {
  id: string
 }

-const useUpdateItem = useAction
+export type UseUpdateItem<
+  H extends MutationHook<any, any, any> = MutationHook<
+    Cart | null,
+    {
+      item?: LineItem
+      wait?: number
+    },
+    UpdateItemInput<CartItemBody>,
+    UpdateCartItemBody<CartItemBody>
+  >
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<
+  Cart | null,
+  UpdateCartItemBody<CartItemBody>
+> = mutationFetcher
+
+const fn = (provider: Provider) => provider.cart?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}

 export default useUpdateItem
--- a/framework/commerce/config.js
+++ b/framework/commerce/config.js
@ -0,0 +1,68 @@
+/**
+ * This file is expected to be used in next.config.js only
+ */
+
+const path = require('path')
+const fs = require('fs')
+const merge = require('deepmerge')
+const prettier = require('prettier')
+
+const PROVIDERS = ['bigcommerce', 'shopify', 'swell', 'vendure']
+
+function getProviderName() {
+  return (
+    process.env.COMMERCE_PROVIDER ||
+    (process.env.BIGCOMMERCE_STOREFRONT_API_URL
+      ? 'bigcommerce'
+      : process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+      ? 'shopify'
+      : process.env.NEXT_PUBLIC_SWELL_STORE_ID
+      ? 'swell'
+      : null)
+  )
+}
+
+function withCommerceConfig(nextConfig = {}) {
+  const commerce = nextConfig.commerce || {}
+  const name = commerce.provider || getProviderName()
+
+  if (!name) {
+    throw new Error(
+      `The commerce provider is missing, please add a valid provider name or its environment variables`
+    )
+  }
+  if (!PROVIDERS.includes(name)) {
+    throw new Error(
+      `The commerce provider "${name}" can't be found, please use one of "${PROVIDERS.join(
+        ', '
+      )}"`
+    )
+  }
+
+  const commerceNextConfig = require(path.join('../', name, 'next.config'))
+  const config = merge(commerceNextConfig, nextConfig)
+
+  config.env = config.env || {}
+
+  Object.entries(config.commerce.features).forEach(([k, v]) => {
+    if (v) config.env[`COMMERCE_${k.toUpperCase()}_ENABLED`] = true
+  })
+
+  // Update paths in `tsconfig.json` to point to the selected provider
+  if (config.commerce.updateTSConfig !== false) {
+    const tsconfigPath = path.join(process.cwd(), 'tsconfig.json')
+    const tsconfig = require(tsconfigPath)
+
+    tsconfig.compilerOptions.paths['@framework'] = [`framework/${name}`]
+    tsconfig.compilerOptions.paths['@framework/*'] = [`framework/${name}/*`]
+
+    fs.writeFileSync(
+      tsconfigPath,
+      prettier.format(JSON.stringify(tsconfig), { parser: 'json' })
+    )
+  }
+
+  return config
+}
+
+module.exports = { withCommerceConfig, getProviderName }
--- a/framework/commerce/customer/use-customer.tsx
+++ b/framework/commerce/customer/use-customer.tsx
@ -1,56 +1,20 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { Customer } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import { Provider } from '..'

-export type UseCustomerHandler<P extends Provider> = Prop<
-  Prop<P, 'customer'>,
-  'useCustomer'
->
+export type UseCustomer<
+  H extends SWRHook<any, any, any> = SWRHook<Customer | null>
+> = ReturnType<H['useHook']>

-export type UseCustomerInput<P extends Provider> = UseHookInput<
-  UseCustomerHandler<P>
->
+export const fetcher: HookFetcherFn<Customer | null, any> = SWRFetcher

-export type CustomerResponse<P extends Provider> = UseHookResponse<
-  UseCustomerHandler<P>
->
+const fn = (provider: Provider) => provider.customer?.useCustomer!

-export type UseCustomer<P extends Provider> = Partial<
-  UseCustomerInput<P>
-> extends UseCustomerInput<P>
-  ? (input?: UseCustomerInput<P>) => CustomerResponse<P>
-  : (input: UseCustomerInput<P>) => CustomerResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<Customer | null>
-
-export default function useCustomer<P extends Provider>(
-  input: UseCustomerInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.customer?.useCustomer
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useCustomer: UseCustomer = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useCustomer
--- a/framework/commerce/index.tsx
+++ b/framework/commerce/index.tsx
@ -6,7 +6,7 @@ import {
  useMemo,
  useRef,
 } from 'react'
-import { Fetcher, HookHandler, MutationHandler } from './utils/types'
+import { Fetcher, SWRHook, MutationHook } from './utils/types'
 import type { FetchCartInput } from './cart/use-cart'
 import type { Cart, Wishlist, Customer, SearchProductsData } from './types'

@ -15,17 +15,26 @@ const Commerce = createContext<CommerceContextValue<any> | {}>({})
 export type Provider = CommerceConfig & {
  fetcher: Fetcher
  cart?: {
-    useCart?: HookHandler<Cart | null, any, FetchCartInput>
-    useAddItem?: MutationHandler<Cart, any, any>
+    useCart?: SWRHook<Cart | null, any, FetchCartInput>
+    useAddItem?: MutationHook<any, any, any>
+    useUpdateItem?: MutationHook<any, any, any>
+    useRemoveItem?: MutationHook<any, any, any>
  }
  wishlist?: {
-    useWishlist?: HookHandler<Wishlist | null, any, any>
+    useWishlist?: SWRHook<Wishlist | null, any, any>
+    useAddItem?: MutationHook<any, any, any>
+    useRemoveItem?: MutationHook<any, any, any>
  }
-  customer: {
-    useCustomer?: HookHandler<Customer | null, any, any>
+  customer?: {
+    useCustomer?: SWRHook<Customer | null, any, any>
  }
-  products: {
-    useSearch?: HookHandler<SearchProductsData, any, any>
+  products?: {
+    useSearch?: SWRHook<SearchProductsData, any, any>
+  }
+  auth?: {
+    useSignup?: MutationHook<any, any, any>
+    useLogin?: MutationHook<any, any, any>
+    useLogout?: MutationHook<any, any, any>
  }
 }

--- a/framework/commerce/new-provider.md
+++ b/framework/commerce/new-provider.md
@ -0,0 +1,239 @@
+# Adding a new Commerce Provider
+
+A commerce provider is a headless e-commerce platform that integrates with the [Commerce Framework](./README.md). Right now we have the following providers:
+
+- BigCommerce ([framework/bigcommerce](../bigcommerce))
+- Shopify ([framework/shopify](../shopify))
+
+Adding a commerce provider means adding a new folder in `framework` with a folder structure like the next one:
+
+- `api`
+  - index.ts
+- `product`
+  - usePrice
+  - useSearch
+  - getProduct
+  - getAllProducts
+- `wishlist`
+  - useWishlist
+  - useAddItem
+  - useRemoveItem
+- `auth`
+  - useLogin
+  - useLogout
+  - useSignup
+- `customer`
+  - useCustomer
+  - getCustomerId
+  - getCustomerWistlist
+- `cart`
+  - useCart
+  - useAddItem
+  - useRemoveItem
+  - useUpdateItem
+- `env.template`
+- `index.ts`
+- `provider.ts`
+- `commerce.config.json`
+- `next.config.js`
+- `README.md`
+
+`provider.ts` exports a provider object with handlers for the [Commerce Hooks](./README.md#commerce-hooks) and `api/index.ts` exports a Node.js provider for the [Commerce API](./README.md#commerce-api)
+
+> **Important:** We use TypeScript for every provider and expect its usage for every new one.
+
+The app imports from the provider directly instead of the core commerce folder (`framework/commerce`), but all providers are interchangeable and to achieve it every provider always has to implement the core types and helpers.
+
+The provider folder should only depend on `framework/commerce` and dependencies in the main `package.json`. In the future we'll move the `framework` folder to a package that can be shared easily for multiple apps.
+
+## Adding the provider hooks
+
+Using BigCommerce as an example. The first thing to do is export a `CommerceProvider` component that includes a `provider` object with all the handlers that can be used for hooks:
+
+```tsx
+import type { ReactNode } from 'react'
+import {
+  CommerceConfig,
+  CommerceProvider as CoreCommerceProvider,
+  useCommerce as useCoreCommerce,
+} from '@commerce'
+import { bigcommerceProvider, BigcommerceProvider } from './provider'
+
+export { bigcommerceProvider }
+export type { BigcommerceProvider }
+
+export const bigcommerceConfig: CommerceConfig = {
+  locale: 'en-us',
+  cartCookie: 'bc_cartId',
+}
+
+export type BigcommerceConfig = Partial<CommerceConfig>
+
+export type BigcommerceProps = {
+  children?: ReactNode
+  locale: string
+} & BigcommerceConfig
+
+export function CommerceProvider({ children, ...config }: BigcommerceProps) {
+  return (
+    <CoreCommerceProvider
+      provider={bigcommerceProvider}
+      config={{ ...bigcommerceConfig, ...config }}
+    >
+      {children}
+    </CoreCommerceProvider>
+  )
+}
+
+export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()
+```
+
+The exported types and components extend from the core ones exported by `@commerce`, which refers to `framework/commerce`.
+
+The `bigcommerceProvider` object looks like this:
+
+```tsx
+import { handler as useCart } from './cart/use-cart'
+import { handler as useAddItem } from './cart/use-add-item'
+import { handler as useUpdateItem } from './cart/use-update-item'
+import { handler as useRemoveItem } from './cart/use-remove-item'
+
+import { handler as useWishlist } from './wishlist/use-wishlist'
+import { handler as useWishlistAddItem } from './wishlist/use-add-item'
+import { handler as useWishlistRemoveItem } from './wishlist/use-remove-item'
+
+import { handler as useCustomer } from './customer/use-customer'
+import { handler as useSearch } from './product/use-search'
+
+import { handler as useLogin } from './auth/use-login'
+import { handler as useLogout } from './auth/use-logout'
+import { handler as useSignup } from './auth/use-signup'
+
+import fetcher from './fetcher'
+
+export const bigcommerceProvider = {
+  locale: 'en-us',
+  cartCookie: 'bc_cartId',
+  fetcher,
+  cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
+  wishlist: {
+    useWishlist,
+    useAddItem: useWishlistAddItem,
+    useRemoveItem: useWishlistRemoveItem,
+  },
+  customer: { useCustomer },
+  products: { useSearch },
+  auth: { useLogin, useLogout, useSignup },
+}
+
+export type BigcommerceProvider = typeof bigcommerceProvider
+```
+
+The provider object, in this case `bigcommerceProvider`, has to match the `Provider` type defined in [framework/commerce](./index.ts).
+
+A hook handler, like `useCart`, looks like this:
+
+```tsx
+import { useMemo } from 'react'
+import { SWRHook } from '@commerce/utils/types'
+import useCart, { UseCart, FetchCartInput } from '@commerce/cart/use-cart'
+import { normalizeCart } from '../lib/normalize'
+import type { Cart } from '../types'
+
+export default useCart as UseCart<typeof handler>
+
+export const handler: SWRHook<
+  Cart | null,
+  {},
+  FetchCartInput,
+  { isEmpty?: boolean }
+> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/cart',
+    method: 'GET',
+  },
+  async fetcher({ input: { cartId }, options, fetch }) {
+    const data = cartId ? await fetch(options) : null
+    return data && normalizeCart(data)
+  },
+  useHook: ({ useData }) => (input) => {
+    const response = useData({
+      swrOptions: { revalidateOnFocus: false, ...input?.swrOptions },
+    })
+
+    return useMemo(
+      () =>
+        Object.create(response, {
+          isEmpty: {
+            get() {
+              return (response.data?.lineItems.length ?? 0) <= 0
+            },
+            enumerable: true,
+          },
+        }),
+      [response]
+    )
+  },
+}
+```
+
+In the case of data fetching hooks like `useCart` each handler has to implement the `SWRHook` type that's defined in the core types. For mutations it's the `MutationHook`, e.g for `useAddItem`:
+
+```tsx
+import { useCallback } from 'react'
+import type { MutationHook } from '@commerce/utils/types'
+import { CommerceError } from '@commerce/utils/errors'
+import useAddItem, { UseAddItem } from '@commerce/cart/use-add-item'
+import { normalizeCart } from '../lib/normalize'
+import type {
+  Cart,
+  BigcommerceCart,
+  CartItemBody,
+  AddCartItemBody,
+} from '../types'
+import useCart from './use-cart'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<Cart, {}, CartItemBody> = {
+  fetchOptions: {
+    url: '/api/bigcommerce/cart',
+    method: 'POST',
+  },
+  async fetcher({ input: item, options, fetch }) {
+    if (
+      item.quantity &&
+      (!Number.isInteger(item.quantity) || item.quantity! < 1)
+    ) {
+      throw new CommerceError({
+        message: 'The item quantity has to be a valid integer greater than 0',
+      })
+    }
+
+    const data = await fetch<BigcommerceCart, AddCartItemBody>({
+      ...options,
+      body: { item },
+    })
+
+    return normalizeCart(data)
+  },
+  useHook: ({ fetch }) => () => {
+    const { mutate } = useCart()
+
+    return useCallback(
+      async function addItem(input) {
+        const data = await fetch({ input })
+        await mutate(data, false)
+        return data
+      },
+      [fetch, mutate]
+    )
+  },
+}
+```
+
+## Adding the Node.js provider API
+
+TODO
+
+> The commerce API is currently going through a refactor in https://github.com/vercel/commerce/pull/252 - We'll update the docs once the API is released.
--- a/framework/commerce/product/use-price.tsx
+++ b/framework/commerce/product/use-price.tsx
@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useCommerce } from '.'
+import { useCommerce } from '..'

 export function formatPrice({
  amount,
--- a/framework/commerce/product/use-search.tsx
+++ b/framework/commerce/product/use-search.tsx
@ -1,57 +1,20 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { SearchProductsData } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
-import { BigcommerceProvider } from '@framework'
+import { Provider } from '..'

-export type UseSearchHandler<P extends Provider> = Prop<
-  Prop<P, 'products'>,
-  'useSearch'
->
+export type UseSearch<
+  H extends SWRHook<any, any, any> = SWRHook<SearchProductsData>
+> = ReturnType<H['useHook']>

-export type UseSeachInput<P extends Provider> = UseHookInput<
-  UseSearchHandler<P>
->
+export const fetcher: HookFetcherFn<SearchProductsData, any> = SWRFetcher

-export type SearchResponse<P extends Provider> = UseHookResponse<
-  UseSearchHandler<P>
->
+const fn = (provider: Provider) => provider.products?.useSearch!

-export type UseSearch<P extends Provider> = Partial<
-  UseSeachInput<P>
-> extends UseSeachInput<P>
-  ? (input?: UseSeachInput<P>) => SearchResponse<P>
-  : (input: UseSeachInput<P>) => SearchResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<SearchProductsData>
-
-export default function useSearch<P extends Provider>(
-  input: UseSeachInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.products?.useSearch
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useSearch: UseSearch = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useSearch
--- a/framework/commerce/types.ts
+++ b/framework/commerce/types.ts
@ -1,10 +1,6 @@
-import type { Wishlist as BCWishlist } from '@framework/api/wishlist'
-import type { Customer as BCCustomer } from '@framework/api/customers'
-import type { SearchProductsData as BCSearchProductsData } from '@framework/api/catalog/products'
-
-export type CommerceProviderConfig = {
-  features: Record<string, boolean>
-}
+import type { Wishlist as BCWishlist } from '../bigcommerce/api/wishlist'
+import type { Customer as BCCustomer } from '../bigcommerce/api/customers'
+import type { SearchProductsData as BCSearchProductsData } from '../bigcommerce/api/catalog/products'

 export type Discount = {
  // The value of the discount, can be an amount or percentage
@ -167,6 +163,7 @@ interface Entity {
 export interface Product extends Entity {
  name: string
  description: string
+  descriptionHtml?: string
  slug?: string
  path?: string
  images: ProductImage[]
--- a/framework/commerce/use-login.tsx
+++ b/framework/commerce/use-login.tsx
@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useLogin = useAction
-
-export default useLogin
--- a/framework/commerce/use-logout.tsx
+++ b/framework/commerce/use-logout.tsx
@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useLogout = useAction
-
-export default useLogout
--- a/framework/commerce/use-signup.tsx
+++ b/framework/commerce/use-signup.tsx
@ -1,5 +0,0 @@
-import useAction from './utils/use-action'
-
-const useSignup = useAction
-
-export default useSignup
--- a/framework/commerce/utils/default-fetcher.ts
+++ b/framework/commerce/utils/default-fetcher.ts
@ -1,6 +1,12 @@
 import type { HookFetcherFn } from './types'

-const defaultFetcher: HookFetcherFn<any> = ({ options, fetch }) =>
+export const SWRFetcher: HookFetcherFn<any, any> = ({ options, fetch }) =>
  fetch(options)

-export default defaultFetcher
+export const mutationFetcher: HookFetcherFn<any, any> = ({
+  input,
+  options,
+  fetch,
+}) => fetch({ ...options, body: input })
+
+export default SWRFetcher
--- a/framework/commerce/utils/features.ts
+++ b/framework/commerce/utils/features.ts
@ -1,37 +0,0 @@
-import commerceProviderConfig from '@framework/config.json'
-import type { CommerceProviderConfig } from '../types'
-import memo from 'lodash.memoize'
-
-type FeaturesAPI = {
-  isEnabled: (desideredFeature: string) => boolean
-}
-
-function isFeatureEnabled(config: CommerceProviderConfig) {
-  const features = config.features
-  return (desideredFeature: string) =>
-    Object.keys(features)
-      .filter((k) => features[k])
-      .includes(desideredFeature)
-}
-
-function boostrap(): FeaturesAPI {
-  const basis = {
-    isEnabled: () => false,
-  }
-
-  if (!commerceProviderConfig) {
-    console.log('No config.json found - Please add a config.json')
-    return basis
-  }
-
-  if (commerceProviderConfig.features) {
-    return {
-      ...basis,
-      isEnabled: memo(isFeatureEnabled(commerceProviderConfig)),
-    }
-  }
-
-  return basis
-}
-
-export default boostrap()
--- a/framework/commerce/utils/types.ts
+++ b/framework/commerce/utils/types.ts
@ -2,13 +2,18 @@ import type { ConfigInterface } from 'swr'
 import type { CommerceError } from './errors'
 import type { ResponseState } from './use-data'

+/**
+ * Returns the properties in T with the properties in type K, overriding properties defined in T
+ */
 export type Override<T, K> = Omit<T, keyof K> & K

 /**
 * Returns the properties in T with the properties in type K changed from optional to required
 */
 export type PickRequired<T, K extends keyof T> = Omit<T, K> &
-  Required<Pick<T, K>>
+  {
+    [P in K]-?: NonNullable<T[P]>
+  }

 /**
 * Core fetcher added by CommerceProvider
@ -31,16 +36,15 @@ export type HookFetcher<Data, Input = null, Result = any> = (
  fetch: <T = Result, Body = any>(options: FetcherOptions<Body>) => Promise<T>
 ) => Data | Promise<Data>

-export type HookFetcherFn<
-  Data,
-  Input = never,
-  Result = any,
-  Body = any
-> = (context: {
+export type HookFetcherFn<Data, Input = undefined, Result = any, Body = any> = (
+  context: HookFetcherContext<Input, Result, Body>
+) => Data | Promise<Data>
+
+export type HookFetcherContext<Input = undefined, Result = any, Body = any> = {
  options: HookFetcherOptions
  input: Input
  fetch: <T = Result, B = Body>(options: FetcherOptions<B>) => Promise<T>
-}) => Data | Promise<Data>
+}

 export type HookFetcherOptions = { method?: string } & (
  | { query: string; url?: string }
@ -49,13 +53,20 @@ export type HookFetcherOptions = { method?: string } & (

 export type HookInputValue = string | number | boolean | undefined

-export type HookSwrInput = [string, HookInputValue][]
+export type HookSWRInput = [string, HookInputValue][]

 export type HookFetchInput = { [k: string]: HookInputValue }

-export type HookInput = {}
+export type HookFunction<
+  Input extends { [k: string]: unknown } | null,
+  T
+> = keyof Input extends never
+  ? () => T
+  : Partial<Input> extends Input
+  ? (input?: Input) => T
+  : (input: Input) => T

-export type HookHandler<
+export type SWRHook<
  // Data obj returned by the hook and fetch operation
  Data,
  // Input expected by the hook
@ -65,58 +76,56 @@ export type HookHandler<
  // Custom state added to the response object of SWR
  State = {}
 > = {
-  useHook?(context: {
-    input: Input & { swrOptions?: SwrOptions<Data, FetchInput> }
-    useData(context?: {
-      input?: HookFetchInput | HookSwrInput
-      swrOptions?: SwrOptions<Data, FetchInput>
-    }): ResponseState<Data>
-  }): ResponseState<Data> & State
+  useHook(
+    context: SWRHookContext<Data, FetchInput>
+  ): HookFunction<
+    Input & { swrOptions?: SwrOptions<Data, FetchInput> },
+    ResponseState<Data> & State
+  >
  fetchOptions: HookFetcherOptions
  fetcher?: HookFetcherFn<Data, FetchInput>
 }

-export type MutationHandler<
+export type SWRHookContext<
+  Data,
+  FetchInput extends { [k: string]: unknown } = {}
+> = {
+  useData(context?: {
+    input?: HookFetchInput | HookSWRInput
+    swrOptions?: SwrOptions<Data, FetchInput>
+  }): ResponseState<Data>
+}
+
+export type MutationHook<
  // Data obj returned by the hook and fetch operation
  Data,
  // Input expected by the hook
  Input extends { [k: string]: unknown } = {},
+  // Input expected by the action returned by the hook
+  ActionInput extends { [k: string]: unknown } = {},
  // Input expected before doing a fetch operation
-  FetchInput extends { [k: string]: unknown } = {}
+  FetchInput extends { [k: string]: unknown } = ActionInput
 > = {
-  useHook?(context: {
-    input: Input
-  }): (context: {
-    input: FetchInput
-    fetch: (context: { input: FetchInput }) => Data | Promise<Data>
-  }) => Data | Promise<Data>
+  useHook(
+    context: MutationHookContext<Data, FetchInput>
+  ): HookFunction<Input, HookFunction<ActionInput, Data | Promise<Data>>>
  fetchOptions: HookFetcherOptions
  fetcher?: HookFetcherFn<Data, FetchInput>
 }

+export type MutationHookContext<
+  Data,
+  FetchInput extends { [k: string]: unknown } | null = {}
+> = {
+  fetch: keyof FetchInput extends never
+    ? () => Data | Promise<Data>
+    : Partial<FetchInput> extends FetchInput
+    ? (context?: { input?: FetchInput }) => Data | Promise<Data>
+    : (context: { input: FetchInput }) => Data | Promise<Data>
+}
+
 export type SwrOptions<Data, Input = null, Result = any> = ConfigInterface<
  Data,
  CommerceError,
  HookFetcher<Data, Input, Result>
 >
-
-/**
- * Returns the property K from type T excluding nullables
- */
-export type Prop<T, K extends keyof T> = NonNullable<T[K]>
-
-export type HookHandlerType =
-  | HookHandler<any, any, any>
-  | MutationHandler<any, any, any>
-
-export type UseHookParameters<H extends HookHandlerType> = Parameters<
-  Prop<H, 'useHook'>
->
-
-export type UseHookResponse<H extends HookHandlerType> = ReturnType<
-  Prop<H, 'useHook'>
->
-
-export type UseHookInput<
-  H extends HookHandlerType
-> = UseHookParameters<H>[0]['input']
--- a/framework/commerce/utils/use-action.tsx
+++ b/framework/commerce/utils/use-action.tsx
@ -1,15 +0,0 @@
-import { useCallback } from 'react'
-import type { HookFetcher, HookFetcherOptions } from './types'
-import { useCommerce } from '..'
-
-export default function useAction<T, Input = null>(
-  options: HookFetcherOptions,
-  fetcher: HookFetcher<T, Input>
-) {
-  const { fetcherRef } = useCommerce()
-
-  return useCallback(
-    (input: Input) => fetcher(options, input, fetcherRef.current),
-    [fetcher]
-  )
-}
--- a/framework/commerce/utils/use-data.tsx
+++ b/framework/commerce/utils/use-data.tsx
@ -1,11 +1,11 @@
 import useSWR, { responseInterface } from 'swr'
 import type {
-  HookHandler,
-  HookSwrInput,
+  HookSWRInput,
  HookFetchInput,
-  PickRequired,
  Fetcher,
  SwrOptions,
+  HookFetcherOptions,
+  HookFetcherFn,
 } from './types'
 import defineProperty from './define-property'
 import { CommerceError } from './errors'
@ -14,13 +14,12 @@ export type ResponseState<Result> = responseInterface<Result, CommerceError> & {
  isLoading: boolean
 }

-export type UseData = <
-  Data = any,
-  Input extends { [k: string]: unknown } = {},
-  FetchInput extends HookFetchInput = {}
->(
-  options: PickRequired<HookHandler<Data, Input, FetchInput>, 'fetcher'>,
-  input: HookFetchInput | HookSwrInput,
+export type UseData = <Data = any, FetchInput extends HookFetchInput = {}>(
+  options: {
+    fetchOptions: HookFetcherOptions
+    fetcher: HookFetcherFn<Data, FetchInput>
+  },
+  input: HookFetchInput | HookSWRInput,
  fetcherFn: Fetcher,
  swrOptions?: SwrOptions<Data, FetchInput>
 ) => ResponseState<Data>
--- a/framework/commerce/utils/use-hook.ts
+++ b/framework/commerce/utils/use-hook.ts
@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import { Provider, useCommerce } from '..'
+import type { MutationHook, PickRequired, SWRHook } from './types'
+import useData from './use-data'
+
+export function useFetcher() {
+  const { providerRef, fetcherRef } = useCommerce()
+  return providerRef.current.fetcher ?? fetcherRef.current
+}
+
+export function useHook<
+  P extends Provider,
+  H extends MutationHook<any, any, any> | SWRHook<any, any, any>
+>(fn: (provider: P) => H) {
+  const { providerRef } = useCommerce<P>()
+  const provider = providerRef.current
+  return fn(provider)
+}
+
+export function useSWRHook<H extends SWRHook<any, any, any>>(
+  hook: PickRequired<H, 'fetcher'>
+) {
+  const fetcher = useFetcher()
+
+  return hook.useHook({
+    useData(ctx) {
+      const response = useData(hook, ctx?.input ?? [], fetcher, ctx?.swrOptions)
+      return response
+    },
+  })
+}
+
+export function useMutationHook<H extends MutationHook<any, any, any>>(
+  hook: PickRequired<H, 'fetcher'>
+) {
+  const fetcher = useFetcher()
+
+  return hook.useHook({
+    fetch: useCallback(
+      ({ input } = {}) => {
+        return hook.fetcher({
+          input,
+          options: hook.fetchOptions,
+          fetch: fetcher,
+        })
+      },
+      [fetcher, hook.fetchOptions]
+    ),
+  })
+}
--- a/framework/commerce/utils/use-response.tsx
+++ b/framework/commerce/utils/use-response.tsx
@ -1,40 +0,0 @@
-import { useMemo } from 'react'
-import { responseInterface } from 'swr'
-import { CommerceError } from './errors'
-import { Override } from './types'
-
-export type UseResponseOptions<
-  D,
-  R extends responseInterface<any, CommerceError>
-> = {
-  descriptors?: PropertyDescriptorMap
-  normalizer?: (data: R['data']) => D
-}
-
-export type UseResponse = <D, R extends responseInterface<any, CommerceError>>(
-  response: R,
-  options: UseResponseOptions<D, R>
-) => D extends object ? Override<R, { data?: D }> : R
-
-const useResponse: UseResponse = (response, { descriptors, normalizer }) => {
-  const memoizedResponse = useMemo(
-    () =>
-      Object.create(response, {
-        ...descriptors,
-        ...(normalizer
-          ? {
-              data: {
-                get() {
-                  return response.data && normalizer(response.data)
-                },
-                enumerable: true,
-              },
-            }
-          : {}),
-      }),
-    [response]
-  )
-  return memoizedResponse
-}
-
-export default useResponse
--- a/framework/commerce/wishlist/use-add-item.tsx
+++ b/framework/commerce/wishlist/use-add-item.tsx
@ -1,12 +1,19 @@
-import useAction from '../utils/use-action'
-import type { CartItemBody } from '../types'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { MutationHook } from '../utils/types'
+import type { Provider } from '..'

-// Input expected by the action returned by the `useAddItem` hook
-// export interface AddItemInput {
-//   includeProducts?: boolean
-// }
-export type AddItemInput<T extends CartItemBody> = T
+export type UseAddItem<
+  H extends MutationHook<any, any, any> = MutationHook<any, {}, {}>
+> = ReturnType<H['useHook']>

-const useAddItem = useAction
+export const fetcher = mutationFetcher
+
+const fn = (provider: Provider) => provider.wishlist?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}

 export default useAddItem
--- a/framework/commerce/wishlist/use-remove-item.tsx
+++ b/framework/commerce/wishlist/use-remove-item.tsx
@ -1,5 +1,28 @@
-import useAction from '../utils/use-action'
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { Provider } from '..'

-const useRemoveItem = useAction
+export type RemoveItemInput = {
+  id: string | number
+}
+
+export type UseRemoveItem<
+  H extends MutationHook<any, any, any> = MutationHook<
+    any | null,
+    { wishlist?: any },
+    RemoveItemInput,
+    {}
+  >
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<any | null, {}> = mutationFetcher
+
+const fn = (provider: Provider) => provider.wishlist?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}

 export default useRemoveItem
--- a/framework/commerce/wishlist/use-wishlist.tsx
+++ b/framework/commerce/wishlist/use-wishlist.tsx
@ -1,56 +1,25 @@
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { SWRFetcher } from '../utils/default-fetcher'
+import type { HookFetcherFn, SWRHook } from '../utils/types'
 import type { Wishlist } from '../types'
-import type {
-  Prop,
-  HookFetcherFn,
-  UseHookInput,
-  UseHookResponse,
-} from '../utils/types'
-import defaultFetcher from '../utils/default-fetcher'
-import useData from '../utils/use-data'
-import { Provider, useCommerce } from '..'
+import type { Provider } from '..'

-export type UseWishlistHandler<P extends Provider> = Prop<
-  Prop<P, 'wishlist'>,
-  'useWishlist'
->
+export type UseWishlist<
+  H extends SWRHook<any, any, any> = SWRHook<
+    Wishlist | null,
+    { includeProducts?: boolean },
+    { customerId?: number; includeProducts: boolean },
+    { isEmpty?: boolean }
+  >
+> = ReturnType<H['useHook']>

-export type UseWishlistInput<P extends Provider> = UseHookInput<
-  UseWishlistHandler<P>
->
+export const fetcher: HookFetcherFn<Wishlist | null, any> = SWRFetcher

-export type WishlistResponse<P extends Provider> = UseHookResponse<
-  UseWishlistHandler<P>
->
+const fn = (provider: Provider) => provider.wishlist?.useWishlist!

-export type UseWishlist<P extends Provider> = Partial<
-  UseWishlistInput<P>
-> extends UseWishlistInput<P>
-  ? (input?: UseWishlistInput<P>) => WishlistResponse<P>
-  : (input: UseWishlistInput<P>) => WishlistResponse<P>
-
-export const fetcher = defaultFetcher as HookFetcherFn<Wishlist | null>
-
-export default function useWishlist<P extends Provider>(
-  input: UseWishlistInput<P> = {}
-) {
-  const { providerRef, fetcherRef } = useCommerce<P>()
-
-  const provider = providerRef.current
-  const opts = provider.wishlist?.useWishlist
-
-  const fetcherFn = opts?.fetcher ?? fetcher
-  const useHook = opts?.useHook ?? ((ctx) => ctx.useData())
-
-  return useHook({
-    input,
-    useData(ctx) {
-      const response = useData(
-        { ...opts!, fetcher: fetcherFn },
-        ctx?.input ?? [],
-        provider.fetcher ?? fetcherRef.current,
-        ctx?.swrOptions ?? input.swrOptions
-      )
-      return response
-    },
-  })
+const useWishlist: UseWishlist = (input) => {
+  const hook = useHook(fn)
+  return useSWRHook({ fetcher, ...hook })(input)
 }
+
+export default useWishlist
--- a/framework/shopify/.env.template
+++ b/framework/shopify/.env.template
@ -0,0 +1,4 @@
+COMMERCE_PROVIDER=shopify
+
+NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
+NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
--- a/framework/shopify/README.md
+++ b/framework/shopify/README.md
@ -0,0 +1,123 @@
+## Shopify Provider
+
+**Demo:** https://shopify.demo.vercel.store/
+
+Before getting starter, a [Shopify](https://www.shopify.com/) account and store is required before using the provider.
+
+Next, copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
+
+```bash
+cp framework/shopify/.env.template .env.local
+```
+
+Then, set the environment variables in `.env.local` to match the ones from your store.
+
+## Contribute
+
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
+
+If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).
+
+## Modifications
+
+These modifications are temporarily until contributions are made to remove them.
+
+### Adding item to Cart
+
+```js
+// components/product/ProductView/ProductView.tsx
+const ProductView: FC<Props> = ({ product }) => {
+  const addToCart = async () => {
+    setLoading(true)
+    try {
+      await addItem({
+        productId: product.id,
+        variantId: variant ? variant.id : product.variants[0].id,
+      })
+      openSidebar()
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+}
+```
+
+### Proceed to Checkout
+
+```js
+// components/cart/CartSidebarView/CartSidebarView.tsx
+import { useCommerce } from '@framework'
+
+const CartSidebarView: FC = () => {
+  const { checkout } = useCommerce()
+  return (
+    <Button href={checkout.webUrl} Component="a" width="100%">
+      Proceed to Checkout
+    </Button>
+  )
+}
+```
+
+## APIs
+
+Collections of APIs to fetch data from a Shopify store.
+
+The data is fetched using the [Shopify JavaScript Buy SDK](https://github.com/Shopify/js-buy-sdk#readme). Read the [Shopify Storefront API reference](https://shopify.dev/docs/storefront-api/reference) for more information.
+
+### getProduct
+
+Get a single product by its `handle`.
+
+```js
+import getProduct from '@framework/product/get-product'
+import { getConfig } from '@framework/api'
+
+const config = getConfig()
+
+const product = await getProduct({
+  variables: { slug },
+  config,
+})
+```
+
+### getAllProducts
+
+```js
+import getAllProducts from '@framework/product/get-all-products'
+import { getConfig } from '@framework/api'
+
+const config = getConfig()
+
+const { products } = await getAllProducts({
+  variables: { first: 12 },
+  config,
+})
+```
+
+### getAllCollections
+
+```js
+import getAllCollections from '@framework/product/get-all-collections'
+import { getConfig } from '@framework/api'
+
+const config = getConfig()
+
+const collections = await getAllCollections({
+  config,
+})
+```
+
+### getAllPages
+
+```js
+import getAllPages from '@framework/common/get-all-pages'
+import { getConfig } from '@framework/api'
+
+const config = getConfig()
+
+const pages = await getAllPages({
+  variables: { first: 12 },
+  config,
+})
+```
--- a/framework/shopify/api/cart/index.ts
+++ b/framework/shopify/api/cart/index.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/catalog/index.ts
+++ b/framework/shopify/api/catalog/index.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/catalog/products.ts
+++ b/framework/shopify/api/catalog/products.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/checkout/index.ts
+++ b/framework/shopify/api/checkout/index.ts
@ -0,0 +1,46 @@
+import isAllowedMethod from '../utils/is-allowed-method'
+import createApiHandler, {
+  ShopifyApiHandler,
+} from '../utils/create-api-handler'
+
+import {
+  SHOPIFY_CHECKOUT_ID_COOKIE,
+  SHOPIFY_CHECKOUT_URL_COOKIE,
+  SHOPIFY_CUSTOMER_TOKEN_COOKIE,
+} from '../../const'
+
+import { getConfig } from '..'
+import associateCustomerWithCheckoutMutation from '../../utils/mutations/associate-customer-with-checkout'
+
+const METHODS = ['GET']
+
+const checkoutApi: ShopifyApiHandler<any> = async (req, res, config) => {
+  if (!isAllowedMethod(req, res, METHODS)) return
+
+  config = getConfig()
+
+  const { cookies } = req
+  const checkoutUrl = cookies[SHOPIFY_CHECKOUT_URL_COOKIE]
+  const customerCookie = cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE]
+
+  if (customerCookie) {
+    try {
+      await config.fetch(associateCustomerWithCheckoutMutation, {
+        variables: {
+          checkoutId: cookies[SHOPIFY_CHECKOUT_ID_COOKIE],
+          customerAccessToken: cookies[SHOPIFY_CUSTOMER_TOKEN_COOKIE],
+        },
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  if (checkoutUrl) {
+    res.redirect(checkoutUrl)
+  } else {
+    res.redirect('/cart')
+  }
+}
+
+export default createApiHandler(checkoutApi, {}, {})
--- a/framework/shopify/api/customer.ts
+++ b/framework/shopify/api/customer.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/customers/index.ts
+++ b/framework/shopify/api/customers/index.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/customers/login.ts
+++ b/framework/shopify/api/customers/login.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/customers/logout.ts
+++ b/framework/shopify/api/customers/logout.ts
@ -0,0 +1 @@
+export default function () {}
--- a/framework/shopify/api/customers/signup.ts
+++ b/framework/shopify/api/customers/signup.ts
@ -0,0 +1 @@
+export default function () {}
--- a/Show More
+++ b/Show More