diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2d1092e3..7d1d95638 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## Changelog 
+## Changelog
 
 - Select Variants Working
-- Click on cart item title, closes the sidebar
\ No newline at end of file
+- Click on cart item title, closes the sidebar
diff --git a/components/common/I18nWidget/I18nWidget.tsx b/components/common/I18nWidget/I18nWidget.tsx
index 9bfc7b63c..fbe67a4c1 100644
--- a/components/common/I18nWidget/I18nWidget.tsx
+++ b/components/common/I18nWidget/I18nWidget.tsx
@@ -43,7 +43,7 @@ const I18nWidget: FC = () => {
   const currentLocale = locale || defaultLocale
 
   return (
-    <ClickOutside active={display} onClick={() => setDisplay(false)} >
+    <ClickOutside active={display} onClick={() => setDisplay(false)}>
       <nav className={s.root}>
         <div
           className="flex items-center relative"
diff --git a/components/icons/Vercel.tsx b/components/icons/Vercel.tsx
index 8e8f6457d..96e619fdf 100644
--- a/components/icons/Vercel.tsx
+++ b/components/icons/Vercel.tsx
@@ -1,15 +1,39 @@
 const Vercel = ({ ...props }) => {
-    return (
-  <svg width="89" height="20" viewBox="0 0 89 20" fill="none" xmlns="http://www.w3.org/2000/svg" { ...props }>
-      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor"/>
-      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" fill="currentColor"/>
-      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" fill="currentColor"/>
-      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" fill="currentColor"/>
-      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" fill="currentColor"/>
-      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" fill="currentColor"/>
-      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" fill="currentColor"/>
-  </svg>
-
+  return (
+    <svg
+      width="89"
+      height="20"
+      viewBox="0 0 89 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" fill="currentColor" />
+      <path
+        d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z"
+        fill="currentColor"
+      />
+      <path
+        d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z"
+        fill="currentColor"
+      />
+      <path
+        d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z"
+        fill="currentColor"
+      />
+      <path
+        d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z"
+        fill="currentColor"
+      />
+    </svg>
   )
 }
 
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 0756edcda..4ea7d2ec4 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -1,5 +1,12 @@
 import { useKeenSlider } from 'keen-slider/react'
-import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react'
+import React, {
+  Children,
+  FC,
+  isValidElement,
+  useState,
+  useRef,
+  useEffect,
+} from 'react'
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
@@ -25,7 +32,7 @@ const ProductSlider: FC = ({ children }) => {
       const touchXPosition = event.touches[0].pageX
       // Size of the touch area
       const touchXRadius = event.touches[0].radiusX || 0
-      
+
       // We set a threshold (10px) on both sizes of the screen,
       // if the touch area overlaps with the screen edges
       // it's likely to trigger the navigation. We prevent the
@@ -33,15 +40,20 @@ const ProductSlider: FC = ({ children }) => {
       if (
         touchXPosition - touchXRadius < 10 ||
         touchXPosition + touchXRadius > window.innerWidth - 10
-      ) event.preventDefault()
+      )
+        event.preventDefault()
     }
 
-    sliderContainerRef.current!
-      .addEventListener('touchstart', preventNavigation)
+    sliderContainerRef.current!.addEventListener(
+      'touchstart',
+      preventNavigation
+    )
 
     return () => {
-      sliderContainerRef.current!
-      .removeEventListener('touchstart', preventNavigation)
+      sliderContainerRef.current!.removeEventListener(
+        'touchstart',
+        preventNavigation
+      )
     }
   }, [])
 
diff --git a/components/ui/Container/Container.tsx b/components/ui/Container/Container.tsx
index 1897a4825..7b281a2e4 100644
--- a/components/ui/Container/Container.tsx
+++ b/components/ui/Container/Container.tsx
@@ -13,9 +13,9 @@ const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
     'mx-auto max-w-8xl px-6': !clean,
   })
 
-  let Component: React.ComponentType<React.HTMLAttributes<
-    HTMLDivElement
-  >> = el as any
+  let Component: React.ComponentType<
+    React.HTMLAttributes<HTMLDivElement>
+  > = el as any
 
   return <Component className={rootClassName}>{children}</Component>
 }
diff --git a/framework/bigcommerce/README.md b/framework/bigcommerce/README.md
index 7beee6c14..a847fb36d 100644
--- a/framework/bigcommerce/README.md
+++ b/framework/bigcommerce/README.md
@@ -1,27 +1,25 @@
+# Table of Contents
 
-Table of Contents
-=================
-
-   * [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)
+- [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)
 
 # BigCommerce Storefront Data Hooks
 
@@ -235,7 +233,7 @@ import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-it
 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 })
