frontend-shopify/nextjs-shopify-products
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update default shopify site design

Browse Source
This commit is contained in:
Rami Bitar
2026-06-10 13:20:03 -04:00
parent 1fb1df8cfd
commit e4ecab1875
33 changed files with 527 additions and 2371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/shopify/shop-header.tsx
View File

@@ -1,10 +1,11 @@
'use client';
import React from 'react';
import React, { useState } from 'react';
import Link from 'next/link';
import { useShopifyCart } from '@/hooks/use-shopify-cart';
import config from '@/lib/config.json';
import { RiShoppingCartLine } from '@remixicon/react';
import { RiSearchLine, RiShoppingBagLine } from '@remixicon/react';
import SearchDialog from './search-dialog';
const CartIcon: React.FC = () => {
const { toggleCart, itemCount } = useShopifyCart();
@@ -14,9 +15,9 @@ const CartIcon: React.FC = () => {
onClick={toggleCart}
className="relative p-1 text-black hover:text-gray-600 transition-colors"
>
<RiShoppingCartLine size={20} />
<RiShoppingBagLine size={20} />
{itemCount > 0 && (
<span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
<span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-medium">
{itemCount > 99 ? '99+' : itemCount}
</span>
)}
@@ -25,12 +26,14 @@ const CartIcon: React.FC = () => {
};
const Header: React.FC = () => {
const [searchOpen, setSearchOpen] = useState(false);
return (
<nav className="bg-white shadow-sm sticky top-0 z-30 h-14">
<nav className="bg-white/70 backdrop-blur-md border-b border-gray-200/60 sticky top-0 z-30 h-14">
<div className="container mx-auto px-4 h-full">
<div className="flex justify-between items-center h-full">
{/* Logo */}
<Link href="/" className="text-lg font-bold text-black font-heading">
<Link href="/" className="text-lg font-medium text-black font-heading">
{config.brand.logo.url ? (
<img
src={config.brand.logo.url}
@@ -57,11 +60,22 @@ const Header: React.FC = () => {
Collections
</Link>
{/* Cart Icon */}
<CartIcon />
{/* Search + Cart Icons */}
<div className="flex items-center space-x-2">
<button
onClick={() => setSearchOpen(true)}
className="p-1 text-black hover:text-gray-600 transition-colors"
aria-label="Search products"
>
<RiSearchLine size={20} />
</button>
<CartIcon />
</div>
</div>
</div>
</div>
<SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
</nav>
);
};