Start a project
We'll respond as soon as possible with clear next steps — no obligations.
Case study · Beauty & wellness
Three languages, one price source
Faircare is a massage studio for women in Berlin-Prenzlauer Berg, with massages, cosmetic treatments and gift vouchers. We are giving the existing site a large-scale update on the same platform: a new block library, one price source for German, English and Ukrainian, and a voucher shop set up in code.
- Client
- Faircare
- Industry
- Beauty & wellness
- Services
- Design to code · Development · Content
- Status
- In progress
The brief
A studio site with a shop, updated from the inside
Faircare runs a massage studio exclusively for women in Berlin-Prenzlauer Berg. The website presents its massages and cosmetic treatments, sells gift vouchers as a digital code or a printed card, and sends visitors to the studio’s Treatwell page to book an appointment.
The update keeps the existing base — Blocksy, WooCommerce, YITH Gift Cards and Polylang — and renews what sits on top: a block library built from Figma, one price source for three languages, and shop settings kept in versioned code instead of hand-clicked screens.
- Deliverables
- Block library · Price system · Voucher shop
- Platform
- WordPress · Blocksy · WooCommerce · YITH Gift Cards
- Languages
- German · English · Ukrainian
- Content
- 6 service groups · 15 treatments · gift vouchers
- Engagement
- Large-scale update, in progress
- Location
- Berlin, Prenzlauer Berg
The challenge
An update without starting over
Faircare already sold gift vouchers online, and the update had to keep that working: voucher products, shop settings and invoice options had to reach the new build without being clicked together again by hand.
On top came three languages sharing one set of prices, and the rules a small German shop has to follow — from AI image labels to accessibility and the right of withdrawal.
-
One price, three languages
Prices are stored once on the German treatment. English and Ukrainian pages show the same rows with their own texts, and expired discounts disappear on their own.
-
Settings that can be repeated
The WooCommerce importer cannot round-trip YITH gift-card products, so vouchers, shop settings and invoice options are provisioned from versioned code.
-
German rules for a small shop
AI image labels, accessibility checks, German-only PDF invoices, a withdrawal link and a short checkout for digital vouchers — all part of the build.
Behind the build
A two-week sprint, four disciplines at work
The update was built in one dense sprint in August: Figma frames became markup and blocks, the theme and the shop set-up followed, and an accessibility pass closed the round. Content, legal pages, SEO and the go-live are the next steps.
What we built
Five systems, one studio site in three languages
Price card
Every treatment with its price up front
On every service page the price card comes first: duration and price for each option, a discount badge with a countdown of the days left, and a booking button that leads to the studio’s Treatwell page.
- Price options by duration
- Discount badge with days-left countdown
- Treatwell booking link per price row
Price system
One admin screen for every price
All prices are entered in one form under Services → Prices: duration, price, discount with end date and booking link per row. The numbers are stored once and feed the price list, the price cards and the service cards inside news posts.
- Price list with a tab per service group
- Texts per language, numbers shared
- Expired discounts hidden automatically
Voucher shop
Gift vouchers, digital or by post
Vouchers come as a digital code or a printed card, with a free amount from 50 to 1000 euros. Carts with only digital vouchers skip the address fields, and the voucher code appears on the German PDF invoice.
- Digital and printed vouchers in every language
- Short checkout for digital vouchers
- Voucher codes on PDF invoices
Opening hours & languages
Open now? The header knows
Two custom header elements: a status pill that reads the studio’s working hours and shows “Open until …” or “Closed until …”, and a flag language switcher for German, English and Ukrainian, with correctly declined weekday names in Ukrainian.
- Current opening status in the header
- Flag language switcher with dropdown
- Hours maintained in the Contacts admin
Contacts hub
Contact details kept in one place
One admin menu with tabs for details, social links, working hours and the footer form. The same data feeds the contact section with form, contact card and photo that appears before the footer on every page.
- Contacts admin with four tabs
- Contact form section before the footer
- Form visibility switched in the admin
Inside the project
Every step of the work, out in the open
Most agencies show you the finished site. We show you how it got there. Open any discipline to see what the team did and what it handed over.
01 / Project management
One point of contact, the whole way through
Two repositories, one routine: every change went through a dev or feature branch and a pull request — 29 merged so far. A CI build check guards the plugin’s dev branch, and a merge to main builds and deploys theme and blocks automatically.
-
29
merged pull requests
-
78
commits in two repositories
What we did
- Branch and pull-request workflow
- CI build check on the plugin’s dev branch
- GitHub Actions build and FTP deploy on main
- Written workflow notes for the block plugin
Handed over Approved scope and requirements → Design
02 / UI/UX design
Structure first, pixels second
The blocks were built from Figma frames in two steps: first HTML and SCSS markup with a written report, then the Gutenberg block. Most reports document responsive checks at four screen widths, from desktop down to phone.
-
11
markup reports from Figma frames
-
10
palette colours for text and backgrounds
What we did
- Figma frames turned into tested markup
- Responsive checks at four screen widths
- Teal palette with a gold accent gradient
- Large tap targets on the hero slider
Artifacts
-
Treatments block on a service page -
Service group cards
Handed over Figma designs and a block system → Development
03 / Development
Built to be fast, stable and easy to extend
A Blocksy child theme with a hierarchical services type, a central price screen and a contacts admin; a plugin with 18 server-rendered blocks; and two must-use plugins for PDF invoices. Shop, voucher, invoice and accessibility settings are applied from code.
-
18
custom Gutenberg blocks in five categories
-
8
data-driven blocks, from price tabs to gift cards
-
2
must-use plugins for PDF invoices
What we did
- Services post type with fixed price and treatment slots
- Gift cards, shop and invoices provisioned from code
- German PDF invoices for every order language
- Voucher codes generated before the order e-mail
- Accessibility Checker extended to services and products
Artifacts
-
Voucher product with a free amount
Handed over Tested build on staging → Content & SEO
04 / Content
Every offer in one clear structure
The service catalogue stands in three languages: six service groups and 15 treatments each, with 20 price options that all languages share. Interface texts run through our own extract and compile tools, and client-entered values are registered for translation.
-
63
published service pages, 21 per language
-
20
price options on 15 treatments
-
752
translatable interface strings
What we did
- Service and treatment texts in German, English and Ukrainian
- Price rows entered once, shown in every language
- Polylang strings for client-entered values
- Translation catalogues for German and Ukrainian
Artifacts
-
English price list
Handed over Structured content in the CMS → SEO & GEO
The project in numbers
What the update has built so far
Every figure is counted from the new local version — its code, its database and its translation files.
-
3
languages: German, English, Ukrainian
-
18
custom Gutenberg blocks
-
8
blocks with an AI-disclosure badge
-
63
published service pages in three languages
-
20
price options, stored once for all languages
-
6
gift-card products, digital and printed
-
752
translatable interface strings
-
29
merged pull requests
Below the surface
The work no price list shows
Visitors will see prices, vouchers and opening hours. Underneath sit the settings, safety nets and rules that keep them right in three languages.
-
Development
Settings as code
WooCommerce, YITH, PDF invoices and Accessibility Checker are configured from versioned arrays and re-applied with every version bump.
-
Development
A safety net for vouchers
Codes are generated before the order e-mail, and postdated cards with an unreadable date are sent right away instead of getting stuck.
-
Development
German PDFs, always
Invoices are rendered in German even when the order was placed in English or Ukrainian.
-
Content
A translation workflow
752 interface strings, our own extract and compile tools, and weekday names correctly declined for Ukrainian.
-
Design
Guardrails in the editor
Seven filters keep page-specific blocks on their pages, and service templates place prices and treatments in fixed slots.
-
Development
Accessibility built in
Accessibility Checker covers services and products, focus styles are visible, and statement drafts exist in three languages. A visitor toolbar plugin was tested and dropped.
-
Content
AI images labelled
Eight blocks can show an EU AI Act disclosure badge, and every image in the media library has its own AI-generated flag.
-
Management
Deploys from two repositories
Both repositories build and deploy through GitHub Actions on main, the plugin adds a CI build check on dev, and 29 pull requests are merged.
What you can expect
A platform that keeps earning its place
We build for the things that last — a platform that is clearer to navigate, more credible to every visitor and genuinely easier for your team to run and grow.
-
Easier to choose
Clear categories, filters and prices let visitors find the right offer themselves instead of writing to ask where to begin.
-
Credible to every visitor
A site that looks and reads like the quality behind it — for first-time visitors and long-standing customers alike.
-
Effortless to keep current
Your team updates products, content and news itself — no developer ticket, no waiting in a queue.
-
Built to grow
New products, categories and languages slot in as the business expands — without a rebuild.
Built on a clear goal
We agree the goals that matter up front and build toward them together — then stay on as a partner after launch to keep the platform sharp as the business grows.
In their words
What the client says
An update proves itself in daily use — this is how the studio sees it so far.
-
Our prices now live in one place and show up the same way in German, English and Ukrainian. Vouchers and invoices run from settings we no longer have to click together.
Working with
Start a project
Tell us about your project
We will respond as soon as possible with clear next steps — no obligations.
- We respond as soon as possible
- Clear scope, timelines, and estimate
- Complete confidentiality of your data