@@ -264,7 +262,7 @@ import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-it
 
 const RemoveButton = ({ item }) => {
   const removeItem = useRemoveItem()
-  
+
   const handleRemove = async () => {
     await removeItem({ id: item.id })
   }
diff --git a/framework/bigcommerce/api/cart/index.ts b/framework/bigcommerce/api/cart/index.ts
index 5ff2d975b..715480bd8 100644
--- a/framework/bigcommerce/api/cart/index.ts
+++ b/framework/bigcommerce/api/cart/index.ts
@@ -10,15 +10,15 @@ import updateItem from './handlers/update-item'
 import removeItem from './handlers/remove-item'
 
 type OptionSelections = {
-	option_id: Number
-	option_value: Number|String
+  option_id: Number
+  option_value: Number | String
 }
 
 export type ItemBody = {
   productId: number
   variantId: number
-	quantity?: number
-	optionSelections?: OptionSelections
+  quantity?: number
+  optionSelections?: OptionSelections
 }
 
 export type AddItemBody = { item: ItemBody }
diff --git a/framework/bigcommerce/api/utils/parse-item.ts b/framework/bigcommerce/api/utils/parse-item.ts
index 132f269f6..8a50881b1 100644
--- a/framework/bigcommerce/api/utils/parse-item.ts
+++ b/framework/bigcommerce/api/utils/parse-item.ts
@@ -10,5 +10,5 @@ export const parseCartItem = (item: ItemBody) => ({
   quantity: item.quantity,
   product_id: item.productId,
   variant_id: item.variantId,
-  option_selections: item.optionSelections
+  option_selections: item.optionSelections,
 })
diff --git a/framework/bigcommerce/auth/login.ts b/framework/bigcommerce/auth/login.ts
index adfa2d467..3fef29879 100644
--- a/framework/bigcommerce/auth/login.ts
+++ b/framework/bigcommerce/auth/login.ts
@@ -54,7 +54,7 @@ async function login({
     if (process.env.NODE_ENV !== 'production') {
       cookie = cookie.replace('; Secure', '')
       // SameSite=none can't be set unless the cookie is Secure
-      // bc seems to sometimes send back SameSite=None rather than none so make 
+      // bc seems to sometimes send back SameSite=None rather than none so make
       // this case insensitive
       cookie = cookie.replace(/; SameSite=none/gi, '; SameSite=lax')
     }
diff --git a/framework/bigcommerce/common/get-page.ts b/framework/bigcommerce/common/get-page.ts
index b65e340e1..932032efb 100644
--- a/framework/bigcommerce/common/get-page.ts
+++ b/framework/bigcommerce/common/get-page.ts
@@ -38,9 +38,9 @@ async function getPage({
   config = getConfig(config)
   // RecursivePartial forces the method to check for every prop in the data, which is
   // required in case there's a custom `url`
-  const { data } = await config.storeApiFetch<RecursivePartial<{ data: Page[] }>>(
-    url || `/v3/content/pages?id=${variables.id}&include=body`
-  )
+  const { data } = await config.storeApiFetch<
+    RecursivePartial<{ data: Page[] }>
+  >(url || `/v3/content/pages?id=${variables.id}&include=body`)
   const firstPage = data?.[0]
   const page = firstPage as RecursiveRequired<typeof firstPage>
 
diff --git a/framework/bigcommerce/lib/immutability.ts b/framework/bigcommerce/lib/immutability.ts
index dc0177f8a..488d3570f 100644
--- a/framework/bigcommerce/lib/immutability.ts
+++ b/framework/bigcommerce/lib/immutability.ts
@@ -1,18 +1,13 @@
+import update, { Context } from 'immutability-helper'
 
-import update, { Context } from 'immutability-helper';
+const c = new Context()
 
-const c = new Context();
+c.extend('$auto', function (value, object) {
+  return object ? c.update(object, value) : c.update({}, value)
+})
 
-c.extend('$auto', function(value, object) {
-  return object ?
-    c.update(object, value):
-    c.update({}, value);
-});
+c.extend('$autoArray', function (value, object) {
+  return object ? c.update(object, value) : c.update([], value)
+})
 
-c.extend('$autoArray', function(value, object) {
-  return object ?
-    c.update(object, value):
-    c.update([], value);
-});
-
-export default c.update
\ No newline at end of file
+export default c.update
diff --git a/lib/click-outside/click-outside.tsx b/lib/click-outside/click-outside.tsx
index 268fc13d9..3c6b0ef28 100644
--- a/lib/click-outside/click-outside.tsx
+++ b/lib/click-outside/click-outside.tsx
@@ -7,32 +7,36 @@ interface ClickOutsideProps {
   children: any
 }
 
-const ClickOutside = ({ active = true, onClick, children }: ClickOutsideProps) => {
-    const innerRef = useRef()
+const ClickOutside = ({
+  active = true,
+  onClick,
+  children,
+}: ClickOutsideProps) => {
+  const innerRef = useRef()
 
-    const handleClick = (event: any) => {
-      if (!hasParent(event.target, innerRef?.current)) {
-        if (typeof onClick === 'function') {
-          onClick(event)
-        }
+  const handleClick = (event: any) => {
+    if (!hasParent(event.target, innerRef?.current)) {
+      if (typeof onClick === 'function') {
+        onClick(event)
       }
     }
-
-    useEffect(() => {
-      if (active) {
-        document.addEventListener('mousedown', handleClick)
-        document.addEventListener('touchstart', handleClick)
-      }
-
-      return () => {
-        if (active) {
-          document.removeEventListener('mousedown', handleClick)
-          document.removeEventListener('touchstart', handleClick)
-        }
-      }
-    })
-
-    return React.cloneElement(children, { ref: innerRef })
   }
 
+  useEffect(() => {
+    if (active) {
+      document.addEventListener('mousedown', handleClick)
+      document.addEventListener('touchstart', handleClick)
+    }
+
+    return () => {
+      if (active) {
+        document.removeEventListener('mousedown', handleClick)
+        document.removeEventListener('touchstart', handleClick)
+      }
+    }
+  })
+
+  return React.cloneElement(children, { ref: innerRef })
+}
+
 export default ClickOutside
diff --git a/package.json b/package.json
index e9dc98176..ff492a35e 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "build": "next build",
     "start": "next start",
     "analyze": "BUNDLE_ANALYZE=both yarn build",
+    "prettier-fix": "prettier --write .",
     "find:unused": "next-unused",
     "generate": "graphql-codegen",
     "generate:definitions": "node framework/bigcommerce/scripts/generate-definitions.js"
@@ -86,7 +87,6 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
-      "eslint",
       "prettier --write",
       "git add"
     ],