diff --git a/packages/shopify/src/brand/index.ts b/packages/shopify/src/brand/index.ts
new file mode 100644
index 000000000..c61676669
--- /dev/null
+++ b/packages/shopify/src/brand/index.ts
@@ -0,0 +1,6 @@
+import type { Brand } from '@vercel/commerce/types'
+import { Logo } from './logo'
+
+export const brand: Brand.Config = {
+  Logo,
+}
diff --git a/packages/shopify/src/brand/logo.tsx b/packages/shopify/src/brand/logo.tsx
new file mode 100644
index 000000000..a3715daed
--- /dev/null
+++ b/packages/shopify/src/brand/logo.tsx
@@ -0,0 +1,13 @@
+export const Logo = ({ className = '', ...props }) => (
+  <svg
+    height={32}
+    width={32}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 89 101"
+  >
+    <path
+      fill="var(--primary)"
+      d="M63.305 100.258l25.313-6.29S77.719 20.285 77.65 19.779c-.07-.505-.511-.786-.878-.816-.364-.03-7.49-.14-7.49-.14s-4.344-4.218-5.977-5.815v87.25zM60.55 12.167l-2.994.927a20.986 20.986 0 00-1.433-3.521c-2.122-4.05-5.23-6.191-8.985-6.197h-.014c-.261 0-.52.025-.78.048a11.357 11.357 0 00-.34-.392C44.37 1.282 42.273.43 39.76.505c-4.85.138-9.68 3.64-13.596 9.862-2.755 4.377-4.852 9.876-5.446 14.134-5.568 1.724-9.462 2.93-9.548 2.958-2.811.883-2.9.969-3.267 3.619C7.627 33.08.273 89.947.273 89.947L61.289 100.5V12.042c-.3.02-.57.075-.74.125zM46.46 16.53l-10.29 3.185c.994-3.807 2.88-7.598 5.197-10.084.86-.925 2.066-1.955 3.494-2.544 1.34 2.8 1.633 6.763 1.6 9.443zM39.853 3.732c1.139-.025 2.097.225 2.916.764-1.31.68-2.577 1.658-3.766 2.932-3.08 3.305-5.44 8.435-6.382 13.384-2.936.909-5.808 1.8-8.452 2.617 1.67-7.79 8.199-19.48 15.684-19.697zM30.418 48.11c.328 5.19 13.984 6.324 14.75 18.483.603 9.565-5.073 16.109-13.253 16.625-9.818.62-15.222-5.174-15.222-5.174l2.08-8.851s5.44 4.105 9.796 3.83c2.844-.18 3.86-2.494 3.757-4.13-.427-6.771-11.548-6.371-12.25-17.497-.592-9.363 5.557-18.85 19.124-19.706 5.227-.33 7.905 1.006 7.905 1.006l-3.103 11.606s-3.46-1.575-7.562-1.316c-6.019.38-6.083 4.174-6.022 5.124zm19.267-32.578c-.036-2.455-.328-5.872-1.472-8.824 3.68.697 5.49 4.86 6.257 7.343-1.42.437-3.036.936-4.785 1.48z"
+    />
+  </svg>
+)
diff --git a/packages/shopify/src/provider.ts b/packages/shopify/src/provider.ts
index 00db5c1d3..68a0cd091 100644
--- a/packages/shopify/src/provider.ts
+++ b/packages/shopify/src/provider.ts
@@ -1,5 +1,7 @@
 import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
 
+import { brand } from './brand'
+
 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'
@@ -16,6 +18,7 @@ import fetcher from './fetcher'
 
 export const shopifyProvider = {
   locale: 'en-us',
+  brand,
   cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
diff --git a/site/components/common/Navbar/Navbar.module.css b/site/components/common/Navbar/Navbar.module.css
index faa86d156..c1baceaaf 100644
--- a/site/components/common/Navbar/Navbar.module.css
+++ b/site/components/common/Navbar/Navbar.module.css
@@ -26,7 +26,7 @@
 }
 
 .logo {
-  @apply cursor-pointer rounded-full border transform duration-100 ease-in-out;
+  @apply cursor-pointer rounded-full transform duration-100 ease-in-out;
 
   &:hover {
     @apply shadow-md;
diff --git a/site/components/common/Navbar/Navbar.tsx b/site/components/common/Navbar/Navbar.tsx
index 9286ef160..a434032e1 100644
--- a/site/components/common/Navbar/Navbar.tsx
+++ b/site/components/common/Navbar/Navbar.tsx
@@ -4,6 +4,7 @@ import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
+import { brand } from '@framework/brand'
 
 interface Link {
   href: string
@@ -13,44 +14,45 @@ interface Link {
 interface NavbarProps {
   links?: Link[]
 }
-
-const Navbar: FC<NavbarProps> = ({ links }) => (
-  <NavbarRoot>
-    <Container clean className="mx-auto max-w-8xl px-6">
-      <div className={s.nav}>
-        <div className="flex items-center flex-1">
-          <Link href="/">
-            <a className={s.logo} aria-label="Logo">
-              <Logo />
-            </a>
-          </Link>
-          <nav className={s.navMenu}>
-            <Link href="/search">
-              <a className={s.link}>All</a>
+const Navbar: FC<NavbarProps> = ({ links }) => {
+  return (
+    <NavbarRoot>
+      <Container clean className="mx-auto max-w-8xl px-6">
+        <div className={s.nav}>
+          <div className="flex items-center flex-1">
+            <Link href="/">
+              <a className={s.logo} aria-label="Logo">
+                {brand.Logo ? <brand.Logo /> : <Logo />}
+              </a>
             </Link>
-            {links?.map((l) => (
-              <Link href={l.href} key={l.href}>
-                <a className={s.link}>{l.label}</a>
+            <nav className={s.navMenu}>
+              <Link href="/search">
+                <a className={s.link}>All</a>
               </Link>
-            ))}
-          </nav>
+              {links?.map((l) => (
+                <Link href={l.href} key={l.href}>
+                  <a className={s.link}>{l.label}</a>
+                </Link>
+              ))}
+            </nav>
+          </div>
+          {process.env.COMMERCE_SEARCH_ENABLED && (
+            <div className="justify-center flex-1 hidden lg:flex">
+              <Searchbar />
+            </div>
+          )}
+          <div className="flex items-center justify-end flex-1 space-x-8">
+            <UserNav />
+          </div>
         </div>
         {process.env.COMMERCE_SEARCH_ENABLED && (
-          <div className="justify-center flex-1 hidden lg:flex">
-            <Searchbar />
+          <div className="flex pb-4 lg:px-6 lg:hidden">
+            <Searchbar id="mobile-search" />
           </div>
         )}
-        <div className="flex items-center justify-end flex-1 space-x-8">
-          <UserNav />
-        </div>
-      </div>
-      {process.env.COMMERCE_SEARCH_ENABLED && (
-        <div className="flex pb-4 lg:px-6 lg:hidden">
-          <Searchbar id="mobile-search" />
-        </div>
-      )}
-    </Container>
-  </NavbarRoot>
-)
+      </Container>
+    </NavbarRoot>
+  )
+}
 
 export default Navbar