How Kadens Journal Made a Shopify Buy Button the Point of Its Homepage

Kadens Journal is an independent Nordic journal out of Stockholm: running, trail, skiing, and the environments people move through. It’s carried by sixteen shops in eleven countries, the kind that stock magazines on design merit: Papercut in Stockholm, Coffee Table Mags in Hamburg, Unitom in Manchester. The site runs on Squarespace, the products live in Shopify, and Buy Button Plus connects the two. The cover of the site carries one instruction, and it points at the embed.

The link lands partway down the same page. Everything below the black band is Buy Button Plus.

Hover or tap to highlight

A magazine that lives or dies on how it looks usually gets two bad options for selling a copy. Rebuild the whole site around Shopify, and the design moves inside someone else’s editor. Bolt on a typical buy button, and it announces itself: rounded corners, a drop shadow, a blue button, a font that isn’t yours. Kadens took neither path, and instead made the buy button stop announcing itself. The shadow came off, the corners went square, and the button got its own colors, all without touching a line of code. The rest is a bit of custom styling Kadens used to rebuild the card so it reads like a page from the magazine itself.

The layout puts the photograph on one side and the text on the other, lined up along the bottom of the image, with the text ordered title, price, description, and the buy button last. The price sits right under the title with a generous stretch of white space beneath it (the kind of spacing you’d expect from a magazine layout, not a checkout page), and each product gets plenty of room before the next one starts. The description collapses down to a couple of lines with a “SHOW MORE” link, so the page doesn’t get crowded.

Typography is what makes the seam disappear. Because the embed keeps its own styling separate from the page around it, Kadens’ site fonts don’t reach it by default, so Kadens loaded their own two typefaces directly into it: a monospaced serif for titles, prices, and labels, and a plain text face for the descriptions. Even the black band above the products, which is ordinary Squarespace content, uses that same monospace type. The result reads as one typeface system across the whole page, not two systems stitched together.

The buy button itself is mostly a handful of settings, not custom work. The text was changed to “Order,” the button was sized to fit that word exactly, and the colors were flipped to a plain white background with black text. What’s left is a single black word with no box around it, the same word the page opens on at the very top, repeated here at the moment of purchase. The size selector got the same treatment: square corners, a thin black line around it, and the label in capitals, so it reads like a form you’d find in a printed catalogue rather than a shopping cart.

All four products come from one embed pointed at a single collection, so it renders the whole listing on its own. That same embed runs again on the shop page, so one change updates both spots at once. Adding the next issue to that collection in Shopify puts it on both pages without anyone touching the site itself. The cart follows the reader everywhere, including onto the stockists page, and checkout opens in a new tab so the reader never loses their place in the magazine.

None of this meant leaving Squarespace or rebuilding the site around Shopify. Kadens kept the tool that lets a magazine look like a magazine, and handed everything else to the tool that already knows how to take a card, price an issue in Swedish kronor, quote postage out of Sweden, keep inventory accurate, and put the reader on a payment page they’ve probably used somewhere else before. That’s the whole trade: complete control over the part readers judge you on, and none of the burden of the part that just needs to work.

Frequently asked questions