Shopify theme
The Kitesurf Centre: a designer's Figma, built on Shopify
The Kitesurf Centre in Camber Sands is the UK's largest kitesurf school and a specialist Duotone retailer. It sells lessons, camps, memberships, rentals and repairs alongside a large shop of kit. I built its new Shopify store with my friends at Ikigai, the Jersey growth marketing consultancy, to a designer's detailed Figma design, so the school and the shop run from one place.
- Client
- The Kitesurf Centre, Camber Sands
- Platform
- Shopify, built on the Horizon theme
- Website
- thekitesurfcentre.com
The starting point
A designer had drawn the new site in Figma page by page: the home page at two widths, the mega menu, the school and a single lesson, the shop, collections, a product, content pages, the blog, the cart and even the 404 page.
The store had to sell two very different things. Lessons and courses are booked through the school's booking system, while the shop carries thousands of products from dozens of brands. Both had to look like the design and be easy for a small team to keep up to date in the busy season.
How we approached it
- 01
Start from Shopify's own theme
Rather than write a theme from nothing, we built on Horizon, Shopify's newest theme, and kept it linked to Shopify's version so their fixes and new features can still be merged in.
- 02
Turn the design into sections
Each part of the Figma design became a section or block with its own settings, from the decorated section edges and colour schemes to the newsletter band and lesson cards, so new pages can be put together in the theme editor without code.
- 03
Create custom sections and blocks where needed
Where Horizon had nothing that fitted the design or the business, we created custom sections and blocks, including lesson pages and lesson groups for the school, brand logos, product hotspots, product detail tabs, a comparison slider and a layered slideshow. They follow Horizon's conventions, so staff edit them in the theme editor like everything else.
What we built
Theme to the design
The header, mega menu, footer, typography, colour schemes and section decorations from the Figma, plus product, collection and blog layouts.
School and lessons
Lessons are kept as structured content in Shopify and shown as pages grouped by level, with booking buttons that go straight to the school's booking system.
A menu staff can edit
The mega menu's panels, with their images and links, are content in Shopify Admin rather than code, so the team can change them as the season changes.
Shop and collections
Collections for each sport, from kites and foils to wetsuits and paddleboards, with descriptions that expand, filters and product pages laid out to the design.
Blog
Articles with a wider reading layout and tag filters, so news, guides and trip reports are easy to browse.
Catalogue checks
A private admin app that lists products missing images or categories, shows the collection tree and menus, edits lesson and menu content, and searches Shopify's global catalogue for product details.
Built to be looked after
Because the theme stays linked to Shopify's Horizon, updates from Shopify can be reviewed and merged in rather than lost. The theme is also connected to GitHub, so edits made in the theme editor and changes made in code end up in one history.
See the project's full case study on Ikigai's website