CatchYourCards — TCG Webshop Redesign & Custom Platform Engineering
Full-stack redesign and custom feature engineering for a Dutch trading card game webshop — from a bespoke Crystal Luxe header system to a taxonomy-driven product showcase with live REST API product loading, all deployed without a staging environment via the Code Snippets plugin.
The Challenge
The core challenge was building a scalable, maintainable product showcase for a rapidly growing TCG assortment — dozens of brands, each with multiple themes and series — without hardcoding anything. A secondary critical challenge was CommerceKit compatibility: its signer.min.js intercepted all custom POST requests to admin-ajax.php, causing 400 errors that required a full architectural pivot to the WP REST API using GET requests. The entire system had to be deployed live without a staging environment, directly via the Code Snippets plugin.
The Solution
The taxonomy-driven architecture (pa_merk → pa_thema → pa_serie) auto-discovers all product relationships from WooCommerce data at runtime, cached in transients. A custom WP REST API endpoint bypasses CommerceKit entirely. The Style Registry provides deterministic brand colors, auto-generating styles for unknown brands via CRC32 so the system never breaks as new TCGs are added. Admin media pickers on all three taxonomy term edit screens give the shop owner full control over brand logos, theme images, and serie banners without touching code.
Results
9.8/10 customer rating on WebwinkelKeur (749+ reviews)
Multiple direct compliments on the premium design aesthetic
Zero hardcoded series/themes/brands — fully scalable architecture
Live cart, real-time product filtering, skeleton loading, hover image swap — all working across mobile and desktop
CommerceKit conflict fully resolved via REST API pivot
Entire platform deployed and maintained solo as sole developer/designer
CatchYourCards is a Dutch specialty webshop focused on trading card games
— Bandai Namco titles (One Piece, Digimon, Dragon Ball SCG, Gundam TCG, Naruto Boruto), Pokémon, Magic: The Gathering, Disney Lorcana, Star Wars Unlimited, and more. As the sole web developer and designer behind the platform, I was responsible for every layer of the frontend and custom backend functionality.
The visual identity centers on a dark, premium aesthetic — deep navy backgrounds with purple/indigo gradient accents and glassmorphism details — which has earned consistent praise from customers and community members. The design communicates trust and passion for the hobby simultaneously.
Custom Header System (Crystal Luxe)
The header is a fully bespoke WordPress component injected via wp_body_open, bypassing the Elementor theme header entirely. It features a sticky topbar with animated shimmer gradients showing USPs (same-day shipping, 9.8 customer rating, free shipping threshold), a main header bar with logo, WooCommerce product search, live cart count via WC AJAX fragments, account state detection (logged in/out), and a review badge linking to WebwinkelKeur. The navigation layer is a separate sticky element with mega menus per TCG brand, complete with hover animations, active-state indicators, and a fully functional mobile drawer with search and action buttons.
Taxonomy-Driven Showcase System (v3.1)
The flagship feature is the [cyc_showcase] shortcode system — a three-level product discovery interface driven entirely by WooCommerce taxonomies (pa_merk → pa_thema → pa_serie). No series, themes, or brands are hardcoded. The system auto-discovers all taxonomy relationships, caches results in transients with automatic invalidation, and renders a tabbed UI that adapts intelligently: navigation levels are hidden when only a single option exists, preventing unnecessary UI noise.
Products load asynchronously via a custom WP REST API endpoint
Each serie panel includes a hero section (with optional banner image and glassmorphism stat overlay), a filter toolbar (all / in stock / coming soon), scroll arrows, animated skeleton loaders, product cards with hover image swap and tooltip overlays, and an add-to-cart button with live WooCommerce fragment updating.
Images at every taxonomy level (brand logos, theme images, serie banners) are managed via a custom WordPress admin media picker added to the term edit screens, using the cyc_sc_image term meta key.
Style Registry
A PHP CYC_SC_Styles class provides a brand-aware color system with accent, light, dark, and gradient-to values per brand slug. Unknown brands auto-generate deterministic styles via CRC32 hash — ensuring graceful degradation without manual configuration as new brands are added.
Results
The platform earned a 9.8/10 customer rating on WebwinkelKeur with 749+ reviews. The design has received direct compliments for its premium feel, clarity, and the way it makes browsing TCG products intuitive and engaging. The architecture is fully scalable — new brands, themes, and series appear automatically without any code changes.
Tech Stack
