The Starting Point
GRÜEZI Coffee is a Swiss specialty coffee brand from Zurich — single-origin coffees, ceremonial-grade matcha from Uji, and curated beverage experiences for brands and events.
For the launch of the new brand world, the agency TWHY Group developed the web design and the static HTML/CSS templates. What was needed: an implementation partner to deliver the design pixel-perfectly and performantly as a Shopify store — without compromises on speed, SEO, or scalability.
We took on the complete Shopify implementation — including technical SEO and a full schema-markup setup, built on top of the existing brand and design system.
What We Delivered
Custom Shopify Theme — Hybrid on the Horizon Base
Instead of building an entirely custom theme from scratch, we chose a hybrid approach: the modern Shopify Horizon theme forms the base for header, footer, cart, checkout, account, and search. Everything that's brand-defining and customer-facing was built fully custom.
| Layer | Setup |
|---|
| Header / Footer / Cart / Checkout | Horizon theme — secure, maintained, Shopify-native |
| Home, product pages, landings, blog | Custom sections with gruezi-* prefix |
| Brand world (Coffee, Matcha, Drinkware, Experiences) | Dedicated sections per area |
| Custom CSS | Loaded after Horizon — specificity-compliant, no class clashes |
Header / Footer / Cart / Checkout
SetupHorizon theme — secure, maintained, Shopify-native
Home, product pages, landings, blog
SetupCustom sections with gruezi-* prefix
Brand world (Coffee, Matcha, Drinkware, Experiences)
SetupDedicated sections per area
Custom CSS
SetupLoaded after Horizon — specificity-compliant, no class clashes
The result: the security and maintainability of a modern Shopify theme, combined with full design freedom where brand and conversion matter most.
Implementation of All 19 Design Pages
The design system delivered by TWHY Group covered 19 pages — from the homepage through product-specific landings to experiences and the story page. We implemented every one of them pixel-perfectly in Liquid.
| Page type | Implementation |
|---|
| Home | Custom section with hero video, story block, collection highlights, partner carousel |
| Coffee | Collection hub + two dedicated product pages (Gran Reserve, Grüetini) |
| Matcha | Collection hub + product pages for Ceremonial + Organic Matcha + Sets |
| Experiences | Co-branded and fully-branded beverage experience landings |
| Drinkware | Collection with Ecoffee co-branded products |
| About / Story | Custom story page with hero video |
| Blog | Custom listing + article template |
| Imprint, Terms, Privacy | Clean legal pages |
Home
ImplementationCustom section with hero video, story block, collection highlights, partner carousel
Coffee
ImplementationCollection hub + two dedicated product pages (Gran Reserve, Grüetini)
Matcha
ImplementationCollection hub + product pages for Ceremonial + Organic Matcha + Sets
Experiences
ImplementationCo-branded and fully-branded beverage experience landings
Drinkware
ImplementationCollection with Ecoffee co-branded products
About / Story
ImplementationCustom story page with hero video
Blog
ImplementationCustom listing + article template
Imprint, Terms, Privacy
ImplementationClean legal pages
All pages in two languages — German for the local Swiss market, English for the brand's international visibility.
Technical SEO
So that the store is visible on Google from day one, we set up the full technical SEO foundation:
| Element | Implementation |
|---|
| Meta titles & descriptions | Hardcoded per handle/type — handwritten, not auto-generated |
| Structured URLs | Clean hierarchy (/products/, /collections/, /pages/) |
| Local anchors | "Zurich", "Switzerland", "from Switzerland" as fixed SEO signals |
| Canonical tags | Cleanly set for every page, no duplicate-content risks |
| Internal linking | Strategic interconnection between products, collections, and story |
| Sitemap & robots.txt | Configured natively via Shopify |
Meta titles & descriptions
ImplementationHardcoded per handle/type — handwritten, not auto-generated
Structured URLs
ImplementationClean hierarchy (/products/, /collections/, /pages/)
Local anchors
Implementation"Zurich", "Switzerland", "from Switzerland" as fixed SEO signals
Canonical tags
ImplementationCleanly set for every page, no duplicate-content risks
Internal linking
ImplementationStrategic interconnection between products, collections, and story
Sitemap & robots.txt
ImplementationConfigured natively via Shopify
Every meta title and description is tailored to the respective search intent — specialty coffee, ceremonial matcha, and branded experiences attract different searchers and require different language.
Structured Data (Schema.org)
So that search engines understand the store's content correctly, we implemented a complete JSON-LD schema markup:
| Schema type | Where used |
|---|
| Organization | Header — brand, logo, social profiles, contact |
| Product | Product pages — name, price, description, images, availability |
| Offer | Product pages — price details, currency, stock |
| BlogPosting | Blog articles — author, date, cover, tags |
| BreadcrumbList | All hierarchy pages for site structure |
| WebSite | Sitelinks search box for Google results |
Organization
Where usedHeader — brand, logo, social profiles, contact
Product
Where usedProduct pages — name, price, description, images, availability
Offer
Where usedProduct pages — price details, currency, stock
BlogPosting
Where usedBlog articles — author, date, cover, tags
BreadcrumbList
Where usedAll hierarchy pages for site structure
WebSite
Where usedSitelinks search box for Google results
Structured data increases the chance of rich results (star ratings, prices, FAQ snippets directly in search results) and helps Google show products correctly in shopping and knowledge panels.
Specialty coffee buyers expect a brand experience — not loading bars. We optimised performance at every layer:
| Area | Measure |
|---|
| Images | Shopify CDN, responsive sizes, modern formats |
| Video | Hero video hosted via Shopify Files, optimised to < 1 MB |
| CSS | Only page-specific CSS loaded per template |
| Fonts | Subset, preloaded, swap-fallback |
| JavaScript | Minimal, asynchronously loaded, no bloat |
Images
MeasureShopify CDN, responsive sizes, modern formats
Video
MeasureHero video hosted via Shopify Files, optimised to < 1 MB
CSS
MeasureOnly page-specific CSS loaded per template
Fonts
MeasureSubset, preloaded, swap-fallback
JavaScript
MeasureMinimal, asynchronously loaded, no bloat
The storefront loads in under 2 seconds on mobile — decisive for conversion and SEO.
The Collaboration
The project had a clear division of roles:
| Role | Responsibility |
|---|
| TWHY Group | Web design, brand system, static HTML/CSS templates |
| Bare Creative | Shopify implementation, theme architecture, SEO, schema markup, performance |
| GRÜEZI Coffee | Content, products, brand stewardship |
TWHY Group
ResponsibilityWeb design, brand system, static HTML/CSS templates
Bare Creative
ResponsibilityShopify implementation, theme architecture, SEO, schema markup, performance
GRÜEZI Coffee
ResponsibilityContent, products, brand stewardship
This separation worked because the handoffs were clean — and because we implemented the delivered design without creative reinterpretation. TWHY's design system was preserved 1:1; we brought it to life technically.
The Result
| Factor | Result |
|---|
| Design fidelity | Pixel-perfect implementation of all 19 pages — no compromises |
| Performance | Under 2 seconds load time on mobile |
| SEO visibility | Complete setup with meta data, schema markup, clean site structure — ready for organic growth from day one |
| Extensibility | Theme architecture enables fast addition of new products, collections, or landings without rebuild |
| Multilingual | DE and EN natively supported — internationally scalable |
Design fidelity
ResultPixel-perfect implementation of all 19 pages — no compromises
Performance
ResultUnder 2 seconds load time on mobile
SEO visibility
ResultComplete setup with meta data, schema markup, clean site structure — ready for organic growth from day one
Extensibility
ResultTheme architecture enables fast addition of new products, collections, or landings without rebuild
Multilingual
ResultDE and EN natively supported — internationally scalable
When web design and technical implementation are cleanly separated, and both sides know their craft, the result is a store that delivers — aesthetically as much as technically — on what the brand promises.