frontend-shopify/nextjs-shopify-collection
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 fc42f2d114
commit e2148d657b
4 changed files with 42 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/shopify/products.tsx
View File

@@ -142,26 +142,14 @@ const Products: React.FC<ProductsProps> = ({
if (error) {
return (
<div className="py-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">
{title}
<div className="container mx-auto px-4 py-24 text-center">
<h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
Products Unavailable
</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 block"></i>
<h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Products
</h3>
<p className="text-red-600 mb-4">
{error}
</p>
<Button
onClick={() => fetchProducts()}
variant="destructive"
>
Try Again
</Button>
</div>
<p className="text-gray-500 max-w-md mx-auto">
We couldn&apos;t load any products right now. Please try again
later.
</p>
</div>
</div>
);
@@ -175,9 +163,8 @@ const Products: React.FC<ProductsProps> = ({
{title}
</h2>
<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">
<div className="max-w-md mx-auto py-12">
<h3 className="text-lg font-medium text-gray-900 mb-2">
No Products Found
</h3>
<p className="text-gray-500">