Portfolio — i18n Refactoring

▲ Problem

Das Theme war komplett auf Deutsch hardcoded — kein einziger String war übersetzbar. Jede Shopify-Übersetzungs-App scheiterte, weil die Texte direkt im Liquid-Code steckten, nicht in Locale-Dateien.

✓ Lösung

3-Layer i18n-Architektur — Locale-Keys für UI-Strings, translatable Section-Settings für Marketing-Texte, Metafield-Definitionen als dynamische Labelquelle. Kein Hardcoding mehr, keine Code-Änderung pro Sprache.

Beispiel aus dem Code

Liquid → CSS: Sprachabhängiges SALE-Badge

CSS kann keine Sprachlogik. Die Lösung: Liquid setzt eine globale CSS Custom Property — CSS konsumiert sie. Zwei Systeme, eine Variable.

Vorhercomponent-card.css

/* Hardcoded — funktioniert nur auf DE */
.product-card:has(.oldprice)::before {
  content: "SALE";
  color: "#fff";
}

Nachhertheme.liquid + card.css

// 1. Liquid setzt die Variable global
:root {
  --sale-badge-label:
    "{{ 'products.product.on_sale' | t }}";
}

// 2. CSS konsumiert sie — sprachunabhängig
.product-card:has(.oldprice)::before {
  content: var(--sale-badge-label, "Sale");
}

Warum das zählt: CSS hat keine Sprachlogik — dieser Bridge-Ansatz löst ein systemisches Problem elegant ohne JS-Overhead. Das SALE-Badge übersetzt sich jetzt automatisch in jede Shopify Markets-Sprache.

Ergebnis

200+

übersetzte Strings
über 51 Locale-Dateien

Sections komplett
refactored

Hardcoded Strings
im finalen Theme