Images & media

Product and content images are served from the Kotao CDN and can be transformed on the fly. The SDK gives you three layers — pick the one that fits.

<Image> (React)

import { Image } from "@kotao/storefront/react";

<Image data={product.images[0]} width={300} aspectRatio="1/1" crop="center" />;

Pass the image object from your query ({ id, url, altText, width, height }) and the component renders a responsive <img> with srcset, explicit dimensions (no layout shift), and lazy loading below the fold.

URL & attribute helpers

From @kotao/storefront/image, when you need raw control:

• imageUrl(image, options) — one transformed URL (width, height, crop, format).
• imageSrcSet(image, options) — a srcset string across widths.
• buildImageAttrs(image, options) — the complete attribute set for a hand-written <img>.

Video and generic files

MediaFile (from /react) renders a product’s media by type — images, video (with poster), external video, or model — so galleries don’t need to branch by hand.

Styling in general

A theme owns its CSS entirely — the scaffold is a plain Vite project, so use whatever you prefer (vanilla CSS, Tailwind, CSS modules). Fonts declared as font settings resolve through theme settings; everything else is standard web platform.