Seance: A Figma-Designed Matcha Store with a Custom Theme

We designed Seance in Figma ourselves, planned every page before building it, and then built the Shopify theme to match the design. The demo shows the whole path from planning to a working store.

Project brief

Seance is a demo matcha brand we created to show a complete design-to-build process on Shopify. The goal was a calm, brand-led store, designed first and then built as a custom theme rather than assembled from stock sections.

Planning and design in Figma

We started with wireframes. Every template got its own frame at three widths: desktop (1440), tablet (768) and mobile (375). That covers the home page, collection, product, cart, search, blog, article, standard page and contact page, plus the parts every page shares: the announcement bar, the header with its mega menu, the footer, the cart drawer (with an empty state) and the navigation drawers.

Next to the frames sits a components page: buttons, accordion rows, product cards, review cards, content cards and the header and footer in each size. The frames use placeholder text for products and reviews, so the design could be reviewed before any copy or photography was final.

Building the custom theme

We built the theme on Shopify’s Horizon theme and wrote custom sections for the parts that needed to follow the design:

• A hero section and a benefit bar for the home page
• A “ritual” section with the three brewing steps, a category section and a customer review section
• A breadcrumb for the product page and a brewing card that sits under the product photo
• Extras inside the cart drawer, a star-rating snippet and one stylesheet for the brand’s colours and type

The Figma frames stayed the reference throughout the build, so the pages could be checked against the design at each width.

Try it

The demo store is live and opens behind a password page. The password is seance.