Overview
truecounterfeit is a concept streetwear brand: small-batch, hand-pulled screen-printed tees and hoodies, where “when a run is gone, it’s gone.” The tagline is “real fakes.”
This proof of concept is a custom Shopify theme built from scratch for the brand, with no base theme, to show how a small apparel brand can have a storefront with a distinct identity instead of a lightly customized template. It’s running on a free Shopify development store, so the demo is password-protected. To view it, use the password demo.
Design Concept
The whole design comes from the screen printing process:
- The overprint. The signature effect is a misregistered two-color overprint: headings print in cobalt with a pink layer landing slightly off, like a real screen print where two colors don’t line up perfectly. On the hero, the pink layer slides into place with a short animation.
- Halftone placeholders. Empty image areas use two offset dot patterns, like printing plates, instead of gray boxes.
- Bold, tactile type. Dela Gothic One for headlines and Archivo for body text, with heavy borders and buttons that lift with an offset pink shadow on hover.
- A five-color palette (ground, paper, ink, cobalt, and pink) that merchants can change in the theme editor, and everything in the theme updates from those five settings.
Features
Homepage Sections
All homepage content is built from sections and blocks that a merchant can rearrange and edit in Shopify’s theme editor without code:
- Announcement bar
- Hero with headline, text, button, image, and a “sticker” callout (“Pulled by hand in Seattle”)
- Featured collection (“The drop”)
- Brand statement (“Fake name. Real ink.”)
- How it’s made, a step-by-step process section with repeatable blocks (Burn the screen, Pull the ink, Cure it)
- Newsletter signup (“Don’t miss the next batch.”)
Store Templates
A complete set of templates: product, collection (with sorting), collection list, cart, search, blog, article, page, 404, and a branded password page.
Product Page
- Variant picker built with real radio buttons grouped in labeled fieldsets, so sizes and colors work with a keyboard and screen readers.
- Selecting a variant updates the price (including sale prices), shows Sold out or Unavailable when appropriate, updates the URL so a specific variant can be shared, and scrolls to that variant’s image.
- Add to cart is a standard Shopify product form, so the default variant can still be added to the cart even if JavaScript fails to load.
Product Cards
Collection cards show a second product image on hover, with responsive image sizes and lazy loading.
Built for Speed and Accessibility
- Tiny footprint. About 17 KB of CSS and 3 KB of plain JavaScript, with no frameworks or jQuery. The script loads deferred so it never blocks the page.
- Responsive images. Shopify’s image filters serve right-sized images with
srcset. The hero image loads first with high priority, while product images lazy-load as you scroll. - Accessible by default. A skip-to-content link, clearly visible keyboard focus outlines, a mobile menu that announces its open and closed state and closes with Escape, and alt text support throughout.
- Respects motion preferences. The overprint animation only runs for visitors who haven’t turned on “reduce motion.”
Tech
- Shopify Online Store 2.0: JSON templates, sections, blocks, and header and footer section groups
- Liquid, CSS, and vanilla JavaScript
- Theme settings for colors, favicon, and social links (Instagram, TikTok, YouTube)
- Hosted on a Shopify development store
What’s Next
If truecounterfeit becomes a real brand, next steps would include a slide-out cart drawer, size guide content, product reviews, and connecting the newsletter section to an email platform like Klaviyo.