Skip to content
Kyloth

The Kyloth Journal / Behind the build

Why a theme preview has to be the real renderer

A screenshot cannot be pressed. What you preview on Kyloth is what publishes, and here is what that costs to build and why we paid it.

7 min read

Search, topics & article navigation
Two collaborators checking a shop preview on differently sized devices.
From the world of everyday business. Illustrative photography.

Most theme galleries show you a picture of a shop. You choose a picture, you pay, and then you discover what the picture left out: how it wraps a long product name, what it does at 390 pixels wide, where the buy button goes when there are variants.

We decided early that Kyloth would not do that. Every preview on this site, from the small card in the gallery to the full page, is drawn by the same renderer that serves a merchant's live shop. You can press the products. You can change the width. What you preview is what publishes.

The idea, at a glance

One renderer. Several ways to inspect it.

  1. 01Theme data

    Colours, type, layouts and catalogue content.

  2. 02Shared renderer

    The same components draw each surface.

  3. 03Preview surfaces

    Gallery, theme detail and responsive preview.

  4. 04Merchant storefront

    Published stores use that same foundation.

The shared-renderer principle. Public previews are available; merchant sign-up is coming soon.

What it cost

It cost a renderer that is correct at every size, which meant giving up pixels for container units, so one component is right in a 280 pixel card and on a 1440 pixel page. It cost a rule that a theme's page is data, not code, so a theme can change its own shelves without a developer. And it cost a lot of patience with edge cases that a screenshot would have hidden for ever.

Why we paid it

Because the people Kyloth is for cannot afford to find out after paying. A shop owner without a tech team cannot fix a theme that behaves differently from its picture. She can only live with it or leave. The preview is the one promise this site can keep before any money changes hands, so it had to be the real thing.

There is a second reason, and it is the one I care about more. A real preview is honest by construction. It cannot show you a feature that is not built, because it is built from the same parts the shop is. On a site where sign-up is still coming soon, that is worth more than any amount of copy.

A few practical answers

Questions you might be asking.

Open a product, switch variants, inspect the navigation and resize the page. Try a long product name, an unavailable item and a collection with few products. Check that labels, prices and buttons remain understandable on a phone.

Make the next step practical

Put the reading to work.

Explore practical workbooks for your business.

Open the free workbook

Was this useful?

Leave a like if this article gave you something useful to take into your business.

Loading reader feedback…

Anonymous reader feedback. A browser cookie remembers your choice so you can undo it. Liking does not subscribe you. Privacy and contact details.

A conversation worth having

Reader comments

What has worked in your business? Share a useful example or ask a question. Comments are reviewed before publication.

Loading comments…

Your name and comment may be published. Leave out email addresses, order details and private information. Submitting does not subscribe you. Privacy details