Multi-Axis Product Filtering
Shop page supports filtering by product category (6 categories) and pricing tier (Starter, Essential, Premium) simultaneously, with a sort dropdown for price and alphabetical ordering.
Rigged & Ready
An e-commerce storefront for 3D-printed kayak fishing accessories, featuring a product catalog with multi-axis filtering, client-side cart, and product detail pages.
Project Overview
Rigged & Ready is a niche e-commerce storefront for 3D-printed kayak fishing accessories. The site showcases a catalog of 14 products across multiple categories and pricing tiers, with client-side filtering, sorting, and a fully functional cart system. Built as a static-first Astro site deployed on Netlify, the store prioritizes fast page loads and a streamlined browsing experience for anglers shopping from their phones on the water.
Technologies
Technical Challenges
Designing a filtering system that handles two independent filter axes (category and tier) plus sorting without a backend. All 14 products are rendered server-side, then filtered and sorted entirely on the client using nanostores for state management — keeping the page fast while avoiding full page reloads on every filter change.
Key Features
Client-Side Cart
Add-to-cart with quantity controls, persistent cart state across page navigations, and a dedicated cart page with running totals — checkout is handled via Shopify's payment processing.
Product Detail Pages
Dynamic routes for each product with feature checklists, material specs, dimensions, compatibility info, and related product recommendations.
Coming Soon States
Products not yet available display a disabled 'Coming Soon' button instead of 'Add to Cart', allowing the full catalog to be browsed before launch.
Technical Deep Dive
Rigged & Ready is built with Astro and deployed as a server-rendered site on Netlify. The product data is managed through Astro’s content collections, with each product defined as a markdown file containing structured frontmatter for pricing, materials, features, and availability status.
The shop page renders all products at build time, then applies client-side filtering via nanostores. Category and tier filters use aria-pressed toggle buttons with URL state sync, so filter combinations are shareable as links. The sort dropdown reorders DOM elements without re-fetching.
The cart system uses nanostores backed by Astro Sessions for server-side persistence, allowing items to survive page navigations and browser refreshes. Each product card includes an “Add to Cart” button that updates the header cart count in real time. When the user is ready to purchase, checkout hands off to Shopify for secure payment processing and order fulfillment.
Product detail pages are generated dynamically from content collection entries, with breadcrumb navigation, feature checklists, spec tables, and a “You Might Also Like” section that surfaces related products from the same category.
Interface Gallery
Interested in this project?
I'd love to discuss the technical details or answer any questions you may have.
Get in Touch