Shopify · Cosmetics

Hadat Cosmetics

A five-language Shopify store, built from a Figma design

Hadat Cosmetics sells hair, body and hand care in English, Latvian, German, French and Italian. The new Shopify store replaced an old WooCommerce site. I wrote the theme from the designer's Figma file, in a two-person team where my colleague ran the translation pipeline and analytics.

Role: Theme developer in a team of two developers and a designer
Period: May - Jul 2026
Stack: Shopify
Liquid
JavaScript
Shopify Flow
Customer Privacy API
Judge.me
Live site: hadat.com(opens in a new tab)

Hadat Cosmetics: homepage on a desktop screen

languages: EN, LV, DE, FR, IT: 5
texts covered in the Latvian re-audit: 99%
pages crawled by my audit tooling: 70
reviews moved from the old store: 26 / 26

Context

The brand moved from a WordPress and WooCommerce site to Shopify, on a new domain, with the catalogue and reviews carried over.

The theme started from Shopify's Skeleton theme, so every section, snippet and interaction was written for this store rather than adapted from a ready-made theme.

What I did

The theme from Figma: header with a mega menu and promo banners, product, collection and content pages
Hair quiz engine with a progress bar, a retake button and a Shopify Flow webhook for the results
Cart drawer with a free-shipping progress bar, and a sticky add-to-cart bar
Background videos that load only when they scroll into view (IntersectionObserver)
Judge.me reviews rendered on the server, plus a live rating line on the homepage
Restyled cookie banner on Shopify's Customer Privacy API
Localization audit tooling: a crawl of the Latvian store and a script that reports untranslated texts

Hard parts and how I solved them

Problem
Newsletter sign-ups sent with fetch skipped Shopify's invisible reCAPTCHA, so they were never saved.
Solution
The form now submits into a hidden iframe. The thank-you message appears only after Shopify confirms the sign-up, and when Shopify asks for a challenge the page falls back to a normal submit.
Problem
The Judge.me widget started from JavaScript did not load reviews on product pages.
Solution
Reviews render on the server from metafields, so they are in the HTML on first load.
Problem
overflow-x: hidden on a wrapper silently broke every position: sticky element below it.
Solution
Replaced it with overflow-x: clip, which stops horizontal scroll without creating a scroll container.