Twisted Games & Collectibles
A fully custom Shopify storefront a non-technical owner can actually run herself.
Overview
A community hub and a real storefront
Twisted Games & Collectibles is a family-run game store in Freeport, Illinois, carrying Magic: The Gathering, Pokemon, Lorcana, Warhammer, D&D, board games, and collectibles. The store recently moved into a larger space and needed a website that worked as both a community hub and a real storefront tied to live inventory.
The brief had one hard constraint underneath everything else: the owner runs the store day to day and manages the site herself. Every part of the build had to be editable without touching code. She swaps featured products, updates event text, changes images, and puts items on sale through Shopify's theme editor, never a text file.
The Problem
Several jobs that don't naturally fit together
- A community board for a calendar full of weekly events across six or seven game systems.
- A storefront sitting on top of a large, constantly changing inventory of singles, sealed product, and accessories.
- A local business page that needs to rank for people searching for a game store nearby.
- Maintainable by a non-technical owner, because a site nobody can update goes stale the week after launch.
The store already had a Shopify catalog but no cohesive site around it, and the owner was doing a lot of manual category and inventory work by hand.
The Decision
Two systems, collapsed into one
The first version was a fully custom static site, hand-built in HTML, CSS, and vanilla JavaScript on Netlify, pulling events from the Google Calendar API and products from Shopify's Storefront API. It proved the concept and locked in the visual language, but it lived in two places at once: a Netlify front end talking to a Shopify back end. For an owner who needs to manage everything herself, two systems is one too many.
So the whole site was rebuilt inside Shopify on a customized Dawn theme, so the storefront, the content, and the inventory all live in one ecosystem. Every page is a custom Liquid section, hand-built rather than assembled from a page builder. The static site now serves only as a design reference.
One login. No second dashboard. No sync to worry about.
The consolidation that shaped every decision
What Was Built
Custom pages, self-sorting systems
The site spans a homepage with a featured hero, a "this week" events section, new arrivals and on-sale grids, and category cards, plus shop and collection pages, an events page, a community page, a D&D cabin rental page, and a three-tier membership program, all under a custom header, footer, and navigation matching the store's branding.
Underneath the pages sits the part that makes it run itself:
- A collections architecture that files products into the right categories automatically based on how they are named and typed, so most inventory sorts itself instead of being tagged one item at a time.
- A game-system metafield that powers the shop filters across Magic, Pokemon, Lorcana, Warhammer, and the rest.
- A sports card section for the semi-independent card operation that runs inside the store.
- A membership page with three tiers, badge icons, and a subscription path mapped against Shopify's first-party subscription tools.
Every one of these sections is editable through the theme editor. That was a core requirement, and it held up across the entire build.
Design System
Warm and dark, built to sit behind product
The visual identity is warm and dark, built to sit comfortably behind product photography and miniatures without competing with them. Bitter for headings, Source Sans 3 for body. Every color pair was checked against WCAG AA, with skip links, ARIA labeling, live-region announcements on the dynamic feeds, focus-visible styling, and alt text throughout. For a public-facing business, ADA compliance is a legal line, not a preference.
Where It Stands
Approved, and heading for launch
The owner has approved the full build. The work is organized into a dependency-ordered tracker, and the remaining pieces are the ones that turn a good-looking site into one that runs itself.
Complete
- Homepage, shop landing, events, community, rentals, and membership pages
- Custom header, footer, and navigation
- Collections and filtering architecture
- Design system and full accessibility pass
In progress, pre-launch
- Automation that routes new inventory into categories and flags new arrivals
- Subscription billing and automatic member tagging for register lookups
- A styling pass on product, cart, search, and 404 surfaces
- Migrating the event calendar onto the owner's own Google account
- Carrying SEO and accessibility over from the static build
- A plain-language staff guide for routine updates
Highlights
What makes it hold up
Single ecosystem
Consolidating a two-system setup into one Shopify install removed an entire category of maintenance burden for a non-technical owner.
Self-sorting inventory
The collections architecture means product files itself into the right place instead of being tagged by hand.
Editable everything
Every custom section is exposed in the theme editor, so the person running the store can run the site too.
Accessibility as a baseline
WCAG AA was built in from the first version, not bolted on at the end.