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

Redesign not-found and error states with clean black/white text

Browse Source 
Replace red alert boxes, icons, borders, and buttons with simple
centered text for product/collection not-found, load-failure, and
empty states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-06-10 14:11:11 -04:00
parent b212250da0
commit dc643f217e
4 changed files with 42 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/shopify/collection-detail.tsx
View File

@@ -13,7 +13,7 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({ handle: handleProp
const params = useParams();
const handle = handleProp || (params?.handle as string);
const { collection, loading, error, refetch } = useCollectionProducts(handle);
const { collection, loading, error } = useCollectionProducts(handle);
// Format title from handle
const formattedTitle = handle
@@ -46,26 +46,14 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({ handle: handleProp
if (error) {
return (
<div className="pt-4 pb-16">
<div className="container mx-auto px-4 text-center">
<h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
{formattedTitle}
<div className="container mx-auto px-4 py-32 text-center">
<h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
Collection Not Found
</h2>
<div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
<h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Collection
</h3>
<p className="text-red-600 mb-4">
{error}
</p>
<button
onClick={() => refetch()}
className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
>
Try Again
</button>
</div>
<p className="text-gray-500 max-w-md mx-auto">
The collection you are looking for does not exist or is no longer
available.
</p>
</div>
</div>
);
@@ -82,16 +70,13 @@ const CollectionDetail: React.FC<CollectionDetailProps> = ({ handle: handleProp
</h2>
{products.length === 0 ? (
<div className="text-center py-12">
<div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-medium text-gray-600 mb-2">
No Products in Collection
</h3>
<p className="text-gray-500">
This collection doesn&apos;t have any products yet.
</p>
</div>
<div className="text-center py-20">
<h3 className="text-lg font-medium text-gray-900 mb-2">
No Products in Collection
</h3>
<p className="text-gray-500">
This collection doesn&apos;t have any products yet.
</p>
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">