Breakz sells collectible cards in Norway and runs live card breaks on Twitch. We designed the store and built its custom Shopify theme.

Project Goals

• A catalogue with filters and a product page with collector data: grade, certificate, print run, condition, set and card number
• A live layer with the Twitch player and chat, a break schedule and spot sales
• A design that starts at 360 px, with separate mobile layouts
• Cookie consent and returns that follow Norwegian law, and a storefront in Bokmål only

What We Did

We built the visual system from scratch: palette, typography, icons and a vector version of the logo, with a dark theme as the main one. In Figma we designed the home page, catalogue, product page, cart (empty and full), the live break page, the menu and the cookie banner. Each mobile screen has its own layout instead of a squeezed desktop one.

Built Around the Stream

Spots in a break. A buyer picks the team they will get when the box is opened. Each spot is a product variant with a stock of one, so Shopify reserves it within the payment transaction and the same spot cannot be sold twice.

The site knows when the stream is on. Every ten minutes a task on the Shopify side asks Twitch whether the channel is live. When a stream starts, a “Live nå” bar appears on every open page and the break page switches to the player. When it ends, the countdown comes back. The hosts do not need to touch the site before or after a stream.

Inside the Theme

The theme is our own, built on Shopify’s Horizon 4.1 and not headless: 43 custom sections and blocks, 33 snippets and about 43,000 lines of code.

Cookie consent. Norwegian law requires consent before the first third-party request, and Twitch sets its own cookies. Ready-made solutions either lacked the granularity we needed or loaded before consent themselves, so we wrote our own on Shopify’s native API. Until a visitor agrees, a placeholder of exactly the same size stands in for the player, so nothing on the page jumps as it loads.

Rip & Ship. Buyers choose whether to get a box sealed or have it opened live on stream. The obvious option, a second product variant, breaks on stock: one physical box would turn into two separate stocks, and the store could sell six boxes with three on the shelf. We made the choice a property of the order line instead. The product keeps one stock, and shipping is automatically held for that line only, while the rest of the order ships as usual.

Search that sees card data. On the live store, “PSA”, “Prizm” or “1999” returned nothing, even though the cards had these values filled in. The store’s search read titles and tags, not metafields. A script now copies metafield values into tags and removes outdated ones on the next run. The client’s team still fills in only the fields, and the tags appear on their own.

The 36 KB font with Norwegian letters is served by the store itself, not by Google Fonts. It loads faster, and there is no third-party request that would need consent.