Für Erik Fedko · TYPE. · Shop-Entwurf → Shopify · Stand 7.10.2026

Shopify-Bauplan

Jeder Abschnitt des Shop-Entwurfs mit Aufnahme am Desktop und am Handy, den gemessenen Design-Werten, dem passenden CSS, allen Texten und Bildern und dem Weg in Shopify. Startseite, Produktseite, Über uns und Journal.

Ergebnis der Prüfung

Ja, 1:1 umsetzbar

Im bestehenden Theme Impulse, ohne Neubau. Bedingung: Die Gestaltung wird als eigene Abschnitte mit dem CSS des Entwurfs übernommen. Über die Einstellungen von Impulse allein entsteht nur eine ähnliche Seite.

Abschnitte entstehen als eigener Abschnitt mit dem CSS des Entwurfs und werden damit 1:1.

Abschnitte nutzen einen Baustein von Impulse oder Judge.me, dessen Optik per CSS angeglichen wird. Kleine Abweichungen hängen am fremden HTML.

Abschnitte insgesamt. Für 1:1 braucht jeder davon eigenes CSS oder einen eigenen Abschnitt, 17 zusätzlich Einstellungen im Theme-Editor, 13 Daten in Metafeldern.

1:1 mit eigenem AbschnittImpulse-Baustein, angeglichenEinstellungDatenCode

Was im Entwurf nur gezeigt wird, liefert Shopify echt: Warenkorb, Varianten, Bestand, Bewertungen und Kasse. Die Aufnahmen stammen aus dem Entwurf, alle Werte sind im Browser gemessen. Die Bild-Links öffnen die Datei aus dem Entwurf zum Speichern.

Entwurf öffnen shop.css shop.js

layout/theme.liquid, Kopf- und Fußbereich

Grundlagen

Was auf allen Seiten gleich ist: Leisten, Kopf, Produktkarte, Crew-Anmeldung, Popup und Fuß. Im Entwurf ansehen

→Designsystem
→Baukasten für neue Drops
01Ankündigungsleiste
02Kopfzeile
03Produktkarte mit Merken und Schnellkauf
04Crew-Anmeldung als Glas-Block
05Crew-Popup im Glas-Look
06Fußzeile

Designsystem

Diese Werte gelten überall. Sie stehen im Entwurf als Variablen am Anfang von shop.css und gehören beim Übertragen in eine eigene Datei, etwa assets/type-entwurf.css, die nach dem CSS von Impulse geladen wird.

Farben

#000000Schrift, Knöpfe, Linien stark--ink
#6B6B6BNebentext, Kicker--mute
#E6E6E6Linien--line
#F4F4F4Bildgrund der Karten--soft
#0F0F0FAnkündigungsleiste--bar
#FFFFFFSeitengrundbody

Abstände und Maße

Seitenrand: --gut: clamp(16px, 3.6vw, 56px)
Bildkante: --edge: clamp(12px, 1.6vw, 24px)
Abschnittsabstand: --sec: clamp(56px, 6.5vw, 112px)
Kopfhöhe: 76 px, unter 900 px 64 px
Umbrüche: (max-width: 699px) (56) · (min-width: 900px) (30) · (max-width: 899px) (18) · (hover: hover) (11) · (prefers-reduced-motion: reduce) (3) · @supports (height:100lvh) (2) · (min-width: 700px) (1) · (min-width: 600px) (1)

Schrift

Outfit von Google Fonts (300, 400, 500, 600, 700) nutzt der Live-Shop bereits. Überschriften stehen in Helvetica Neue aus dem System, ohne eigene Webschrift.

Stufe	Schrift	Werte
Fließtext	Outfit 300	clamp(15.5px, 1.05vw, 17px) · Zeile 1,6 · Laufweite .02em
Kicker	Outfit 500, Versalien	11,5 px · Laufweite .22em · Grau #6B6B6B
Überschrift	Helvetica Neue 400, Versalien	clamp(1.45rem, 2.2vw, 2rem) · Zeile 1,06
Überschrift groß	Helvetica Neue 400, Versalien	clamp(1.9rem, 3.6vw, 3.4rem) · Zeile 1
Seitentitel Über uns	Helvetica Neue 400, Versalien	clamp(2.4rem, 5.4vw, 5.6rem) · Zeile .94 · max. 14 Zeichen breit
Titel Journal	Helvetica Neue 400, Versalien	clamp(2.4rem, 6.4vw, 6.4rem) · Zeile .95
Titel Vor Ort	Helvetica Neue 400, Versalien	clamp(2.3rem, 4.4vw, 4.6rem) · Zeile .93
Produkttitel	Helvetica Neue 400, Versalien	clamp(1.6rem, 2.4vw, 2.2rem) · Zeile 1,08
Zwischentitel	Outfit 500, Versalien	.95rem · Laufweite .12em
Textlink	Outfit 500, Versalien, unterstrichen	12,5 px · Laufweite .14em · Unterstrich 5 px Abstand
Zusatz neben Überschrift	Outfit 500, Versalien	11,5 px · Laufweite .2em · Strich links #CFCFCF
Knopf Glas im Inhalt	Outfit 500, normal geschrieben	15 px · Höhe 50 px · Kapsel, Symbol links; dunkel als Hauptknopf, hell als Nebenknopf
Knopf Glas (Startbild)	Outfit 500, normal geschrieben	15 px · Höhe 50 px (Handy 48) · Kapsel
Kaufknopf Glas (Produktseite)	Outfit 500, normal geschrieben	16 px · Höhe 56 px, in der Kaufleiste 48 px · Kapsel mit Taschensymbol
Größenwahl	Outfit 400, gewählt 500	15 px (Handy 14) · Höhe 44 px (Handy 40) · Segmentleiste
Preis Produktseite	Outfit 400	22 px

Glas

Alle Glasflächen bauen auf derselben Technik auf: halbtransparente Fläche, backdrop-filter für Unschärfe und Sättigung, eine Lichtkante als Pseudo-Element mit 1 px Innenabstand und Maske (mask-composite: exclude) und bei der Kopfzeile ein Korn aus SVG-Rauschen (fractalNoise, baseFrequency .85, 3 Oktaven, entsättigt, Kachel 180 px). Safari braucht zusätzlich -webkit-backdrop-filter.

Fläche	Füllung	Unschärfe	Kante und Schatten
Kopfzeile beim Scrollen	Weiß 72 %	blur(18px) saturate(1.6)	Korn 16 %, Linie unten Schwarz 8 %
Startbild · Dock	Verlauf Weiß 18 % → 6 %	blur(22px) saturate(1.8)	Lichtkante 1 px, Schatten 0 20px 50px Schwarz 28 %
Startbild · Hauptknopf	Verlauf Weiß 95 % → Grau 88 %	–	Kante 1,5 px mit Farbreflex Orange und Blau unten links (243–252°)
Kacheln · Beschriftung	Verlauf Weiß 22 % → 7 %	blur(18px) saturate(1.8)	Lichtkante 1 px, Glanz oben, Schatten 0 4px 14px, Hover heller, Pfeil rückt 3 px
Produktkarte · Dock	Verlauf Weiß 34 % → 14 %	blur(20px) saturate(2) brightness(1.04)	Lichtkante oben hell, unten dunkel, Glanz obere Hälfte, Schatten 0 2px 8px
Produktkarte · „+“	Weiß 66 %, Hover Schwarz 90 %	–	Glanz oben, Übergang .25 s
Größenleiste	Verlauf Weiß 52 % → 32 %	blur(20px) saturate(2) brightness(1.04)	Radius 20 px, Größen als Glaskapseln Weiß 50 %
Kaufbereich · Größen	Leiste Grau 5 % → 3 %, gewählte Größe Weiß 100 % → 88 %	–	Innenschatten der Leiste, Kapsel mit Licht oben und Schatten 0 4px 12px
Knöpfe im Inhalt · hell	Verlauf Weiß 100 % → Grau 93 %	–	Kante 1,5 px grau mit Farbreflex unten links, Glanz oben, Schatten 0 8px 20px; auf dunklem Grund ebenso
Kaufbereich · Kaufknopf	Verlauf Dunkelgrau 97 % → Schwarz 98 %	–	Kante 1,5 px mit Farbreflex unten links, Glanz obere Hälfte, Schatten 0 12px 28px, Hover heller
Kaufleiste Handy	Weiß 82 %	blur(16px)	Linie oben, Abstand für die Home-Leiste, Knopf wie im Kaufbereich
Crew-Anmeldung · Glaskarte	Verlauf Weiß 16 % → 5 % über dem Crew-Foto	blur(26px) saturate(1.8)	Lichtkante 1 px, Radius 24 px, Schatten 0 20px 50px; Vorteile als Chips Weiß 10 % mit Ring 22 %
Crew-Popup · Glaskarte	Verlauf Weiß 18 % → 6 % über dem Foto	blur(26px) saturate(1.8)	Lichtkante 1 px, Radius 20 px; Fenster 28 px Radius; Seite dahinter Schwarz 38 % und blur(10px)
Crew-Popup · Formular	Kapsel Weiß 12 %, Knopf Verlauf Weiß 96 % → Grau 90 %	über die Karte	Ring innen Weiß 28 %, im Fokus 70 %

Beim Übertragen beachten

Klassennamen mit einem Präfix versehen, etwa .tp-hero statt .hero. Impulse nutzt teils dieselben Namen. Im Entwurf selbst ist das schon einmal passiert (.qa).
Glas-Knöpfe haben ihren Text in einem eigenen span. Allgemeine span-Regeln der Umgebung dürfen ihn nicht färben (.lqb > span{color:inherit}), und der Glanz wird an der Kapselform abgeschnitten (overflow:hidden). Beides ist im Entwurf schon einmal schiefgegangen.
Jeder Abschnitt unten hat sein eigenes CSS zum Kopieren. Regeln, die mehrere Abschnitte teilen, stehen beim ersten Abschnitt, die anderen verweisen darauf.
Das Basis-CSS gilt seitenweit. Es enthält Zurücksetzungen, die in Impulse nicht gebraucht werden. Davon nur die Variablen und die Textstufen übernehmen, nicht *, body und die Zurücksetzungen.
Die Verhalten stehen in shop.js, nach Kommentaren gegliedert. Sie gehören in assets/type-entwurf.js.

Basis-CSS · 38 Regeln

:root { --f: 'Outfit',system-ui,sans-serif; --h: 'Helvetica Neue',Helvetica,Arial,sans-serif; --mono: 'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; --ink: #000; --mute: #6b6b6b; --line: #e6e6e6; --soft: #f4f4f4; --bar: #0f0f0f; --gut: clamp(16px,3.6vw,56px); --edge: clamp(12px,1.6vw,24px); --sec: clamp(56px,6.5vw,112px); --hdh: 76px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 899px) {
  :root { --hdh: 64px; }
}
*, ::before, ::after { box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdh) + 12px); }
body { margin: 0px; background: rgb(255, 255, 255); color: var(--ink); font-family: var(--f); font-weight: 300; font-size: clamp(15.5px, 1.05vw, 17px); line-height: 1.6; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0px; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentcolor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg .f { fill: currentcolor; stroke: none; }
:focus-visible { outline: rgb(0, 0, 0) solid 2px; outline-offset: 2px; }
.kick { font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.kick--w { color: rgba(255, 255, 255, 0.85); }
.h2 { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: 0.005em; line-height: 1.06; }
.h2--xl { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1; }
.h2--w { color: rgb(255, 255, 255); }
.lnk { font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-underline-offset: 5px; }
.ph { font-family: var(--mono); font-size: 0.86em; letter-spacing: 0px; color: rgb(154, 154, 154); font-weight: 400; }
.sec { max-width: 1680px; margin: 0px auto; padding: var(--sec) var(--gut) 0; }
.sec__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.pd { max-width: 1680px; margin: 0px auto; padding: 16px var(--gut) 0; display: grid; grid-template-columns: minmax(0px, 1fr); gap: 28px; }
@media (min-width: 900px) {
  .pd { grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
}
.art { padding-bottom: var(--sec); }
:root { --edge: clamp(14px,2vw,32px); }
.sec, .sec--full { max-width: none; margin: 0px; padding: var(--sec) var(--edge) 0; }
.pd { max-width: none; padding: 12px 0px 0px; }
@media (min-width: 900px) {
  .pd { grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); gap: clamp(28px, 3.4vw, 56px); padding-right: var(--edge); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.lqb { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0px 28px; border: 0px; border-radius: 999px; cursor: pointer; font-family: var(--f); font-weight: 500; font-size: 16px; letter-spacing: 0.01em; color: rgb(255, 255, 255); text-decoration: none; background: linear-gradient(rgba(66, 66, 70, 0.97) 0%, rgba(24, 24, 26, 0.97) 52%, rgba(8, 8, 10, 0.98) 100%); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px inset, rgba(0, 0, 0, 0.35) 0px -2px 6px inset, rgba(0, 0, 0, 0.14) 0px 2px 6px, rgba(0, 0, 0, 0.2) 0px 12px 28px; transition: transform 0.15s, filter 0.25s; }
.lqb svg { width: 19px; height: 19px; flex: 0 0 auto; stroke-width: 1.7; }
.lqb::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(rgba(255, 255, 255, 0.7) 0deg, rgba(255, 255, 255, 0.35) 60deg, rgba(255, 255, 255, 0.08) 130deg, rgba(255, 255, 255, 0.05) 200deg, rgba(255, 255, 255, 0.12) 232deg, rgba(255, 150, 80, 0.65) 243deg, rgba(110, 165, 255, 0.7) 252deg, rgba(255, 255, 255, 0.3) 268deg, rgba(255, 255, 255, 0.55) 320deg, rgba(255, 255, 255, 0.7) 360deg); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.lqb::after { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 48%; z-index: -1; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); pointer-events: none; }
@media (hover: hover) {
  .lqb:hover { filter: brightness(1.18); }
}
.lqb:active { transform: scale(0.985); }
.lqb { overflow: hidden; }
.lqb > span { color: inherit; font-size: inherit; letter-spacing: inherit; flex: initial; }

Nicht übernommen werden 90 unbenutzte Regeln aus früheren Entwurfsständen und 13 Regeln der Entwurfsleiste und der Demo-Meldungen.

Metafelder und Metaobjekte

Unter Einstellungen → Benutzerdefinierte Daten anlegen. Alles, was je Produkt oder Artikel anders ist, kommt hierher. So bleibt eine Vorlage für alle Produkte, und gepflegt wird ohne Code.

Metafeld	Typ	Wo	Beispiel
type.zeile_oben	Einzeiliger Text	Kaufbereich, Zeile über dem Titel	TYPE SHIT · 150 Stück pro Teil
type.story	Mehrzeiliger Text	Kaufbereich, Satz unter dem Preis	Entworfen von Mark Westmoreland, früher Levi's und Evisu. …
type.passform	Einzeiliger Text	Kaufbereich, unter den Größen	Weiter Schnitt · Model 175 cm trägt M
type.karten_zeile	Einzeiliger Text	Produktkarte, unter dem Preis	13 oz Denim · Mark Westmoreland
type.schnitt_stoff	JSON	Reiter „Schnitt und Stoff“	{ "Schnitt": "Eigener Schnitt, Relaxed / Baggy", … }
type.pflege	Mehrzeiliger Text	Reiter „Pflege“	wie auf dem Etikett
type.geschichte_titel	Einzeiliger Text	Abschnitt „Geschichte“	Die robusteste Hose, die wir gemacht haben
type.geschichte_text	Mehrzeiliger Text	Abschnitt „Geschichte“	Mark Westmoreland hat früher …
type.geschichte_bilder	Datei (Liste)	Abschnitt „Geschichte“	macro-stick.jpg, macro-patch.jpg
type.masse	JSON	So sitzt sie, Maßtabelle	{ "M": { "Bund": "__", … } }
type.passform_beispiele	Metaobjekt (Liste): Passform-Beispiel	So sitzt sie, Beispiele	Model · 175 cm · M
type.complete_fit	Produkt (Liste)	Complete the fit	Hoodie, Cap, Tee Rari, Jorts
type.complete_fit_text	Einzeiliger Text	Complete the fit	Der Look vom Foto: …
type.unterzeile (Artikel)	Mehrzeiliger Text	Journal, Titelbild	Drei Jahre, fünf Länder, 23 Minuten. …
type.byline (Artikel)	Einzeiliger Text	Journal, Titelbild	Von Erik Fedko · 6 Min. Lesezeit · …

Metaobjekt	Felder	Genutzt in
Termin	Datum (Text, z. B. „seit 13.09.“ oder „TBA“), Name, Ort oder Art, Status (Geöffnet / Stand)	Startseite → Parkshop, Über uns → Vor Ort
Passform-Beispiel	Bild, Name, Körpergröße in cm, getragene Größe	Produktseite → So sitzt sie
Kapitel (optional)	Startsekunde, Zeitmarke, Titel, Text, Bild, Produkt, Notiz	Journal → Kapitel, falls nicht als Abschnitts-Blöcke

Baukasten für neue Drops

Ja, ein neuer Drop lässt sich wie mit einer Vorlage bestücken, ohne Code. Voraussetzung: Die eigenen Abschnitte werden mit Einstellungen und Blöcken angelegt, also mit {% schema %}, Feldern für Bilder, Texte, Links, Produkte und Film und mit presets. Dann tauchen sie im Theme-Editor unter „Abschnitt hinzufügen“ auf. Dort lassen sich Bilder und Texte tauschen, Abschnitte per Ziehen umsortieren, ausblenden oder neu einsetzen, auch auf anderen Seiten. Code braucht es nur für neue Arten von Abschnitten oder eine neue Gestaltung.

Abschnitt	Einstellungen im Editor	Wiederholbare Blöcke
type-hero · Startbild	Bild Desktop, Bild Handy, Schriftzug, Bildausschnitt	Knopf (Text, Link, hell oder klar)
Ausgewählte Kollektion (Impulse) mit Zusatz	Kollektion, Anzahl, Zusatz neben der Überschrift, Notiz rechts, Link	–
type-kacheln	–	Kachel (Bild, Titel, Link)
type-film	Kicker, Überschrift, Text, YouTube-Link, Vorschaubild, Linktext	Kapitel-Chip (Zeit, Titel, Sprungziel)
type-band	Kicker, Überschrift, Text, Knopf, Bildseite links oder rechts, Terminliste an oder aus	Bild (eins bis drei)
type-kapitel	Kicker, Überschrift, Text	Kapitel (Startsekunde, Zeitmarke, Titel, Text, Bild, Produkt, Notiz)
type-designer	Kicker, Überschrift, Text, zwei Bilder, Produkt	Frage (Frage, Antwort), Knopf
type-about-hero · type-design	Kicker, Überschrift, Text, Bild, Bildunterschrift	Fakt (Bezeichnung, Wert) bzw. Punkt (Titel, Text)
type-laufband	Tempo	Begriff
type-prozess	Kicker, Überschrift, Schlusssatz	Schritt (Nummer, Titel, Text, Bild)
type-zahlen	–	Zahl (Wert, zwei Zeilen Erklärung)
type-crew · type-bildpaar	Texte, Bildunterschrift	Bild
type-fertigung	Kicker, Überschrift, Text, Bild	Tabellenzeile (Teil, Schnitt und Stoff, Gewicht, Herkunft)
type-vor-ort	Bild, Kicker, Saison, Überschrift, Text, Knopf	– (Termine aus den Metaobjekten „Termin“)
type-popup	Bild Desktop, Bild Handy, Kicker, Überschrift, Text, Knopftext, Scrolltiefe	–
type-crew-anmeldung	Bild Desktop, Bild Handy, Kicker, Überschrift, Text, Knopftext	Vorteil (Text)

Der nächste Drop in sechs Schritten

Theme duplizieren und den Drop in der Kopie vorbereiten. Zum Start wird die Kopie veröffentlicht, die alte Fassung bleibt als Rückweg.
Kollektion für den Drop anlegen, die Produkte mit Bildern, Varianten und Metafeldern füllen. Die Produktseiten sehen dann automatisch aus wie alle anderen.
Startseite: im Startbild Bilder und Schriftzug tauschen, in „Im Film getragen“ und „Kollektion“ die neue Kollektion wählen, Zusatz wie die Stückzahl anpassen.
Kacheln, Bänder, Film: Bilder, Texte und YouTube-Link tauschen, Kapitel-Blöcke neu setzen, Abschnitte per Ziehen umsortieren.
Journal: neuen Artikel anlegen. Für eine große Drop-Geschichte die Vorlage „Lookbook“ duplizieren (etwa article.lookbook-drop2), Kapitel und Bilder darin setzen und dem Artikel zuweisen. Inhalte in Abschnitts-Blöcken gelten für alle Artikel mit derselben Vorlage.
Termine als Metaobjekte pflegen, Popup-Bild tauschen, Vorschau am Handy prüfen, veröffentlichen.

Vorgehen

Onlineshop → Themes → beim Live-Theme „…“ → Duplizieren. Gebaut wird nur in der Kopie, der Shop läuft unverändert weiter.
Ohne Zugang zum Shop: Das Theme als Datei exportieren. Die bearbeitete Fassung kommt als neues, unveröffentlichtes Theme zurück.
Reihenfolge wie im Dossier: Produktseite und Startseite zuerst, dann Über uns und Journal.
Prüfen per Vorschau-Link am Handy und am Desktop, mit echten Produkten, echtem Warenkorb und echten Bewertungen.
Veröffentlichen. Die bisherige Fassung bleibt in der Theme-Bibliothek und lässt sich zurückholen.

Ankündigungsleiste

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 43 px · Handy 390 × 34 px
Innenabstand: 9px 28.8px 9px 28.8px · Handy 8px 12px 8px 12px
Raster: 356.6px 637.2px 356.6px · Abstand 16px
Hintergrund: #0F0F0F

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
pGratis Versand ab 80 € · jetzt auc	Outfit	12.5px / 11.5px	700	2.3px	20px	Versalien	#FFFFFF
.ann__rDeutschland (EUR €) · DE / EN	Outfit	12.5px	300	0.5px	20px		#D6D6D6
bDE	Outfit	12.5px	600	0.5px	20px		#FFFFFF

Inhalte

Text DesktopGratis Versand ab 80 € · jetzt auch nach Österreich und in die Schweiz
Text HandyGratis Versand ab 80 € · auch AT und CH
RechtsDeutschland (EUR €) · DE / EN

In Shopify

Schnell, aber nur ähnlich: Ankündigung im Kopfbereich von Impulse eintragen, Social-Links in den Theme-Einstellungen.

So wird es 1:1

Schwarze Leiste, Text mittig in Versalien mit weiter Laufweite, links die Social-Symbole, rechts Land und Sprache. CSS .ann auf die Ankündigungsleiste von Impulse übertragen.
Für das Handy einen zweiten, kürzeren Text anlegen und per CSS nur unter 700 px zeigen.

Vor dem Livegang klären

„Gratis Versand ab 80 €“ und der Versand nach Österreich und in die Schweiz sind Vorschläge aus dem Dossier. Erst zeigen, wenn die Versandeinstellungen so umgestellt sind.
„EN“ erst zeigen, wenn es die englische Shopversion gibt.

CSS für diesen Abschnitt · 13 Regeln

.ann { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: var(--bar); color: rgb(255, 255, 255); padding: 9px var(--gut); }
.ann p { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }
.ann__soc { display: flex; gap: 12px; }
.ann__soc svg { width: 16px; height: 16px; }
.ann__r { justify-self: end; font-size: 12.5px; letter-spacing: 0.04em; color: rgb(214, 214, 214); }
.ann__r b { color: rgb(255, 255, 255); font-weight: 600; }
.ann__s { display: none; }
.ann { padding-inline: var(--edge); }
@media (max-width: 699px) {
  .ann { grid-template-columns: 1fr; padding: 8px 12px; }
  .ann__soc, .ann__r { display: none; }
  .ann__l { display: none; }
  .ann__s { display: inline; }
  .ann p { letter-spacing: 0.12em; font-size: 11.5px; }
}

Kopfzeile

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 76 px · Handy 390 × 64 px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
aLatest Drop	Outfit	14.5px	400	0.9px	23.2px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.hd__cnt	–	9px	–	#FFFFFF
.hd__nav	blur(18px)	0	–	#FFFFFF · 96 %

Inhalte

MenüLatest Drop · Pants · Tops · Accessories · Journal · TYPE.?
SymboleKonto · Suche · Warenkorb mit Zähler

Bilder

logo.pngTYPE.Feld 1.92 · fill · Datei 600×313

In Shopify

Schnell, aber nur ähnlich: Kopf von Impulse: mitlaufend und auf der Startseite durchsichtig über dem Bild. Läuft im Live-Shop schon.

So wird es 1:1

Sobald der Kopf mitläuft, wird er zu Glas: Weiß mit 72 % Deckkraft, Unschärfe 18 px, Sättigung 1,6, darüber feines Korn mit 16 % Deckkraft. Die Aufnahme zeigt diesen Zustand.
Die Regeln .hd::before (Glas), .hd::after (Korn) und .hd.is-scrolled auf die Klassen der Sticky-Hülle von Impulse umschreiben.
Auf der Startseite ganz oben bleibt der Kopf durchsichtig, Logo und Symbole sind weiß. Ab 24 px Scrollweg wechselt er zu Glas.

Verhalten aus shop.js

Kopfzeile: Glas, sobald sie mitläuft (Klasse is-scrolled ab 24 px)
Misst die Höhe der Leisten über dem Kopf als --above für das Startbild

CSS für diesen Abschnitt · 31 Regeln

.hd { position: sticky; top: 0px; z-index: 40; color: rgb(0, 0, 0); isolation: isolate; }
.hd::before { content: ""; position: absolute; inset: 0px; z-index: -2; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid rgba(0, 0, 0, 0.08); transition: opacity 0.3s; }
.hd::after { content: ""; position: absolute; inset: 0px; z-index: -1; background-image: var(--grain); background-size: 180px auto; opacity: 0.16; mix-blend-mode: multiply; pointer-events: none; transition: opacity 0.3s; }
.hd__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: var(--hdh); padding: 0 var(--gut); }
.hd__logo img { height: 44px; width: auto; transition: filter 0.3s; }
.hd__nav { display: flex; justify-content: center; gap: clamp(14px, 2vw, 30px); }
.hd__nav a { text-decoration: none; text-transform: uppercase; font-size: 14.5px; font-weight: 400; letter-spacing: 0.06em; padding: 6px 0px; border-bottom: 1px solid transparent; }
.hd__nav a:hover, .hd__nav a.on { border-bottom-color: currentcolor; }
.hd__ic { display: flex; gap: 18px; align-items: center; }
.hd__ic a { position: relative; display: inline-flex; }
.hd__ic svg { width: 23px; height: 23px; }
.hd__cnt { position: absolute; top: -6px; right: -9px; min-width: 17px; height: 17px; border-radius: 9px; background: rgb(0, 0, 0); color: rgb(255, 255, 255); font-size: 10px; font-weight: 600; display: grid; place-items: center; letter-spacing: 0px; }
.hd__burger { display: none; background: none; border: 0px; padding: 0px; }
.hd--over:not(.is-scrolled) { color: rgb(255, 255, 255); }
.hd--over:not(.is-scrolled)::before { opacity: 0; }
.hd--over:not(.is-scrolled)::after { opacity: 0; }
.hd--over:not(.is-scrolled) .hd__logo img { filter: invert(1); }
.hd--over:not(.is-scrolled) .hd__cnt { background: rgb(255, 255, 255); color: rgb(0, 0, 0); }
.hd.is-scrolled::before { background: rgba(255, 255, 255, 0.72); }
@media (max-width: 899px) {
  .hd__in { gap: 14px; }
  .hd__burger { display: inline-flex; }
  .hd__logo { justify-self: start; }
  .hd__logo img { height: 32px; }
  .hd__nav { display: none; position: absolute; left: 0px; right: 0px; top: 100%; flex-direction: column; gap: 0px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px); color: rgb(0, 0, 0); border-bottom: 1px solid var(--line); padding: 6px var(--gut) 14px; }
  .hd__nav a { padding: 12px 0px; border-bottom: 1px solid var(--line); }
  .hd.open .hd__nav { display: flex; }
  .hd.open { color: rgb(0, 0, 0); }
  .hd.open::before { opacity: 1; }
  .hd.open .hd__logo img { filter: none; }
  .hide-s { display: none !important; }
}
.hd__in { padding: 0 var(--edge); }

Produktkarte mit Merken und Schnellkauf

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 335 × 504 px · Handy 176 × 343 px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.pc__tDouble Knee Jeans – Brickwall	Outfit	13.5px	400	0.9px	18.2px	Versalien	#000000
.pc__p€115,00	Outfit	15px	300	0.3px	24px		#000000
.pc__m13 oz Denim · Mark Westmoreland	Outfit	12.5px	300	0.3px	20px		#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pq	blur(20px) saturate(2) brightness(1.04)	999px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pq__b	–	50%	–	–
.pq__b	–	50%	rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px	#FFFFFF · 66 %
.pqs	blur(20px) saturate(2) brightness(1.04)	20px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pqs__x	–	50%	–	–
.pqs__s	–	999px	rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px	#FFFFFF · 50 %

Inhalte

PlaketteNur noch wenige
GrößenleisteGröße wählen
Größen im EntwurfS · M · L · XL
Meldung nach dem HinzufügenDouble Knee Jeans – Brickwall in M liegt im Einkaufswagen
Meldung beim MerkenDouble Knee Jeans – Brickwall gemerkt
Kartenzeile Jeans13 oz Denim · Mark Westmoreland
Kartenzeile ChinoIm Film ab 9:00
Kartenzeile LongsleeveIm Film ab 2:05
Kartenzeile JerseyIm Film ab 13:53
Kartenzeile Hoodie Two Tone320 gsm
Kartenzeile Hoodie Waving Arms280 gsm
Kartenzeile Jorts13 oz Denim
Kartenzeile ShirtBoxy Loose
Kartenzeile Tee Striped200 gsm
Kartenzeile Tee RariFerrari gestickt
Kartenzeile Tee Waving Arms200 gsm
Kartenzeile CapGestickt

Bilder

p-jeans.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125

In Shopify

Schnell, aber nur ähnlich: Produktkachel von Impulse ohne Dock. Ein Schnellkauf von Impulse öffnet ein Fenster statt der Größenleiste.

So wird es 1:1

Im Snippet der Produktkachel von Impulse das Dock ins Bild setzen: unten rechts, 12 px vom Rand (Handy 10 px), zwei runde Knöpfe mit 30 px. Links Lesezeichen (Merken), rechts „+“.
„+“ ist weißes Glas mit dunklem Plus. Mit der Maus darüber, beim Antippen und nach dem Hinzufügen wird es schwarz.
„+“ bei mehreren Größen: Glasleiste „Größe wählen“ mit den Varianten öffnen, ausverkaufte ausgrauen. Ein Tipp auf die Größe legt per Ajax-Warenkorb (/cart/add.js mit der Varianten-ID) in den Warenkorb und öffnet oder aktualisiert die Warenkorb-Schublade von Impulse.
Produkte mit nur einer Variante (Caps) direkt hinzufügen.
Merken speichert der Entwurf im Browser (localStorage). Über Geräte hinweg geht das nur mit einer Wunschlisten-App oder dem Kundenkonto.
Kartenzeile unter dem Preis aus dem Metafeld type.karten_zeile, die Plakette aus einem Produkt-Tag oder dem Restbestand.
Schatten höchstens 10 px weit, sonst schneidet der Bildrand ihn als Kante ab.

Verhalten aus shop.js

Produktkarten: Merken und Schnellkauf (Größenleiste, Warenkorb, Haken nach dem Hinzufügen, Escape und Klick daneben schließen)

CSS für diesen Abschnitt · 39 Regeln

.pc { display: flex; flex-direction: column; gap: 5px; text-decoration: none; }
.pc__img { position: relative; display: block; background: var(--soft); aspect-ratio: 4 / 5; overflow: hidden; }
.pc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.pc:hover .pc__img img { transform: scale(1.035); }
.pc__t { margin-top: 8px; font-size: 13.5px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.35; }
.pc__p { font-size: 15px; }
.pc__m { font-size: 12.5px; color: var(--mute); }
.pc a { color: inherit; text-decoration: none; }
.pc__ln { display: block; width: 100%; height: 100%; }
.pq, .pqs { isolation: isolate; backdrop-filter: blur(20px) saturate(2) brightness(1.04); }
.pq::before, .pqs::before, .pq__add::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 40%, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.16)); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.pq::after, .pqs::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 50%; z-index: -1; border-radius: inherit; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
.pq { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 1px 2px; transition: opacity 0.2s, transform 0.2s; }
.pq__b { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0px; border: 0px; border-radius: 50%; background: transparent; color: rgb(21, 21, 21); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, transform 0.15s; }
.pq__b::after { content: ""; position: absolute; inset: -7px -2px; }
.pq__b svg { grid-area: 1 / 1; width: 15px; height: 15px; stroke-width: 1.8; transition: opacity 0.2s, transform 0.2s; }
@media (hover: hover) {
  .pq__b:hover { background: rgba(255, 255, 255, 0.45); }
}
.pq__b:active { transform: scale(0.9); }
.pq__save[aria-pressed="true"] svg { fill: currentcolor; }
.pq__add { isolation: isolate; color: rgb(17, 17, 17); background-color: rgba(255, 255, 255, 0.66); background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%); box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 1px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s; }
.pq__add::before { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 45%, rgba(0, 0, 0, 0.08) 80%, rgba(0, 0, 0, 0.14)); }
.pq__add:active, .pq__add.ok { background-color: rgba(14, 14, 16, 0.9); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px inset, rgba(0, 0, 0, 0.25) 0px 2px 8px; }
@media (hover: hover) {
  .pq__add:hover { background-color: rgba(14, 14, 16, 0.9); color: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 1px inset, rgba(0, 0, 0, 0.25) 0px 2px 8px; }
}
.pq__add svg { stroke-width: 2.1; }
.pq__ok { opacity: 0; transform: scale(0.6); }
.pq__add.ok .pq__i { opacity: 0; transform: scale(0.6); }
.pq__add.ok .pq__ok { opacity: 1; transform: none; }
.pqs { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; border-radius: 20px; background: linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.32)); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 1px 2px; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.pc.qs-on .pqs { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }
.pc.qs-on .pq { opacity: 0; transform: scale(0.9); pointer-events: none; }
.pqs__l { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; padding: 0px 1px 0px 6px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(42, 42, 42); }
.pqs__x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0px; border: 0px; border-radius: 50%; background: transparent; color: rgb(21, 21, 21); cursor: pointer; }
.pqs__x svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .pqs__x:hover { background: rgba(255, 255, 255, 0.5); }
}
.pqs__s { flex: 1 1 0px; min-width: 0px; height: 32px; padding: 0px; border: 0px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px; font-family: var(--f); font-weight: 500; font-size: 12.5px; letter-spacing: 0.02em; color: rgb(17, 17, 17); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; }
@media (hover: hover) {
  .pqs__s:hover { background: rgba(17, 17, 17, 0.82); color: rgb(255, 255, 255); }
}
.pqs__s:active { transform: scale(0.94); }
@media (max-width: 699px) {
  .pq { right: 10px; bottom: 10px; }
  .pqs { left: 8px; right: 8px; bottom: 8px; padding: 6px; gap: 4px; border-radius: 18px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px, rgba(0, 0, 0, 0.06) 0px 1px 2px; }
}

Crew-Anmeldung als Glas-Block

1:1 mit eigenem AbschnittCodeEinstellung

Erledigt

Design

Fläche: Desktop 1440 × 648 px · Handy 390 × 640 px
Innenabstand: 43.2px 57.6px 43.2px 57.6px · Handy 10px 10px 10px 10px
Hintergrund: #0B0B0C

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickTYPE. Crew	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 85 %
.h2Der nächste Drop, 24 Stunden frühe	Helvetica Neue	40px / 27.2px	400	0.2px	40px	Versalien	#FFFFFF
.crew__pWerde Teil der Crew. Kein Spam.	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 86 %
liFrühzugang zu jedem Drop	Outfit	13px	300	0.3px	15.6px		#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.crew__in	blur(26px) saturate(1.8)	24px	rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.3) 0px 20px 50px 0px	Verlauf
li	–	999px	rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset	#FFFFFF · 10 %
.nl	–	999px	rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset	#FFFFFF · 12 %
button	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.08) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.22) 0px 4px 14px 0px	Verlauf
.crew__in	blur(26px) saturate(1.8)	18px	rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.3) 0px 20px 50px 0px	Verlauf

Inhalte

KickerTYPE. Crew
ÜberschriftDer nächste Drop, 24 Stunden früher
TextWerde Teil der Crew. Kein Spam.
Vorteil 1Frühzugang zu jedem Drop
Vorteil 2Neue Filme zuerst
Vorteil 3Termine am Stand
FeldDeine E-Mail-Adresse
KnopfAnmelden

Bilder

crew-wide.jpgdekorativFeld 2.22 · Ausschnitt 35% 45% · Datei 2000×1000 · nur Desktop
crew-tall.jpgdekorativFeld 0.61 · Ausschnitt 50% 30% · Datei 1100×1430 · nur Handy

In Shopify

Schnell, aber nur ähnlich: Newsletter-Abschnitt von Impulse (läuft im Live-Shop) über dem Fuß aller Seiten. Den Glas-Look gibt es dort nicht.

So wird es 1:1

Eigener Abschnitt type-crew-anmeldung über dem Fuß aller Seiten. Einstellungen: Bild Desktop, Bild Handy, Kicker, Überschrift, Text, Knopftext. Die Vorteile sind wiederholbare Blöcke.
Foto der Crew über die volle Breite, Block 72 % der Bildschirmhöhe (höchstens 680 px): am Desktop der Querstreifen crew-wide.jpg, am Handy das Hochformat crew-tall.jpg.
Rechts eine Glaskarte, 520 px breit: Weiß 16 % → 5 %, Unschärfe 26 px, Sättigung 1,8, Lichtkante 1 px, 24 px Rundung. Am Handy liegt sie unten über dem Bild.
Die Vorteile als kleine Glas-Chips, Feld und Knopf als Glas-Kapsel wie im Crew-Popup.
Anmeldungen an die Shopify-Kundenliste oder an Klaviyo geben.

Vor dem Livegang klären

„24 Stunden früher“ erst versprechen, wenn der Frühzugang technisch steht, etwa als Klaviyo-Ablauf mit Vorab-Link.

Das Foto ist annarogler-184 aus dem Lookbook (Premiere, die Crew in TYPE-Teilen), als Querstreifen 2000 × 1000 px und Hochformat 1100 × 1430 px geschnitten.

CSS für diesen Abschnitt · 25 Regeln

.crew { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--sec); min-height: min(72svh, 680px); display: flex; align-items: center; justify-content: flex-end; padding: clamp(20px, 3vw, 48px) clamp(16px, 4vw, 64px); background: rgb(11, 11, 12); }
.crew__bg, .crew__bg img { position: absolute; inset: 0px; width: 100%; height: 100%; }
.crew__bg { z-index: -2; }
.crew__bg img { object-fit: cover; object-position: 35% 45%; }
.crew::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.28) 100%); pointer-events: none; }
.crew__in { position: relative; isolation: isolate; width: min(520px, 100%); display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); border-radius: 24px; color: rgb(255, 255, 255); background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(26px) saturate(1.8); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(0, 0, 0, 0.3) 0px 20px 50px; }
.crew__in::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.22)); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.crew__in .h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1; }
.crew__p { color: rgba(255, 255, 255, 0.86); }
.crew__perks { list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 6px; }
.crew__perks li { padding: 7px 13px; border-radius: 999px; font-size: 13px; line-height: 1.2; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.25) 0px 1px 0px inset; }
@media (max-width: 699px) {
  .crew { min-height: 640px; align-items: flex-end; justify-content: center; padding: 10px; }
  .crew__bg img { object-position: 50% 30%; }
  .crew::after { background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.3) 100%); }
  .crew__in { width: 100%; padding: 22px 18px 18px; border-radius: 18px; gap: 12px; }
}
.nl { display: flex; width: 100%; max-width: 520px; margin-top: 8px; }
.nl input { flex: 1 1 0%; min-width: 0px; border-width: 1px 0px 1px 1px; border-style: solid none solid solid; border-color: rgb(17, 17, 17) currentcolor rgb(17, 17, 17) rgb(17, 17, 17); border-image: none; padding: 13px 14px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; background: rgb(255, 255, 255); }
.nl--glass { gap: 4px; padding: 4px; margin-top: 8px; max-width: none; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; transition: box-shadow 0.2s; }
.nl--glass input { flex: 1 1 0%; min-width: 0px; height: 46px; padding: 0px 16px; border: 0px; background: transparent; color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; outline: 0px; }
.nl--glass input::placeholder { color: rgba(255, 255, 255, 0.72); }
.nl--glass button { flex: 0 0 auto; height: 46px; padding: 0px 22px; border: 0px; border-radius: 999px; cursor: pointer; font-family: var(--f); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; color: rgb(13, 13, 13); background: linear-gradient(rgba(255, 255, 255, 0.96), rgba(232, 234, 238, 0.9)); box-shadow: rgb(255, 255, 255) 0px 1px 1px inset, rgba(0, 0, 0, 0.08) 0px -1px 2px inset, rgba(0, 0, 0, 0.22) 0px 4px 14px; transition: background 0.2s, transform 0.15s; }
@media (hover: hover) {
  .nl--glass button:hover { background: rgb(255, 255, 255); }
}
.nl--glass button:active { transform: scale(0.97); }
@media (max-width: 699px) {
  .nl--glass input { padding: 0px 12px; }
  .nl--glass button { padding: 0px 16px; }
}

Crew-Popup im Glas-Look

1:1 mit eigenem AbschnittCodeEinstellung

Erledigt

Design

Fläche: Desktop 1440 × 900 px · Handy 390 × 844 px
Innenabstand: 16px 16px 16px 16px
Raster: 1408px · Abstand normal
Hintergrund: #08080A · 38 %

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickTYPE. Crew	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 85 %
.h224 Stunden früher	Helvetica Neue	36.8px / 27.2px	400	0.2px	36.8px	Versalien	#FFFFFF
.pop__pTrag dich ein und bekomm jeden Dro	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 86 %

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pop	blur(10px) saturate(1.2)	0	–	#08080A · 38 %
.pop__in	–	28px	rgba(0, 0, 0, 0.42) 0px 30px 80px 0px	#111111
.pop__x	blur(10px)	50%	rgba(255, 255, 255, 0.35) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.24) 0px 0px 0px 1px inset	#121214 · 34 %
.pop__card	blur(26px) saturate(1.8)	20px	rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.22) 0px 12px 34px 0px	Verlauf
.nl	–	999px	rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset	#FFFFFF · 12 %
button	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.08) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.22) 0px 4px 14px 0px	Verlauf

Inhalte

KickerTYPE. Crew
Überschrift24 Stunden früher
TextTrag dich ein und bekomm jeden Drop einen Tag vor allen anderen.
FeldDeine E-Mail-Adresse
KnopfAnmelden

Bilder

pop-wide.jpgdekorativFeld 1.83 · Ausschnitt 30% 50% · Datei 1800×982 · nur Desktop
sunset.jpgdekorativFeld 0.60 · Ausschnitt 40% 35% · Datei 1000×1474 · nur Handy

In Shopify

Schnell, aber nur ähnlich: Newsletter-Popup von Impulse (läuft im Live-Shop) mit Bild und Text. Den Glas-Look gibt es dort nicht, er entsteht erst mit eigenem Snippet und CSS.

So wird es 1:1

Eigenes Snippet type-popup mit dem Kundenformular von Shopify (oder Klaviyo). Einstellungen: Bild Desktop, Bild Handy, Kicker, Überschrift, Text, Knopftext.
Fenster 880 × 480 px mit 28 px Rundung, das Foto füllt die ganze Fläche: am Desktop das Querformat pop-wide.jpg, am Handy das Hochformat sunset.jpg.
Rechts eine Glaskarte, 14 px vom Rand, 420 px breit: Weiß 18 % → 6 %, Unschärfe 26 px, Sättigung 1,8, Lichtkante 1 px, 20 px Rundung, Text unten ausgerichtet in Weiß. Am Handy liegt die Karte unten über dem Bild.
Feld und Knopf als Glas-Kapsel: Feld durchsichtig mit weißer Schrift, „Anmelden“ als hell gefrostete Kapsel wie im Startbild. Das Schließen-Kreuz ist eine runde, dunkle Glasfläche.
Die Seite dahinter wird abgedunkelt (Schwarz 38 %) und weichgezeichnet (10 px).
Auslöser wie im Entwurf: einmal pro Sitzung, nur auf der Startseite, nach 40 % Scrolltiefe.

Verhalten aus shop.js

Crew-Popup: einmal pro Sitzung, nach 40 % Scrolltiefe, Escape und Klick daneben schließen

Das Querformat ist aus dem Lookbook-Original I1000056 geschnitten (1800 × 982 px), damit es am Desktop scharf bleibt.

CSS für diesen Abschnitt · 17 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Grundlagen · Crew-Anmeldung als Glas-Block

.pop { position: fixed; inset: 0px; z-index: 70; background: rgba(8, 8, 10, 0.38); backdrop-filter: blur(10px) saturate(1.2); display: grid; place-items: center; padding: 16px; }
.pop[hidden] { display: none; }
.pop__in { position: relative; isolation: isolate; width: min(880px, 100%); aspect-ratio: 880 / 480; min-height: 420px; border-radius: 28px; overflow: hidden; background: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.42) 0px 30px 80px; }
.pop__bg, .pop__bg img { position: absolute; inset: 0px; width: 100%; height: 100%; }
.pop__bg { z-index: -1; }
.pop__bg img { object-fit: cover; object-position: 30% 50%; }
.pop__card { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(420px, 52%); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 30px 28px 28px; border-radius: 20px; color: rgb(255, 255, 255); isolation: isolate; background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)); backdrop-filter: blur(26px) saturate(1.8); box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(0, 0, 0, 0.22) 0px 12px 34px; }
.pop__card::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.22)); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.pop__card .h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; }
.pop__p { color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
.pop__x { position: absolute; top: 26px; right: 26px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; padding: 0px; border: 0px; border-radius: 50%; color: rgb(255, 255, 255); cursor: pointer; background: rgba(18, 18, 20, 0.34); backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset, rgba(255, 255, 255, 0.24) 0px 0px 0px 1px inset; transition: background 0.2s; }
.pop__x svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .pop__x:hover { background: rgba(18, 18, 20, 0.55); }
}
@media (max-width: 699px) {
  .pop__in { aspect-ratio: auto; height: min(600px, -32px + 100svh); min-height: 0px; border-radius: 24px; }
  .pop__bg img { object-position: 40% 35%; }
  .pop__card { inset: auto 10px 10px; width: auto; padding: 22px 18px 18px; border-radius: 18px; }
  .pop__x { top: 12px; right: 12px; }
}

Fußzeile

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 376 px · Handy 390 × 695 px
Innenabstand: 48px 28.8px 24px 28.8px · Handy 48px 14px 24px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
aTYPE.?	Outfit	13px	300	0.8px	20.8px	Versalien	#000000
.ft__payPayPalKlarnaApple PayGoogle PaySho	Outfit	15.5px	300	0.3px	24.8px		#000000
.ft__c© 2026 TYPE. · Entwurf zur Ansicht	Outfit	12px	300	0.3px	19.2px		#6B6B6B

Inhalte

Menü 1TYPE.? · Journal · Versand & Retouren · Retourenformular · Widerrufsrecht · Datenschutz · Impressum · AGB
Menü 2Latest Drop · Pants · Tops · Accessories · Last Pieces
SocialInstagram · YouTube · Facebook
ZahlartenPayPal · Klarna · Apple Pay · Google Pay · Shop Pay · Visa · Mastercard
Zeile ganz unten© 2026 TYPE.

Bilder

logo.pngTYPE.Feld 1.92 · fill · Datei 600×313

In Shopify

Schnell, aber nur ähnlich: Fuß von Impulse: zwei Menüs unter Onlineshop → Navigation anlegen. Die Zahlungssymbole zeigt Shopify selbst.

So wird es 1:1

Optik per CSS .ft angleichen.
Den Zusatz „Entwurf zur Ansicht, kein echter Shop“ aus dem Entwurf weglassen.

CSS für diesen Abschnitt · 13 Regeln

.ft { border-top: 1px solid var(--line); padding: 48px var(--gut) 24px; }
.ft__in { max-width: 1680px; margin: 0px auto; display: grid; grid-template-columns: minmax(0px, 1fr); gap: 28px; }
@media (min-width: 900px) {
  .ft__in { grid-template-columns: 1.2fr 1fr 1fr auto; }
}
.ft__logo img { height: 44px; width: auto; }
.ft nav { display: flex; flex-direction: column; gap: 6px; }
.ft nav a { text-decoration: none; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.ft nav a:hover { text-decoration: underline; }
.ft__soc { display: flex; gap: 14px; }
.ft__pay { max-width: 1680px; margin: 32px auto 0px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ft__pay span { border: 1px solid var(--line); padding: 4px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.ft__c { text-align: center; font-size: 12px; color: var(--mute); margin-top: 16px; }
.ft__in, .ft__pay { max-width: none; }
.ft { padding-inline: var(--edge); }

templates/index.json

Startseite

Neun Abschnitte von oben nach unten. Im Entwurf ansehen

01Startbild
02Im Film getragen
03Kacheln Pants · Tops · Der Film
04Die Kollektion TYPE SHIT
05Der Film
06Design ohne Stangenware
07Was Käufer sagen
08Parkshop und Stände
09Journal

Startbild

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 857 px · Handy 390 × 810 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.lgbKollektion ansehen	Outfit	15px / 14px	500	0.2px	15px		#0D0D0D
.lgbFilm ansehen	Outfit	15px / 14px	500	0.2px	15px		#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.hero__b	blur(22px) saturate(1.8)	999px	rgba(0, 0, 0, 0.28) 0px 20px 50px 0px, rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset	Verlauf
.lgb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.08) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgba(0, 0, 0, 0.22) 0px 8px 22px 0px	Verlauf
.lgb	–	999px	–	–

Inhalte

Alt-Text SchriftzugTYPE SHIT · Der Film und die Kollektion
Knopf 1Kollektion ansehen
Knopf 2Film ansehen

Bilder

hero-street.jpgDie Crew fährt durch MarseilleFeld 1.68 · Ausschnitt 50% 60% · Datei 2200×1481 · nur Desktop
type-shit-logo.pngTYPE SHIT · Der Film und die KollektionFeld 1.95 · fill · Datei 820×420
hero-mobile.jpgDie Crew fährt durch MarseilleFeld 0.48 · Ausschnitt 50% 40% · Datei 1200×1812 · nur Handy

In Shopify

Schnell, aber nur ähnlich: Slideshow von Impulse mit Bild für Desktop und Handy. Sieht ähnlich aus, hat aber keinen Schriftzug als Bild und kein Glas-Dock.

So wird es 1:1

Eigener Abschnitt type-hero mit den Einstellungen Bild Desktop, Bild Handy, Schriftzug (PNG mit Transparenz) und zwei Knöpfe mit Text und Link.
Höhe: genau der erste Bildschirm, also 100svh minus der Leisten über dem Kopf. Am iPhone reicht das Bild bis 100lvh, die Knöpfe steigen um die Höhe der Safari-Leiste.
Knöpfe als Liquid-Glass-Dock: Kapsel mit Unschärfe 22 px und Sättigung 1,8, Lichtkante oben. Der Hauptknopf ist hell gefrostet mit Farbreflex unten links, „Film ansehen“ klar im Glas.
Der Kopf liegt durchsichtig über dem Bild (transparenter Kopf auf der Startseite in Impulse).

Verhalten aus shop.js

Höhe der Leisten (--above) aus dem Kopfzeilen-Skript

CSS für diesen Abschnitt · 36 Regeln

.hd--over + main > .hero:first-child { margin-top: calc(-1 * var(--hdh)); }
.hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; justify-content: center; color: rgb(255, 255, 255); overflow: hidden; background: rgb(17, 17, 17); }
.hero picture { position: absolute; inset: 0px; }
.hero__img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.hero__img--street { object-position: 50% 60%; }
.hero::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 26%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); }
.hero__in { position: relative; z-index: 2; text-align: center; padding: 0 var(--gut) clamp(56px,9vh,110px); display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 960px; }
.hero__b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 699px) {
  .hero { min-height: 88svh; }
  .hero__img { object-position: 50% 40%; }
  .hero::after { background: linear-gradient(rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.78) 100%); }
}
.hero__logo { margin: 0px; line-height: 0; }
.hero__logo img { display: block; width: clamp(190px, 22vw, 340px); height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 3px 22px); }
.hero__in:has(.hero__logo) { gap: 26px; }
@media (max-width: 699px) {
  .hero__in:has(.hero__logo) { gap: 22px; padding-bottom: 48px; }
  .hero__logo img { width: 190px; }
  .hero:has(.hero__logo) .hero__b { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .hero__in:has(.hero__logo) { width: 100%; }
}
.dock { position: relative; isolation: isolate; display: inline-flex; flex-wrap: nowrap; gap: 6px; padding: 6px; margin-top: 4px; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)); backdrop-filter: blur(22px) saturate(1.8); box-shadow: rgba(0, 0, 0, 0.28) 0px 20px 50px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px inset; }
.dock::before, .lgb--hi::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; padding: 1px; pointer-events: none; mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.dock::before { background: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.16)); }
.lgb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0px 24px; border-radius: 999px; font-family: var(--f); font-weight: 500; font-size: 15px; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; color: rgb(255, 255, 255); text-decoration: none; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 8px; transition: background 0.25s, transform 0.2s, box-shadow 0.25s; }
.lgb svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.7; }
.lgb:hover { background: rgba(255, 255, 255, 0.12); }
.lgb:active { transform: scale(0.97); }
.lgb--hi { color: rgb(13, 13, 13); text-shadow: none; background: linear-gradient(rgba(255, 255, 255, 0.95) 0%, rgba(246, 247, 249, 0.9) 48%, rgba(228, 231, 236, 0.88) 100%); box-shadow: rgb(255, 255, 255) 0px 1px 1px inset, rgba(0, 0, 0, 0.08) 0px -2px 4px inset, rgba(0, 0, 0, 0.12) 0px 1px 2px, rgba(0, 0, 0, 0.22) 0px 8px 22px; }
.lgb--hi::before { padding: 1.5px; background: conic-gradient(rgba(255, 255, 255, 0.95) 0deg, rgba(255, 255, 255, 0.7) 60deg, rgba(150, 156, 170, 0.45) 120deg, rgba(150, 156, 170, 0.4) 200deg, rgba(150, 156, 170, 0.5) 232deg, rgba(255, 150, 80, 0.8) 243deg, rgba(110, 165, 255, 0.85) 252deg, rgba(255, 255, 255, 0.65) 266deg, rgba(255, 255, 255, 0.85) 300deg, rgba(255, 255, 255, 0.95) 360deg); }
.lgb--hi:hover { background: linear-gradient(rgb(255, 255, 255) 0%, rgba(250, 251, 252, 0.95) 50%, rgba(236, 238, 242, 0.93) 100%); }
@media (max-width: 699px) {
  .hero:has(.hero__logo) .dock { display: flex; width: 100%; gap: 4px; padding: 5px; }
  .dock .lgb { flex: 1 1 0px; min-width: 0px; height: 48px; padding: 0px 10px; gap: 8px; font-size: 14px; }
  .dock .lgb svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .dock .lgb svg { display: none; }
}
.hero:has(.hero__logo) { min-height: calc(100svh - var(--above,84px)); }
@supports (height:100lvh) {
  .hero:has(.hero__logo) { min-height: calc(100lvh - var(--above,84px)); }
  .hero__in:has(.hero__logo) { padding-bottom: calc(clamp(56px,9vh,110px) + max(100lvh - 100svh, env(safe-area-inset-bottom,0px))); }
}
@supports (height:100lvh) and @media (max-width: 699px) {
  .hero__in:has(.hero__logo) { padding-bottom: calc(48px + max(100lvh - 100svh, env(safe-area-inset-bottom,0px))); }
}

Im Film getragen

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 657 px · Handy 390 × 855 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Im Film getragen	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__tag150 Stück pro Teil	Outfit	11.5px	500	2.3px	13.8px	Versalien	#6B6B6B
.lnkAlle 16 Teile	Outfit	12.5px	500	1.8px	20px	Versalien	#000000
.pc__tDouble Knee Jeans – Brickwall	Outfit	13.5px	400	0.9px	18.2px	Versalien	#000000
.pc__p€115,00	Outfit	15px	300	0.3px	24px		#000000
.pc__m13 oz Denim · Mark Westmoreland	Outfit	12.5px	300	0.3px	20px		#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pq	blur(20px) saturate(2) brightness(1.04)	999px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pq__b	–	50%	–	–
.pq__b	–	50%	rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px	#FFFFFF · 66 %
.pqs	blur(20px) saturate(2) brightness(1.04)	20px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pqs__x	–	50%	–	–
.pqs__s	–	999px	rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px	#FFFFFF · 50 %

Inhalte

ÜberschriftIm Film getragen
Zusatz150 Stück pro Teil
LinkAlle 16 Teile
ProdukteDouble Knee Jeans – Brickwall · Longsleeve – Gorge · Flame Chino – Stratos x TYPE · Jersey – Fedko Signature (Plakette „Nur noch wenige“)

Bilder

p-jeans.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-longsleeve.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-chino.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-jersey.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125

In Shopify

Schnell, aber nur ähnlich: Abschnitt „Ausgewählte Kollektion“ von Impulse mit einer neuen Kollektion „Im Film getragen“: vier Produkte, vier pro Reihe, am Handy zwei.

So wird es 1:1

Zusatz „150 Stück pro Teil“ direkt neben der Überschrift, durch einen Strich getrennt: Textfeld im Abschnitt und CSS .sec__t, .sec__tag.
Raster über die volle Breite mit 14 px Abstand (Handy 10 px), Karten wie unter Grundlagen → Produktkarte.

CSS für diesen Abschnitt · 7 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Grundlagen · Produktkarte mit Merken und Schnellkauf

.sec--full { max-width: none; padding-inline: var(--edge); }
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 30px 10px; }
@media (min-width: 900px) {
  .grid4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 40px 14px; }
}
.pc__b { position: absolute; left: 10px; top: 10px; background: rgba(255, 255, 255, 0.9); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 8px; }
.sec__t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.sec__tag { font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); padding-left: 16px; border-left: 1px solid rgb(207, 207, 207); line-height: 1.2; }
@media (max-width: 699px) {
  .sec__tag { padding-left: 0px; border-left: 0px; }
}

Kacheln Pants · Tops · Der Film

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 600 px · Handy 390 × 1463 px
Raster: 480px 480px 480px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
spanPants	Helvetica Neue	20.9px / 16.8px	300	0.4px	20.9px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
span	blur(18px) saturate(1.8)	999px	rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.18) 0px 4px 14px 0px	Verlauf

Inhalte

Kachel 1Pants
Kachel 2Tops
Kachel 3Der Film

Bilder

tile-pants.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 1200×1500
k-tee.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 1700×2477
tile-film.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 1100×1376

In Shopify

Schnell, aber nur ähnlich: Promo-Raster von Impulse mit drei Kacheln.

So wird es 1:1

Drei Kacheln ohne Abstand über die volle Breite, Format 4:5, am Handy untereinander.
Beschriftung unten links als Glas-Kapsel wie die Knöpfe im Startbild: Weiß 22 % → 7 %, Unschärfe 18 px, Sättigung 1,8, Lichtkante 1 px, Glanz oben. Text in Helvetica-Versalien mit Pfeil, 20 px vom Rand (Handy 16 px).
Beim Darüberfahren wird die Kapsel heller, der Pfeil rückt 3 px nach rechts, das Bild zoomt leicht. Darunter ein leichter Verlauf. CSS .tiles, .tile.
Schatten der Kapsel höchstens 18 px weit, sonst schneidet der Kachelrand ihn ab.

Das Pants-Bild ist das Lookbook-Foto B1000057, auf 4:5 zugeschnitten.

CSS für diesen Abschnitt · 12 Regeln

.tiles { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); }
@media (min-width: 700px) {
  .tiles { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: rgb(17, 17, 17); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.tile:hover img { transform: scale(1.035); }
.tile::after { content: ""; position: absolute; inset: auto 0px 0px; height: 34%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.3)); }
.tile span { position: absolute; z-index: 1; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 12px; isolation: isolate; overflow: hidden; padding: 13px 16px 13px 20px; border-radius: 999px; color: rgb(255, 255, 255); font-family: var(--h); font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)); backdrop-filter: blur(18px) saturate(1.8); box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 4px 14px; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; transition: background 0.25s, padding 0.25s; }
.tile span::before { content: ""; position: absolute; inset: 0px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.24)); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); }
.tile span::after { content: "→"; font-family: var(--f); font-weight: 300; font-size: 0.95em; text-transform: none; transition: transform 0.25s; }
@media (hover: hover) {
  .tile:hover span { background: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)); }
  .tile:hover span::after { transform: translateX(3px); }
}
@media (max-width: 699px) {
  .tile span { left: 16px; bottom: 16px; padding: 12px 14px 12px 18px; font-size: 1.05rem; }
}

Die Kollektion TYPE SHIT

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 1201 px · Handy 390 × 1526 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Die Kollektion TYPE SHIT	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__tag150 Stück pro Teil	Outfit	11.5px	500	2.3px	13.8px	Versalien	#6B6B6B
.sec__noteGefertigt in Europa	Outfit	14px	300	0.3px	22.4px		#6B6B6B
.pc__tHoodie – Two Tone Backstitched	Outfit	13.5px	400	0.9px	18.2px	Versalien	#000000
.pc__p€95,00	Outfit	15px	300	0.3px	24px		#000000
.pc__m320 gsm	Outfit	12.5px	300	0.3px	20px		#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pq	blur(20px) saturate(2) brightness(1.04)	999px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pq__b	–	50%	–	–
.pq__b	–	50%	rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px	#FFFFFF · 66 %
.pqs	blur(20px) saturate(2) brightness(1.04)	20px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pqs__x	–	50%	–	–
.pqs__s	–	999px	rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px	#FFFFFF · 50 %

Inhalte

ÜberschriftDie Kollektion TYPE SHIT
Zusatz150 Stück pro Teil
RechtsGefertigt in Europa
ProdukteHoodie – Two Tone Backstitched · Hoodie – Waving Arms · Carpenter Jorts – Brickwall · Short Sleeve Shirt – Plaid · Tee – Striped · Tee – Rari · Tee – Waving Arms · Cap 5 Panel – Backstitched

Bilder

p-hoodie2.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-hoodie.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-jorts.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-shirt.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-tee-striped.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-tee-rari.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-tee-arms.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-cap.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125

In Shopify

Schnell, aber nur ähnlich: Abschnitt „Ausgewählte Kollektion“ mit der Kollektion TYPE SHIT, acht Produkte.

So wird es 1:1

Wie „Im Film getragen“: Zusatz neben der Überschrift, rechts „Gefertigt in Europa“, Raster über die volle Breite.

CSS für diesen Abschnitt · 1 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Im Film getragen, Grundlagen · Produktkarte mit Merken und Schnellkauf

.sec__note { font-size: 14px; color: var(--mute); }

Der Film

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 1076 px · Handy 390 × 643 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDer Film · 23 Minuten · fünf Lände	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 82 %
.h2TYPE SHIT	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#FFFFFF
pDrei Jahre, gedreht auf 16 mm und	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 82 %
a2:05 Gorge Road	Outfit	12px	300	0.7px	19.2px		#FFFFFF
.lnkDer Film in sieben Kapiteln, im Jo	Outfit	12.5px	500	1.8px	20px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.yt__play	blur(8px)	50%	–	#000000 · 60 %

Inhalte

KickerDer Film · 23 Minuten · fünf Länder
ÜberschriftTYPE SHIT
TextDrei Jahre, gedreht auf 16 mm und digital. Von der Gorge Road in Neuseeland über Marseille bis zur Red-Bull-Line am Greenhill. Frei und in voller Länge.
Kapitel2:05 Gorge Road · 4:30 The Homies · 9:00 Marseille x Tomas Lemoine · 13:53 Red Bull Segment am Greenhill
LinkDer Film in sieben Kapiteln, im Journal
Leiste im VorschaubildTYPE SHIT · Full Movie · 23:44

Bilder

film-poster.jpgTYPE SHIT, der FilmFeld 1.78 · Ausschnitt 50% 50% · Datei 2400×1350

In Shopify

Schnell, aber nur ähnlich: Video-Abschnitt von Impulse mit dem YouTube-Link (läuft im Live-Shop).

So wird es 1:1

Eigener Abschnitt type-film, auch auf Produktseite, Über uns und im Journal: schwarzer Block, Überschrift links, rechts Text, Kapitel-Chips und Link, darunter Vorschaubild 16:9 mit Play-Knopf.
Das Video lädt erst beim Klick (youtube-nocookie). Das spart Ladezeit und ist datenschutzfreundlicher.
Die Kapitel-Chips springen im Journal an die passende Stelle.

Verhalten aus shop.js

Film: erst Bild, Video erst auf Klick
Anker aus der Startseite (#k125 usw.) springen im Journal an das Kapitel

CSS für diesen Abschnitt · 22 Regeln

.lnk--w { color: rgb(255, 255, 255); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { border: 1px solid rgba(255, 255, 255, 0.35); padding: 6px 10px; font-size: 12px; letter-spacing: 0.06em; text-decoration: none; color: rgb(255, 255, 255); }
.chips a:hover { background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.yt { position: relative; aspect-ratio: 16 / 9; background: rgb(0, 0, 0); overflow: hidden; }
.yt img, .yt iframe { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; border: 0px; }
.yt__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; border: 0px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); color: rgb(255, 255, 255); display: grid; place-items: center; transition: transform 0.15s; }
.yt__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.yt__play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt__bar { position: absolute; left: 0px; right: 0px; bottom: 0px; display: flex; justify-content: space-between; padding: 22px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: rgb(255, 255, 255); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.yt.on .yt__play, .yt.on .yt__bar, .yt.on img { display: none; }
.fb { background: rgb(17, 17, 17); color: rgb(255, 255, 255); margin-top: var(--sec); }
.fb__h { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 18px 56px; padding: var(--sec) var(--gut) 36px; align-items: end; }
@media (min-width: 900px) {
  .fb__h { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); }
}
.fb__h p { color: rgba(255, 255, 255, 0.82); max-width: 70ch; }
.fb__h .lnk { display: inline-block; margin-top: 10px; }
.fb .yt { max-height: 92svh; width: 100%; }
.fb__h { grid-template-columns: minmax(0px, 1fr); padding: var(--sec) var(--edge) 32px; }
.fb__r { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fb__r p { color: rgba(255, 255, 255, 0.82); max-width: 70ch; }
.fb .yt { aspect-ratio: 16 / 9; max-height: none; }
.fb .yt__play { top: 62%; }

Design ohne Stangenware

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 630 px · Handy 390 × 1004 px
Raster: 600px 840px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDesign ohne Stangenware	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Jedes Teil beginnt bei null	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pEigene Schnitte, selbst ausgewählt	Outfit	15.5px	300	0.3px	24.8px		#000000

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.lqb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 20px 0px	Verlauf

Inhalte

KickerDesign ohne Stangenware
ÜberschriftJedes Teil beginnt bei null
TextEigene Schnitte, selbst ausgewählte Stoffe, Designs aus der Szene. Kein Rohling aus dem Katalog, und mit jedem Drop wird nachgebessert. Die Double Knee Jeans hat Mark Westmoreland entworfen, früher Denim-Designer bei Levi's und Evisu.
KnopfMehr über TYPE.

Bilder

macro-stick.jpgBrickwall-StickereiFeld 0.44 · Ausschnitt 50% 50% · Datei 1400×1750
flammen.jpgGestickte Flammen am Saum der ChinoFeld 0.44 · Ausschnitt 50% 50% · Datei 1000×1514
rari.jpgGestickter Ferrari auf dem Tee RariFeld 0.44 · Ausschnitt 50% 50% · Datei 1400×2116

In Shopify

Schnell, aber nur ähnlich: „Bild mit Text“ von Impulse, dann aber mit einem statt drei Bildern.

So wird es 1:1

Eigener Abschnitt type-band: Text links, ein bis drei Bilder randlos rechts, Bildseite umschaltbar. Derselbe Abschnitt dient für den Parkshop und die Geschichte der Hose. CSS .fs.
„Mehr über TYPE.“ als helle Glas-Kapsel mit Pfeil, 50 px hoch, Lichtkante mit Farbreflex unten links. CSS .lqb.lqb--md.lqb--light.

CSS für diesen Abschnitt · 21 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Startbild

.hero__b--l { justify-content: flex-start; }
.fs { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); align-items: stretch; }
@media (min-width: 900px) {
  .fs { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); }
}
.fs__txt { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(32px,5vw,88px) var(--edge); }
@media (min-width: 900px) {
  .fs__txt { padding-inline: clamp(28px, 4vw, 72px); }
}
.fs__txt > p:not(.kick) { max-width: 58ch; }
.fs__img { position: relative; min-height: min(78svh, 900px); background: rgb(17, 17, 17); }
.fs__img > img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.fs__img--2, .fs__img--3 { display: grid; gap: 8px; background: none; min-height: 0px; }
.fs__img--3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.fs__img--2 > img, .fs__img--3 > img { position: static; width: 100%; height: 100%; min-height: min(70svh, 820px); object-fit: cover; }
@media (max-width: 899px) {
  .fs__img { min-height: 72svh; }
  .fs__img--2 > img, .fs__img--3 > img { min-height: 46svh; }
}
.lqb--md { height: 50px; padding: 0px 24px; font-size: 15px; gap: 9px; }
.lqb--md svg { width: 17px; height: 17px; }
.lqb--light { color: rgb(17, 17, 17); background: linear-gradient(rgb(255, 255, 255) 0%, rgba(246, 247, 249, 0.95) 55%, rgba(232, 234, 238, 0.93) 100%); box-shadow: rgb(255, 255, 255) 0px 1px 1px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px, rgba(0, 0, 0, 0.08) 0px 8px 20px; }
.lqb--light::before { background: conic-gradient(rgba(255, 255, 255, 0.95) 0deg, rgba(200, 204, 212, 0.7) 70deg, rgba(150, 156, 170, 0.5) 130deg, rgba(150, 156, 170, 0.45) 200deg, rgba(150, 156, 170, 0.5) 232deg, rgba(255, 150, 80, 0.75) 243deg, rgba(110, 165, 255, 0.8) 252deg, rgba(220, 224, 232, 0.7) 268deg, rgba(255, 255, 255, 0.9) 320deg, rgba(255, 255, 255, 0.95) 360deg); }
.lqb--light::after { background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); }
@media (hover: hover) {
  .lqb--light:hover { filter: none; background: rgb(255, 255, 255); }
}
.hero__b .lqb { flex: 0 0 auto; }
@media (max-width: 699px) {
  .hero__b--l .lqb { flex: 1 1 auto; }
}

Was Käufer sagen

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 310 px · Handy 390 × 609 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Was Käufer sagen	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__note★★★★★ 5,0 aus 3 Bewertungen zur Do	Outfit	14px	300	0.3px	22.4px		#6B6B6B
.stars★★★★★	Outfit	15.5px	300	1.2px	24.8px		#000000
pSuper Passform, tolles Design. Pas	Outfit	15px	300	0.3px	24px		#000000
bSuper Passform, tolles Design.	Outfit	15px	500	0.3px	24px		#000000
citeMartin P. · Double Knee Jeans	Outfit	11.5px	300	1.4px	18.4px	Versalien	#6B6B6B

Inhalte

ÜberschriftWas Käufer sagen
Notiz★★★★★ 5,0 aus 3 Bewertungen zur Double Knee Jeans
Bewertung 1Super Passform, tolles Design. Passt perfekt und sieht super aus. – Martin P. · Double Knee Jeans
Bewertung 21A Fit & Qualität. – Aljoscha · Double Knee Jeans
Bewertung 3The best! – Daniel J. · Double Knee Jeans

In Shopify

Schnell, aber nur ähnlich: Widget von Judge.me für ausgewählte Bewertungen. Die App ist im Live-Shop installiert.

So wird es 1:1

Karten-Optik per CSS auf das Judge.me-Widget legen: Sterne, fetter erster Satz, Name klein darunter, drei Spalten.
Nur echte Bewertungen aus Judge.me zeigen.

CSS für diesen Abschnitt · 7 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Die Kollektion TYPE SHIT

.stars { letter-spacing: 0.08em; color: rgb(0, 0, 0); }
.grid3 { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 22px; }
@media (min-width: 900px) {
  .grid3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
.rev { border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.rev p { font-size: 15px; }
.rev b { font-weight: 500; }
.rev cite { font-style: normal; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-top: auto; }

Parkshop und Stände

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 702 px · Handy 390 × 1035 px
Raster: 840px 600px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickTriff uns vor Ort	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Parkshop Greenhill und Festival-St	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pDie Kollektion zum Anprobieren und	Outfit	15.5px	300	0.3px	24.8px		#000000
liGreenhill BikeparkParkshop, täglic	Outfit	14.5px	300	0.3px	23.2px		#000000
bGreenhill Bikepark	Outfit	14.5px	500	0.3px	23.2px		#000000
.ph[Nächstes Festival]	JetBrains Mono	12.5px	500	0	20px		#9A9A9A

Inhalte

KickerTriff uns vor Ort
ÜberschriftParkshop Greenhill und Festival-Stände
TextDie Kollektion zum Anprobieren und Mitnehmen: im Parkshop des Greenhill Bikepark und mit eigenem Stand auf Bike-Festivals. Am Stand anmelden, und die Crew-Vorteile gelten sofort.
Termin 1Greenhill Bikepark – Parkshop, täglich im Parkbetrieb
Termin 2[Nächstes Festival] – [Datum, Ort]
Termin 3[Übernächstes Festival] – [Datum, Ort]

Bilder

parkshop.jpgBau der Red-Bull-Line am GreenhillFeld 1.20 · Ausschnitt 50% 50% · Datei 2000×1126

In Shopify

So wird es 1:1

Abschnitt type-band mit Bild links.
Terminliste aus Metaobjekten „Termin“. Dieselben Termine stehen auf Über uns → Vor Ort, gepflegt wird nur einmal.

CSS für diesen Abschnitt · 6 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Design ohne Stangenware

.dates { list-style: none; margin: 4px 0px 0px; padding: 0px; border-top: 1px solid var(--line); }
.dates li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dates b { font-weight: 500; }
.dates span { color: var(--mute); text-align: right; }
@media (min-width: 900px) {
  .fs--l { grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); }
}
@media (max-width: 899px) {
  .fs--l .fs__img { order: -1; }
}

Journal

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 600 px · Handy 390 × 1099 px
Innenabstand: 93.6px 28.8px 93.6px 28.8px · Handy 56px 14px 56px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Journal	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.lnkAlle Artikel	Outfit	12.5px	500	1.8px	20px	Versalien	#000000
.kickKampagne	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
bTYPE SHIT: der Film und die Kollek	Outfit	16px	500	0.3px	21.6px		#000000

Inhalte

ÜberschriftJournal
LinkAlle Artikel
Karte 1Kampagne · TYPE SHIT: der Film und die Kollektion
Karte 2Designer · Mark Westmoreland über die Brickwall-Jeans
Karte 3Ratgeber · Double Knee Jeans: Größe, Passform, Maße

Bilder

k-stage.jpgdekorativFeld 1.50 · Ausschnitt 50% 50% · Datei 1700×2125
jc-designer.jpgGesäßtasche der Double Knee Jeans mit TYPE-PatchFeld 1.50 · Ausschnitt 50% 50% · Datei 1200×798
jc-passform.jpgDie Crew bei der Premiere in weiten SchnittenFeld 1.50 · Ausschnitt 50% 50% · Datei 1200×800

In Shopify

Schnell, aber nur ähnlich: „Blogbeiträge“ von Impulse: zeigt die neuesten Artikel mit Beitragsbild.

So wird es 1:1

Drei feste Artikel wählen, die Rubrik darüber aus einem Artikel-Tag, Bilder 4:5. CSS .jc.

Vor dem Livegang klären

Artikel 2 und 3 gibt es noch nicht. Der Ratgeber kann bis dahin auf die Produktseite (#passform) zeigen.

CSS für diesen Abschnitt · 5 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Was Käufer sagen

main > .sec:last-child, main > section:last-child { padding-bottom: var(--sec); }
.jc { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.jc img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--soft); }
.jc b { font-weight: 500; font-size: 16px; line-height: 1.35; }
.jc:hover b { text-decoration: underline; text-underline-offset: 4px; }

templates/product.json (eine Vorlage für alle Produkte, Inhalte je Produkt aus Metafeldern)

Produktseite

Am Beispiel der Double Knee Jeans. Alles, was je Produkt anders ist, kommt aus Metafeldern. Im Entwurf ansehen

→Eine Vorlage für alle Produkte
01Brotkrumen
02Produktbilder
03Kaufbereich mit Reitern
04Die Geschichte der Hose
05Getragen im Film
06So sitzt sie
07Bewertungen
08Complete the fit
09Kaufleiste am Handy

Eine Vorlage für alle Produkte

Ja, alle Produktseiten bekommen denselben Look. Es gibt genau eine Produktvorlage (templates/product.json). Was je Produkt anders ist, kommt aus dem Produkt selbst oder aus seinen Metafeldern. Jeder eigene Abschnitt prüft, ob sein Inhalt da ist, und blendet sich sonst aus. Eine Cap steht so nicht mit leerer Maßtabelle da.

Teil	Gleich für alle	Je Produkt	Wenn leer
Galerie	Anordnung, Großansicht, Zähler	Produktbilder und Alt-Texte	–
Kaufbereich	Aufbau, Kaufknopf, Zahlarten, Vorteile, Kaufleiste am Handy	Titel, Preis, Varianten, `type.zeile_oben`, `type.story`, `type.passform`	Die jeweilige Zeile fällt weg
Größen	Kästchen, Restmenge unter 10 Stück	Varianten und Bestand	Bei One Size fällt die Größenwahl weg
Reiter	Reihenfolge, Optik, Versandtext	Beschreibung, `type.schnitt_stoff`, `type.pflege`	Der Reiter fällt weg
Geschichte	Band mit Text und Bildern	`type.geschichte_titel`, `_text`, `_bilder`	Der Abschnitt fällt weg
Film	Abschnitt mit Vorschaubild	–	–
So sitzt sie	Maßtabelle und Beispielkarten	`type.masse`, `type.passform_beispiele`	Der Abschnitt fällt weg
Bewertungen	Optik der Judge.me-Karten	Bewertungen des Produkts	Einladung zur ersten Bewertung
Complete the fit	Kartenraster mit Dock	`type.complete_fit`, `type.complete_fit_text`	Automatische Empfehlungen von Shopify

Eine zweite Produktvorlage braucht es nur, wenn ein Produkt bewusst anders aussehen soll, etwa eine Kollaboration. Sie wird dann im Produkt unter „Theme-Vorlage“ gewählt.

Brotkrumen

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 36 px · Handy 390 × 36 px
Innenabstand: 16px 28.8px 0px 28.8px · Handy 16px 14px 0px 14px

Inhalte

PfadStart / Latest Drop / Double Knee Jeans – Brickwall

In Shopify

Schnell, aber nur ähnlich: Brotkrumen in den Theme-Einstellungen von Impulse einschalten. Im Theme-Editor prüfen, wo die Option liegt.

So wird es 1:1

Klein, grau, über der Galerie. CSS .crumb.

CSS für diesen Abschnitt · 3 Regeln

.crumb { max-width: 1680px; margin: 0px auto; padding: 16px var(--gut) 0; font-size: 12.5px; color: var(--mute); letter-spacing: 0.04em; }
.crumb a { text-decoration: none; }
.crumb { max-width: none; padding: 16px var(--edge) 0; }

Produktbilder

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 795 × 4495 px · Handy 390 × 592 px

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
span	blur(6px)	0	–	#FFFFFF · 85 %

Inhalte

Reihenfolge und Alt-Texte1 Getragen · 2 Vorne · 3 Hinten · 4 Ganzer Look · 5 Look hinten · 6 Brickwall-Stickerei · 7 Patch · 8 Sticker-Set · 9 Bei der Premiere

Bilder

worn.jpgGetragenFeld 0.80 · Ausschnitt 50% 50% · Datei 1203×1504 · nur Desktop
front.jpgVorneFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
back.jpgHintenFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
look.jpgGanzer LookFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
look-back.jpgLook hintenFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
macro-stick.jpgBrickwall-StickereiFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
macro-patch.jpgPatchFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×1750 · nur Desktop
sticker.jpgSticker-SetFeld 0.80 · Ausschnitt 50% 50% · Datei 1076×1058 · nur Desktop
premiere.jpgBei der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×2100 · nur Desktop
worn.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1250 · nur Handy
front.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×875 · nur Handy
back.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×875 · nur Handy
look.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×875 · nur Handy
look-back.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×875 · nur Handy
macro-stick.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 800×1000 · nur Handy
macro-patch.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 800×1000 · nur Handy
sticker.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×688 · nur Handy
premiere.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1350 · nur Handy

In Shopify

Schnell, aber nur ähnlich: Produktgalerie von Impulse mit Großansicht (läuft im Live-Shop). Bilder in dieser Reihenfolge ins Produkt laden.

So wird es 1:1

Desktop: alle Bilder untereinander statt Miniaturen. Bild 1, 4 und 9 gehen über die volle Spaltenbreite, die anderen stehen paarweise. Das geht per CSS auf die Impulse-Galerie oder als eigene Galerie-Ausgabe im Produktabschnitt.
Handy: wischbare Galerie mit Zähler „1 / 9“.
Ein Klick öffnet die Großansicht mit Pfeilen, Zähler und Escape.

Verhalten aus shop.js

Großansicht der Produktbilder
Galerie (Handy)

Die Aufnahme am Desktop ist nach 2.600 px gekürzt.

CSS für diesen Abschnitt · 27 Regeln

.pd__gal { display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
.pd__thumbs { order: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.pd__thumbs button { flex: 0 0 auto; width: 76px; padding: 0px; border: 1px solid transparent; background: var(--soft); }
.pd__thumbs button.on { border-color: rgb(17, 17, 17); outline: rgb(17, 17, 17) solid 1px; }
.pd__thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pd__main { position: relative; background: var(--soft); }
.pd__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pd__count { position: absolute; right: 10px; bottom: 10px; background: rgb(255, 255, 255); font-size: 11px; padding: 3px 7px; letter-spacing: 0.06em; }
.pd__stack { display: none; }
@media (min-width: 900px) {
  .pd__thumbs, .pd__main { display: none; }
  .pd__stack { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; }
}
.pd__shot { position: relative; padding: 0px; border: 0px; background: var(--soft); cursor: zoom-in; overflow: hidden; }
.pd__shot--wide { grid-column: 1 / -1; }
.pd__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s; }
.pd__shot:hover img { transform: scale(1.02); }
.pd__shot span { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; opacity: 0; transition: opacity 0.2s; }
.pd__shot:hover span, .pd__shot:focus-visible span { opacity: 1; }
.lbx { position: fixed; inset: 0px; z-index: 80; background: rgba(255, 255, 255, 0.96); display: grid; place-items: center; }
.lbx[hidden] { display: none; }
.lbx img { max-width: min(92vw, 1100px); max-height: 92vh; object-fit: contain; }
.lbx button { position: absolute; border: 0px; background: none; font-size: 44px; font-weight: 200; line-height: 1; padding: 12px; color: rgb(17, 17, 17); }
.lbx__x { top: 14px; right: 14px; }
.lbx__x svg { width: 28px; height: 28px; }
.lbx__n--p { left: 10px; top: 50%; transform: translateY(-50%); }
.lbx__n--n { right: 10px; top: 50%; transform: translateY(-50%); }
.lbx__c { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.pd__thumbs { padding: 0 var(--edge); }

Kaufbereich mit Reitern

Impulse-Baustein, angeglichenEinstellungDatenCode

Erledigt

Design

Fläche: Desktop 568 × 1066 px · Handy 390 × 1093 px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.pd__kickTYPE SHIT · 150 Stück pro Teil	Outfit	11px	500	2.4px	17.6px	Versalien	#6B6B6B
.pd__tDouble Knee Jeans – Brickwall	Helvetica Neue	34.6px / 25.6px	400	0.2px	37.3px	Versalien	#000000
.pd__price€115,00	Outfit	20px / 19px	400	0.3px	32px		#000000
.stars★★★★★	Outfit	12px	300	1px	19.2px		#000000
.pd__storyEntworfen von Mark Westmoreland, f	Outfit	14.5px	300	0.3px	23.2px		#444444
.lblGröße MMaße	Outfit	12.5px	300	2.8px	20px	Versalien	#000000
bM	Outfit	12.5px	500	2.8px	20px	Versalien	#000000
.pd__fitWeiter Schnitt · Model 175 cm träg	Outfit	13px	300	0.3px	20.8px		#6B6B6B
.pd__payShop Pay · PayPal · Apple Pay · Kl	Outfit	12px	300	0.7px	19.2px		#6B6B6B
liGratis Versand	Outfit	12.5px / 11.5px	300	0.5px	20px		#333333

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.sizes	–	999px	rgba(0, 0, 0, 0.07) 0px 1px 2px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset	Verlauf
button	–	999px	–	–
.on	–	999px	rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px	Verlauf
.lqb	–	999px	rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset, rgba(0, 0, 0, 0.14) 0px 2px 6px 0px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px	Verlauf

Inhalte

Zeile über dem TitelTYPE SHIT · 150 Stück pro Teil
TitelDouble Knee Jeans – Brickwall
Preis€115,00
Sterne★★★★★ 3 Bewertungen
Satz unter dem PreisEntworfen von Mark Westmoreland, früher Levi's und Evisu. 13 oz Denim, eigener Schnitt, getragen im Film.
Größen2XS · XS · S · M · L · XL · XXL
RestmengeNur noch 4 in L
PassformWeiter Schnitt · Model 175 cm trägt M
LinkMaße
KnopfIn den Einkaufswagen
ZahlartenShop Pay · PayPal · Apple Pay · Klarna
VorteileGratis Versand · 14 Tage Umtausch · Sticker-Set dabei
Reiter BeschreibungDie robusteste Hose, die wir gemacht haben. Schwerer 13 oz Right Hand Twill, doppelte Knie, eine Carpenter-Tasche hinten rechts und ein weiter Schnitt, den es so nur bei TYPE. gibt. Die Brickwall-Stickerei auf der Münztasche und der Patch hinten machen sie unverwechselbar.
Reiter Schnitt und StoffSchnitt: Eigener Schnitt, Relaxed / Baggy · Stoff: 13 oz Right Hand Twill, 100 % Baumwolle, Indigo · Details: Doppelte Knie, Carpenter-Tasche · Branding: Brickwall-Stickerei, Logo-Patch · Herkunft: Made in Europe
Reiter Versand und RückgabeDeutschland 4–6 Werktage, ab 80 € versandkostenfrei, EU 5–7 Werktage. Umtausch und Widerruf innerhalb von 14 Tagen über das Retourenportal. Jedes Teil geht vor dem Versand durch unsere Hände.
Reiter Pflege[Pflegehinweise wie auf dem Etikett ergänzen]

In Shopify

Schnell, aber nur ähnlich: Produktabschnitt von Impulse, Blöcke in dieser Reihenfolge: Text (Metafeld type.zeile_oben), Titel, Preis, Sterne von Judge.me, Text (type.story), Varianten als Knöpfe, Text (type.passform), Kaufen-Knopf, Text Zahlarten, Text Vorteile, vier einklappbare Reiter.

So wird es 1:1

Im Kaufen-Block die dynamischen Kasse-Knöpfe abschalten, also den gelben PayPal-Knopf. Die Zahlarten stehen stattdessen als ruhige Textzeile darunter.
Preis und Sterne in einer Zeile, die Vorteile mit Trennpunkten. CSS .pd__*, .acc.
Größen als gefrostete Segmentleiste: Kapsel mit Grau 3–5 % und feinem Innenschatten, alle Größen gleich breit in einer Reihe. Die gewählte Größe sitzt als weiße Glas-Kapsel mit Licht oben und weichem Schatten darin. CSS .sizes.
„In den Einkaufswagen“ als dunkle Glas-Kapsel mit Taschensymbol, 56 px hoch: Verlauf Dunkelgrau → Schwarz, Lichtkante 1,5 px mit Farbreflex unten links, Glanz in der oberen Hälfte, Schatten 0 12px 28px. Mit der Maus darüber heller, beim Drücken gibt sie leicht nach. CSS .lqb.
Restmenge „Nur noch X in Größe“ erst unter 10 Stück je Variante: kleiner Liquid-Block mit variant.inventory_quantity.
Reiter: Beschreibung ist die Produktbeschreibung, Schnitt und Stoff kommt aus type.schnitt_stoff, Versand ist ein gemeinsamer Text, Pflege kommt aus type.pflege. Beim Laden sind alle Reiter zu. In der Aufnahme sind zwei zur Ansicht geöffnet.
Desktop: Der Kaufbereich läuft beim Scrollen mit.

Verhalten aus shop.js

Kaufspalte: läuft mit, auch wenn sie höher ist als der Bildschirm
Größen (Auswahl, Restmenge, Kaufleiste)

CSS für diesen Abschnitt · 57 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Was Käufer sagen

@media (min-width: 900px) {
  .pd__buy { position: sticky; top: calc(var(--hdh) + 16px); }
}
.pd__buy { display: flex; flex-direction: column; gap: 14px; }
.pd__t { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: 0.005em; }
.pd__stars { text-decoration: none; font-size: 15px; }
.pd__price { font-size: 22px; font-weight: 400; margin-top: 4px; }
.pd__story { border-left: 2px solid rgb(17, 17, 17); padding: 2px 0px 2px 14px; font-size: 15px; line-height: 1.55; }
.lbl { display: flex; justify-content: space-between; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; }
.lbl a { letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
.lbl b { font-weight: 500; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes button { min-width: 52px; padding: 11px 12px; border: 1px solid rgb(220, 220, 220); background: rgb(255, 255, 255); font-size: 15.5px; font-weight: 300; }
.sizes button.on { border: 2px solid rgb(17, 17, 17); padding: 10px 11px; }
.low { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.low[hidden] { display: none; }
.low::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(17, 17, 17); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 15px 0px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-weight: 300; font-size: 20px; line-height: 1; }
.acc details[open] summary::after { content: "–"; }
.acc details > p, .acc details > table { padding-bottom: 16px; font-size: 15px; }
.spec, .mtab { border-collapse: collapse; width: 100%; }
.spec td, .mtab td, .mtab th { border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0px; text-align: left; font-size: 14.5px; vertical-align: top; }
.spec td:first-child, .mtab td:first-child { font-weight: 400; }
.pd__buy { padding: 0 var(--edge); }
@media (min-width: 900px) {
  .pd__buy { padding: 0px; }
}
.pd__buy { gap: 18px; }
.pd__kick { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.pd__kick + .pd__t { margin-top: -8px; }
.pd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: -4px; }
.pd__row .pd__price { margin: 0px; font-size: 20px; }
.pd__row .pd__stars { font-size: 13px; color: var(--mute); }
.pd__row .pd__stars .stars { font-size: 12px; color: rgb(0, 0, 0); margin-right: 4px; }
.pd__buy .pd__story { border: 0px; padding: 0px; font-size: 14.5px; line-height: 1.6; color: rgb(68, 68, 68); max-width: 46ch; }
.pd__sz { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pd__sz .lbl { margin-bottom: 0px; }
.pd__fit { font-size: 13px; color: var(--mute); }
.pd__pay { margin-top: -8px; text-align: center; font-size: 12px; letter-spacing: 0.06em; color: var(--mute); }
.pd__perks { list-style: none; margin: 0px; padding: 14px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: 0.04em; color: rgb(51, 51, 51); }
.pd__perks li { display: flex; align-items: center; gap: 8px; }
.pd__perks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(17, 17, 17); }
.pd__buy .acc { margin-top: 4px; }
@media (max-width: 699px) {
  .pd__buy { gap: 16px; }
  .pd__row .pd__price { font-size: 19px; }
  .pd__perks { justify-content: flex-start; gap: 6px 12px; font-size: 11.5px; letter-spacing: 0.02em; }
  .sizes { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 5px; }
  .sizes button { min-width: 0px; padding: 11px 0px; font-size: 14px; }
  .sizes button.on { padding: 10px 0px; }
}
.sizes { display: flex; flex-wrap: nowrap; gap: 3px; padding: 4px; border-radius: 999px; background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.03)); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.sizes button { flex: 1 1 0px; min-width: 0px; height: 44px; padding: 0px; border: 0px; border-radius: 999px; background: transparent; color: rgb(17, 17, 17); font-family: var(--f); font-size: 15px; font-weight: 400; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
@media (hover: hover) {
  .sizes button:hover { background: rgba(255, 255, 255, 0.65); }
}
.sizes button.on { padding: 0px; border: 0px; font-weight: 500; background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.88)); box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 2px, rgba(0, 0, 0, 0.08) 0px 4px 12px; }
.lqb--full { width: 100%; }
@media (max-width: 699px) {
  .sizes { display: flex; gap: 2px; padding: 3px; }
  .sizes button { height: 40px; font-size: 14px; }
  .sizes button.on { padding: 0px; }
}

Die Geschichte der Hose

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 630 px · Handy 390 × 1057 px
Raster: 600px 840px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDie Geschichte der Hose	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Die robusteste Hose, die wir gemac	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pMark Westmoreland hat früher Denim	Outfit	15.5px	300	0.3px	24.8px		#000000
.ph[Ein Satz von Mark Westmoreland, w	JetBrains Mono	13.3px	400	0	21.3px		#9A9A9A
.lnkMehr über den Designer im Journal	Outfit	12.5px	500	1.8px	20px	Versalien	#000000

Inhalte

KickerDie Geschichte der Hose
ÜberschriftDie robusteste Hose, die wir gemacht haben
TextMark Westmoreland hat früher Denim für Levi's und Evisu entworfen. Für TYPE. hat er eine Hose gebaut, die im Park hält und in der Stadt sitzt: 13 oz Right Hand Twill, doppelte Knie, eine Carpenter-Tasche und ein weiter Schnitt, den es so nur bei TYPE. gibt.
Zitat[Ein Satz von Mark Westmoreland, warum die Hose so gebaut ist]
LinkMehr über den Designer im Journal

Bilder

macro-stick.jpgBrickwall-StickereiFeld 0.66 · Ausschnitt 50% 50% · Datei 1400×1750
macro-patch.jpgPatch hintenFeld 0.66 · Ausschnitt 50% 50% · Datei 1400×1750

In Shopify

So wird es 1:1

Abschnitt type-band in der Produktvorlage. Titel, Text und Bilder kommen aus Metafeldern (type.geschichte_titel, type.geschichte_text, type.geschichte_bilder). So hat jedes Produkt seine eigene Geschichte, ohne Geschichte bleibt der Abschnitt aus.

CSS für diesen Abschnitt · 1 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Design ohne Stangenware

.fs__img--2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

Getragen im Film

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 1058 px · Handy 390 × 498 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickTYPE SHIT · 23 Minuten · fünf Länd	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 82 %
.h2Getragen und getestet im Film	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#FFFFFF
pDie Kollektion wurde unter echten	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 82 %
.lnkFilm und Kapitel im Journal	Outfit	12.5px	500	1.8px	20px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.yt__play	blur(8px)	50%	–	#000000 · 60 %

Inhalte

KickerTYPE SHIT · 23 Minuten · fünf Länder
ÜberschriftGetragen und getestet im Film
TextDie Kollektion wurde unter echten Bedingungen gefahren, nicht für die Kamera gestylt.
LinkFilm und Kapitel im Journal

Bilder

film-poster.jpgTYPE SHIT, der FilmFeld 1.78 · Ausschnitt 50% 50% · Datei 2400×1350

In Shopify

So wird es 1:1

Abschnitt type-film wie auf der Startseite, nur andere Texte: schwarzer Block, Überschrift links, Text rechts, darunter Vorschaubild 16:9. Das Video lädt erst beim Klick.

Verhalten aus shop.js

Film: erst Bild, Video erst auf Klick

CSS für diesen Abschnitt · 0 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Der Film

So sitzt sie

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 450 px · Handy 390 × 688 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2So sitzt sie	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__noteEigener Schnitt: Die Größe anderer	Outfit	14px	300	0.3px	22.4px		#6B6B6B
thGröße	Outfit	11px	500	1.5px	17.6px	Versalien	#6B6B6B
tdS	Outfit	14.5px	400	0.3px	23.2px		#000000
.ph__ cm	JetBrains Mono	14.5px	400	0	23.2px		#9A9A9A
figcaptionModel · 175 cm · M	Outfit	12px	300	0.3px	19.2px		#444444
.ph[Name] · [__ cm] · [Größe]	JetBrains Mono	12px / 14.5px	400	0	19.2px		#444444

Inhalte

ÜberschriftSo sitzt sie
NotizEigener Schnitt: Die Größe anderer Marken hilft wenig, die Maße schon.
TabelleGröße · Bund · Innenbein · Oberschenkel · Saum, Zeilen S, M, L, XL (Werte in cm fehlen noch)
Beispiel 1Model · 175 cm · M
Beispiel 2[Name] · [__ cm] · [Größe]
Beispiel 3[Rider] · [__ cm] · L

Bilder

look.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 700×875
premiere.jpgdekorativFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1350

In Shopify

So wird es 1:1

Eigener Abschnitt type-passform mit dem Anker #passform für den Link „Maße“.
Maße als JSON-Metafeld je Produkt (type.masse), Beispiele als Metaobjekte „Passform-Beispiel“ mit Bild, Name, Körpergröße und getragener Größe.

CSS für diesen Abschnitt · 7 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Die Kollektion TYPE SHIT, Produktseite · Kaufbereich mit Reitern

.phbox { display: grid; place-items: center; text-align: center; padding: 12px; aspect-ratio: 4 / 5; background: rgb(238, 238, 238); border: 1px dashed rgb(187, 187, 187); font-family: var(--mono); font-size: 11px; color: rgb(138, 138, 138); text-transform: uppercase; letter-spacing: 0.06em; }
.mtab th { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fitm { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .fitm { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 48px; }
}
.bodies { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.bodies img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.bodies figcaption { font-size: 12px; margin-top: 6px; color: rgb(68, 68, 68); }

Bewertungen

Impulse-Baustein, angeglichenEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 331 px · Handy 390 × 833 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Bewertungen	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__note★★★★★ 5,0 aus 3 Bewertungen	Outfit	14px	300	0.3px	22.4px		#6B6B6B
.stars★★★★★	Outfit	15.5px	300	1.2px	24.8px		#000000
pSuper Passform, tolles DesignPasst	Outfit	15px	300	0.3px	24px		#000000
bSuper Passform, tolles Design	Outfit	15px	500	0.3px	24px		#000000
citeMartin P.	Outfit	11.5px	300	1.4px	18.4px	Versalien	#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.lqb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 20px 0px	Verlauf

Inhalte

ÜberschriftBewertungen
Notiz★★★★★ 5,0 aus 3 Bewertungen
Bewertung 1Super Passform, tolles Design – Passt perfekt und sieht super aus. – Martin P.
Bewertung 21A Fit & Qualität – Aljoscha
Bewertung 3The best! – Daniel J.
KarteBewerte mit Foto – Mit Körpergröße und getragener Größe. Das hilft allen, die nach dir bestellen.
KnopfBewertung schreiben

In Shopify

Schnell, aber nur ähnlich: Bewertungs-Widget von Judge.me (läuft im Live-Shop).

So wird es 1:1

Karten-Optik per CSS auf das Widget legen: vier Spalten, am Handy untereinander. Die letzte Karte lädt zur Bewertung mit Foto ein, mit „Bewertung schreiben“ als heller Glas-Kapsel mit Stern.
In Judge.me Foto-Bewertungen einschalten. Prüfen, ob der gebuchte Tarif Zusatzfragen wie Körpergröße und getragene Größe erlaubt.

CSS für diesen Abschnitt · 4 Regeln · nutzt außerdem Regeln aus 4 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Was Käufer sagen, Startseite · Die Kollektion TYPE SHIT, Startseite · Im Film getragen, Startseite · Design ohne Stangenware

.rev--add { background: var(--soft); border-color: var(--soft); justify-content: space-between; align-items: flex-start; }
.rev--add .lqb { align-self: flex-start; }
@media (max-width: 699px) {
  #bewertungen .grid4 { grid-template-columns: minmax(0px, 1fr); }
  .rev--add .lqb { white-space: nowrap; }
}

Complete the fit

1:1 mit eigenem AbschnittDatenCode

Erledigt

Design

Fläche: Desktop 1440 × 751 px · Handy 390 × 896 px
Innenabstand: 93.6px 28.8px 93.6px 28.8px · Handy 56px 14px 56px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Complete the fit	Helvetica Neue	31.7px / 23.2px	400	0.2px	33.6px	Versalien	#000000
.sec__noteDer Look vom Foto: Jeans, Hoodie u	Outfit	14px	300	0.3px	22.4px		#6B6B6B
.pc__tHoodie – Two Tone Backstitched	Outfit	13.5px	400	0.9px	18.2px	Versalien	#000000
.pc__p€95,00	Outfit	15px	300	0.3px	24px		#000000
.pc__m320 gsm	Outfit	12.5px	300	0.3px	20px		#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pq	blur(20px) saturate(2) brightness(1.04)	999px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pq__b	–	50%	–	–
.pq__b	–	50%	rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px	#FFFFFF · 66 %
.pqs	blur(20px) saturate(2) brightness(1.04)	20px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pqs__x	–	50%	–	–
.pqs__s	–	999px	rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px	#FFFFFF · 50 %

Inhalte

ÜberschriftComplete the fit
NotizDer Look vom Foto: Jeans, Hoodie und Cap zusammen €245
ProdukteHoodie – Two Tone Backstitched · Cap 5 Panel – Backstitched · Tee – Rari · Carpenter Jorts – Brickwall

Bilder

p-hoodie2.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-cap.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-tee-rari.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-jorts.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125

In Shopify

Schnell, aber nur ähnlich: Produktempfehlungen von Impulse (laufen im Live-Shop, automatisch ausgewählt).

So wird es 1:1

Feste Auswahl über das Metafeld type.complete_fit (Produktliste) oder über „Ergänzende Produkte“ der App Search & Discovery. Den Satz darüber aus type.complete_fit_text.
Karten wie unter Grundlagen → Produktkarte.

€245 = Jeans 115 + Hoodie 95 + Cap 35.

CSS für diesen Abschnitt · 0 Regeln · nutzt außerdem Regeln aus 4 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Im Film getragen, Startseite · Journal, Startseite · Die Kollektion TYPE SHIT, Grundlagen · Produktkarte mit Merken und Schnellkauf

Kaufleiste am Handy

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop – · Handy 390 × 69 px
Innenabstand: 10px 14px 10px 14px
Hintergrund: #FFFFFF · 82 %

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.stk	blur(16px)	0	–	#FFFFFF · 82 %
.lqb	–	999px	rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset, rgba(0, 0, 0, 0.14) 0px 2px 6px 0px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px	Verlauf

Inhalte

LinksM · €115 (gewählte Größe · Preis)
KnopfIn den Einkaufswagen

In Shopify

So wird es 1:1

Eigenes Snippet, unten fixiert, nur unter 900 px Breite. Es ist ab Seitenstart sichtbar und blendet sich aus, solange der große Kaufknopf im Bild ist.
Größe und Preis folgen der Auswahl, der Knopf legt die gewählte Variante in den Warenkorb.
Glas: Weiß mit 82 % Deckkraft, Unschärfe 16 px, Abstand für die Home-Leiste des iPhones.
Der Knopf ist dieselbe dunkle Glas-Kapsel wie im Kaufbereich, 48 px hoch, mit Taschensymbol.

Verhalten aus shop.js

Kaufleiste mobil

CSS für diesen Abschnitt · 7 Regeln

.stk { display: none; }
@media (max-width: 899px) {
  .has-sticky .stk { position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.2s; }
  .has-sticky .stk.on { transform: none; }
  .stk span { font-size: 13px; color: var(--mute); flex: 0 0 auto; }
}
.stk .lqb { flex: 1 1 0%; height: 48px; padding: 0px 14px; font-size: 15px; gap: 8px; }
.stk .lqb svg { width: 17px; height: 17px; }
.stk .lqb span { color: inherit; font-size: inherit; flex: initial; }

Seite „TYPE.?“ mit eigener Vorlage templates/page.type.json

Über uns

Elf Abschnitte, alle in voller Bildschirmbreite. Im Entwurf ansehen

01Einstieg
02Laufband
03Design ohne Stangenware
04So entsteht ein TYPE.-Teil
05Zahlen
06Der Designer
07Der Film
08Erik Fedko und die Crew
09Fertigung
10Grundsätze
11Vor Ort

Einstieg

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 969 px · Handy 390 × 1404 px
Raster: 720px 720px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickTYPE.? · Über uns	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.ah__tBuilt for dirt, street and everyth	Helvetica Neue	77.8px / 38.4px	400	0	73.1px	Versalien	#000000
.ah__leadTYPE. ist das Label von Erik Fedko	Outfit	19.4px / 16.8px	300	0.3px	31.1px		#000000
dtGründer	Outfit	11px	500	2px	17.6px	Versalien	#6B6B6B
ddErik Fedko	Outfit	15.5px	300	0.3px	24.8px		#000000
figcaptionLookbook TYPE SHIT · Hoodie Waving	Outfit	11.5px	300	1.4px	18.4px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.lqb	–	999px	rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset, rgba(0, 0, 0, 0.14) 0px 2px 6px 0px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px	Verlauf
.lqb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 20px 0px	Verlauf

Inhalte

KickerTYPE.? · Über uns
ÜberschriftBuilt for dirt, street and everything in between.
TextTYPE. ist das Label von Erik Fedko, Profi im Slopestyle und Freeride. Wir machen Kleidung für Stürze, Staub und lange Tage im Park, die danach noch so gut aussieht, dass man sie in der Stadt trägt. Dafür entwickeln wir jedes Teil selbst, vom ersten Schnitt bis zum Stoff.
Knopf 1Zum aktuellen Drop
Knopf 2Film ansehen
FaktenGründer: Erik Fedko · Szene: Slopestyle, Dirt, Street · Gefertigt: Nordportugal und Türkei · Aktueller Drop: TYPE SHIT · 16 Teile
BildunterschriftLookbook TYPE SHIT · Hoodie Waving Arms · Cap Backstitched

Bilder

hero.jpgRider im Hoodie Waving Arms mit Cap Backstitched am SkateparkFeld 0.74 · Ausschnitt 50% 40% · Datei 1400×2128

In Shopify

So wird es 1:1

Eigener Abschnitt type-about-hero: Text links, Bild rechts, am Handy das Bild oben. Die Fakten sind Blöcke mit Bezeichnung und Wert.
Knöpfe als Glas-Kapseln: „Zum aktuellen Drop“ dunkel mit Tasche, „Film ansehen“ hell mit Play-Symbol. Am Handy teilen sie sich die Breite oder stehen untereinander. CSS .lqb--md, .lqb--light.

CSS für diesen Abschnitt · 16 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Startbild, Startseite · Design ohne Stangenware

.ah { display: grid; grid-template-columns: minmax(0px, 1fr); min-height: calc(100svh - var(--hdh) - 38px); }
@media (min-width: 900px) {
  .ah { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
}
.ah__txt { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(40px,6vw,96px) var(--gut); }
.ah__t { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 5.4vw, 5.6rem); line-height: 0.94; letter-spacing: 0px; max-width: 14ch; }
.ah__lead { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; max-width: 52ch; }
.ah__facts { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); border-top: 1px solid rgb(17, 17, 17); margin-top: 8px; max-width: 620px; }
.ah__facts div { padding: 12px 0px; border-bottom: 1px solid var(--line); }
.ah__facts div:nth-child(2n+1) { padding-right: 16px; }
.ah__facts dt { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.ah__facts dd { font-size: 15.5px; }
.ah__img { position: relative; min-height: 62svh; background: rgb(17, 17, 17); }
.ah__img img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ah__img figcaption { position: absolute; left: 16px; bottom: 14px; color: rgb(255, 255, 255); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px; }
@media (max-width: 699px) {
  .ah__facts { grid-template-columns: minmax(0px, 1fr); }
  .ah__img { order: -1; min-height: 58svh; }
  .ah__txt { padding-top: 32px; }
}

Laufband

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 89 px · Handy 390 × 67 px
Innenabstand: 16px 0px 16px 0px
Hintergrund: #FFFFFF

Inhalte

BegriffeEigene Schnitte · Eigene Stoffe · Gestickt, wo andere drucken · Getragen im Film · 150 Stück pro Teil · Gefertigt in Europa

In Shopify

So wird es 1:1

Eigener Abschnitt type-laufband, die Begriffe als Blöcke, Endlos-Animation per CSS .marq.
Bei „Bewegung reduzieren“ im Betriebssystem sollte das Band stillstehen.

CSS für diesen Abschnitt · 5 Regeln

.marq { overflow: hidden; display: flex; border-block: 1px solid rgb(17, 17, 17); padding-block: 16px; background: rgb(255, 255, 255); }
.marq__t { display: flex; flex: 0 0 auto; gap: 0px; animation: 38s linear 0s infinite normal none running mq; }
.marq__t span { font-family: var(--h); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 2.2rem); white-space: nowrap; padding-right: 1.1em; }
.marq__t span::after { content: "✦"; font-size: 0.5em; vertical-align: middle; padding-left: 1.1em; color: rgb(153, 153, 153); }
@media (prefers-reduced-motion: reduce) {
  .marq__t { animation: auto ease 0s 1 normal none running none; }
}

Design ohne Stangenware

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 684 px · Handy 390 × 1387 px
Raster: 720px 720px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
figcaptionTee Rari · der Ferrari gestickt, n	Outfit	11.5px	300	1.4px	18.4px	Versalien	#FFFFFF
.kickDesign	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Design ohne Stangenware	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
.dsg__pJedes TYPE.-Teil beginnt bei null.	Outfit	17.3px / 16px	300	0.3px	27.6px		#000000
bEigene Schnitte	Outfit	12px	500	1.9px	19.2px	Versalien	#000000

Inhalte

KickerDesign
ÜberschriftDesign ohne Stangenware
TextJedes TYPE.-Teil beginnt bei null. Wir entwickeln jede Passform selbst, vom Boxy-Tee bis zur weiten Jeans, und wählen jeden Stoff selbst aus. Kein Rohling aus dem Katalog, auf den nur ein Logo kommt. Die Designs kommen aus der Szene, in der wir fahren, und aus der Streetwear von heute.
Punkt 1Eigene Schnitte – Jede Passform ist für TYPE. entwickelt, Teil für Teil.
Punkt 2Eigene Stoffe – Selbst ausgewählt: 200 gsm für Tees, 280 und 320 gsm für Hoodies, 13 oz Denim.
Punkt 3Designs aus der Szene – Motive von Spots, aus Filmen und aus der Crew, gestickt, wo andere drucken.
Punkt 4Nie ganz fertig – Jeder Drop verbessert den letzten: Schnitt, Stoff, Details.
BildunterschriftTee Rari · der Ferrari gestickt, nicht gedruckt

Bilder

rari.jpgTee Rari mit gesticktem FerrariFeld 1.05 · Ausschnitt 50% 50% · Datei 1400×2116

In Shopify

So wird es 1:1

Eigener Abschnitt type-design: großes Bild links, rechts Text und vier Punkte im Raster. CSS .dsg, .four.

CSS für diesen Abschnitt · 13 Regeln

.four { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); width: 100%; }
@media (min-width: 600px) {
  .four { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
.four > div { background: rgb(255, 255, 255); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.four b { font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.four span { font-size: 14.5px; line-height: 1.5; }
.dsg { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); }
@media (min-width: 900px) {
  .dsg { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
}
.dsg__img { position: relative; min-height: 70svh; background: rgb(17, 17, 17); }
.dsg__img img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.dsg__img figcaption, .crm__cap { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.dsg__img figcaption { position: absolute; left: 16px; bottom: 14px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px; }
.dsg__txt { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(40px,6vw,96px) var(--gut); }
.dsg__p { font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 56ch; }

So entsteht ein TYPE.-Teil

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 916 px · Handy 390 × 880 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickVom ersten Strich zum Drop	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2So entsteht ein TYPE.-Teil	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
li01IdeeMotive von Spots, aus Filmen	Outfit	15.5px	300	0.3px	24.8px		#000000
.h3Idee	Outfit	15.2px	500	1.8px	20.5px	Versalien	#000000
pMotive von Spots, aus Filmen und a	Outfit	14.5px	300	0.3px	22.5px		#333333
pUnd kein Schnitt ist je fertig. Mi	Helvetica Neue	27.2px / 19.2px	300	0.3px	31.3px	Versalien	#000000
.ph[Ein, zwei echte Beispiele, was si	JetBrains Mono	13.3px	400	0	21.3px		#9A9A9A

Inhalte

KickerVom ersten Strich zum Drop
ÜberschriftSo entsteht ein TYPE.-Teil
01 IdeeMotive von Spots, aus Filmen und aus der Crew. Der rote Ferrari aus dem Intro brennt als Stickerei auf dem Tee Rari.
02 SchnittJede Passform wird für TYPE. entwickelt, vom Boxy-Tee bis zur weiten Jeans. Kein Rohling aus dem Katalog.
03 StoffSelbst ausgewählt: 200 gsm für Tees, 280 und 320 gsm für Hoodies, 13 oz Right Hand Twill für Denim.
04 DetailsGestickt, wo andere drucken: Flammen am Saum, Brickwall auf der Münztasche, Ferrari auf der Brust.
05 GetestetIm Film unter echten Bedingungen gefahren, an der Gorge Road, in Marseille und am Greenhill.
SchlussUnd kein Schnitt ist je fertig. Mit jedem Drop verbessern wir Passform, Stoff und Details.
Ergänzung[Ein, zwei echte Beispiele, was sich von Drop zu Drop verändert hat, dazu ein Foto vom Schnittmuster oder der Anprobe]

Bilder

ch-intro.jpgSzene aus dem Intro von TYPE SHITFeld 0.75 · Ausschnitt 38% 50% · Datei 1600×900
schnitt.jpgBoxy-Tee als Schatten an der WandFeld 0.75 · Ausschnitt 50% 50% · Datei 1000×1506
macro-patch.jpg13 oz Denim mit PatchFeld 0.75 · Ausschnitt 50% 50% · Datei 1400×1750
flammen.jpgGestickte Flammen am Saum der ChinoFeld 0.75 · Ausschnitt 50% 50% · Datei 1000×1514
ch-redbull.jpgErik im Fedko Signature Jersey am GreenhillFeld 0.75 · Ausschnitt 50% 50% · Datei 1600×900

In Shopify

So wird es 1:1

Eigener Abschnitt type-prozess, jeder Schritt ein Block mit Nummer, Titel, Text und Bild. Fünf Spalten am Desktop (je mindestens 240 px, Bilder 3:4), am Handy wischbar mit Einrasten, jede Karte 72 % breit. CSS .proc.

CSS für diesen Abschnitt · 14 Regeln

.h3 { font-family: var(--f); font-weight: 500; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.12em; line-height: 1.35; }
.proc { padding: var(--sec) var(--edge) 0; }
.proc__h { display: flex; flex-direction: column; gap: 10px; padding: 0 calc(var(--gut) - var(--edge)) 28px; }
.proc__l { list-style: none; padding: 0px; display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.proc__l::-webkit-scrollbar { display: none; }
.proc__l li { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.proc__l figure { aspect-ratio: 3 / 4; overflow: hidden; background: rgb(17, 17, 17); margin-bottom: 6px; }
.proc__l img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.proc__l li:hover img { transform: scale(1.04); }
.proc__n { font-family: var(--h); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; }
.proc__l p { font-size: 14.5px; line-height: 1.55; color: rgb(51, 51, 51); padding-right: 8px; }
.proc__end { display: flex; flex-direction: column; gap: 8px; margin: 28px calc(var(--gut) - var(--edge)) 0; padding-top: 20px; border-top: 1px solid rgb(17, 17, 17); }
.proc__end p:first-child { font-family: var(--h); text-transform: uppercase; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.15; max-width: 36ch; }
@media (max-width: 699px) {
  .proc__l { grid-template-columns: repeat(5, minmax(72%, 1fr)); }
}

Zahlen

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 223 px · Handy 390 × 292 px
Raster: 360px 360px 360px 360px · Abstand normal
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
b13 oz	Helvetica Neue	60.5px / 32px	400	-0.6px	57.5px		#FFFFFF

Inhalte

Zahl 113 oz – Right Hand Twill, Double Knee Jeans
Zahl 2320 gsm – Hoodie Two Tone, vorgewaschen
Zahl 3150 – Stück pro Teil, im Drop TYPE SHIT
Zahl 423:44 – Minuten Film, gedreht in fünf Ländern

In Shopify

Schnell, aber nur ähnlich: Textspalten von Impulse, dann aber ohne die großen Zahlen.

So wird es 1:1

Eigener Abschnitt type-zahlen: vier Spalten, große Zahl in Helvetica, zwei Zeilen Erklärung darunter. CSS .nums.

CSS für diesen Abschnitt · 5 Regeln

.nums { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); background: rgb(17, 17, 17); color: rgb(255, 255, 255); margin-top: var(--sec); }
@media (min-width: 900px) {
  .nums { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
.nums div { padding: clamp(28px,4vw,64px) var(--gut); border-right: 1px solid rgb(42, 42, 42); border-bottom: 1px solid rgb(42, 42, 42); display: flex; flex-direction: column; gap: 10px; }
.nums b { font-family: var(--h); font-weight: 400; white-space: nowrap; font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: 0.95; letter-spacing: -0.01em; }
.nums span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(189, 189, 189); line-height: 1.5; }

Der Designer

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 583 px · Handy 390 × 739 px
Raster: 600px 840px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDer Designer	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Die Jeans von Mark Westmoreland	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pMark Westmoreland hat früher Denim	Outfit	15.5px	300	0.3px	24.8px		#000000
.ph[Ein Satz von Mark Westmoreland]	JetBrains Mono	13.3px	400	0	21.3px		#9A9A9A

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.lqb	–	999px	rgba(255, 255, 255, 0.3) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -2px 6px 0px inset, rgba(0, 0, 0, 0.14) 0px 2px 6px 0px, rgba(0, 0, 0, 0.2) 0px 12px 28px 0px	Verlauf
.lqb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 20px 0px	Verlauf

Inhalte

KickerDer Designer
ÜberschriftDie Jeans von Mark Westmoreland
TextMark Westmoreland hat früher Denim für Levi's und Evisu gestaltet. Für TYPE. hat er die Double Knee Jeans entworfen: 13 oz Right Hand Twill, doppelte Knie, eine Carpenter-Tasche und ein weiter Schnitt, den es so nur bei TYPE. gibt. Für uns ist sie die robusteste Hose, die wir gemacht haben.
Zitat[Ein Satz von Mark Westmoreland]
Knopf 1Zur Jeans · €115
Knopf 2Drei Fragen an Mark

Bilder

front.jpgDouble Knee Jeans BrickwallFeld 0.66 · Ausschnitt 50% 50% · Datei 1400×1750
macro-stick.jpgBrickwall-Stickerei auf der MünztascheFeld 0.66 · Ausschnitt 50% 50% · Datei 1400×1750

In Shopify

So wird es 1:1

Eigener Abschnitt type-designer, auch im Journal genutzt: Text links, rechts zwei Bilder übereinander. CSS .mw.
„Zur Jeans · €115“ als dunkle Glas-Kapsel mit Tasche, „Drei Fragen an Mark“ als helle Glas-Kapsel mit Pfeil.

CSS für diesen Abschnitt · 5 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Startbild, Startseite · Design ohne Stangenware

.mw { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); align-items: stretch; }
@media (min-width: 900px) {
  .mw { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); }
}
.mw__txt { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(32px,5vw,80px) var(--gut); }
.mw__img { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; padding: 0 var(--edge); }
.mw__img img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--soft); }

Der Film

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 1042 px · Handy 390 × 555 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDer Film	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 82 %
.h2TYPE SHIT	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#FFFFFF
p23 Minuten, drei Jahre, fünf Lände	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 82 %
.lnkDer Film in sieben Kapiteln	Outfit	12.5px	500	1.8px	20px	Versalien	#FFFFFF

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.yt__play	blur(8px)	50%	–	#000000 · 60 %

Inhalte

KickerDer Film
ÜberschriftTYPE SHIT
Text23 Minuten, drei Jahre, fünf Länder. Gedreht auf 16 mm und digital in Neuseeland, Kanada, Spanien, Frankreich und Deutschland, mit Tomas Lemoine, Emil Johansson, Nicholi Rogatkin und der ganzen Crew. Die Kollektion wurde im Film getragen, unter echten Bedingungen und nicht für die Kamera gestylt.
LinkDer Film in sieben Kapiteln

Bilder

film-poster.jpgTYPE SHIT, der FilmFeld 1.78 · Ausschnitt 50% 50% · Datei 2400×1350

In Shopify

So wird es 1:1

Abschnitt type-film wie auf der Startseite, nur andere Texte: schwarzer Block, Überschrift links, Text rechts, darunter Vorschaubild 16:9. Das Video lädt erst beim Klick.

Verhalten aus shop.js

Film: erst Bild, Video erst auf Klick

CSS für diesen Abschnitt · 0 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Der Film

Erik Fedko und die Crew

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 1237 px · Handy 390 × 1139 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px
Raster: 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px 107.9px · Abstand 8px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickWer dahinter steht	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Erik Fedko und die Crew	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pErik Fedko, Gründer und Fahrer. Da	Outfit	15.5px	300	0.3px	24.8px		#000000
.ph[Zwei, drei Sätze in deinen Worten	JetBrains Mono	13.3px	400	0	21.3px		#9A9A9A
.crm__capPremiere TYPE SHIT in Innsbruck ·	Outfit	11.5px	300	1.4px	18.4px	Versalien	#6B6B6B

Inhalte

KickerWer dahinter steht
ÜberschriftErik Fedko und die Crew
TextErik Fedko, Gründer und Fahrer. Dazu eine Crew aus Ridern, die Erik persönlich kennt und die TYPE. tragen, weil sie es wollen.
Ergänzung[Zwei, drei Sätze in deinen Worten: seit wann du fährst, warum du TYPE. gegründet hast, was der Name bedeutet.]
RiderErik Fedko · [Rider] · [Rider] · [Rider]
BildzeilePremiere TYPE SHIT in Innsbruck · Fotos: Anna Rogler

Bilder

crowd.jpgCrowdsurfen bei der PremiereFeld 1.50 · Ausschnitt 50% 50% · Datei 1600×1066
stage.jpgErik auf der Bühne bei der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1250
crew3.jpgDie Crew vor der LeinwandFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1250
party.jpgDie Crew nach der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1500

In Shopify

So wird es 1:1

Eigener Abschnitt type-crew: Text oben links, darunter ein breites und drei schmale Bilder randlos. CSS .crm.

CSS für diesen Abschnitt · 13 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Über uns · Design ohne Stangenware

.riders { display: flex; flex-wrap: wrap; gap: 6px; }
.riders span { border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; }
.crm { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; padding: var(--sec) var(--edge) 0; }
.crm figure { overflow: hidden; background: rgb(17, 17, 17); }
.crm img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.crm__txt { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; justify-content: center; padding: 0 calc(var(--gut) - var(--edge)) 18px; }
.crm__wide { grid-column: 1 / -1; }
.crm__wide img { aspect-ratio: 3 / 2; }
.crm__cap { grid-column: 1 / -1; color: var(--mute); padding: 4px calc(var(--gut) - var(--edge)) 0; }
@media (min-width: 900px) {
  .crm { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
  .crm__txt { grid-column: 1 / 6; padding-bottom: 0px; }
  .crm__wide { grid-column: 6 / 13; }
  .crm figure:not(.crm__wide) { grid-column: span 4; }
}

Fertigung

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 560 px · Handy 390 × 1187 px
Raster: 840px 600px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickFertigung	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Wo und wie wir fertigen	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pHergestellt in Europa, genauer im	Outfit	15.5px	300	0.3px	24.8px		#000000
thTeil	Outfit	11px	500	1.5px	17.6px	Versalien	#6B6B6B
tdTees	Outfit	14.5px	400	0.3px	23.2px		#000000
tdeigener Boxy-Schnitt, Baumwolle, p	Outfit	14.5px	300	0.3px	23.2px		#000000
.ph[Land]	JetBrains Mono	14.5px	400	0	23.2px		#9A9A9A
.ph[Werkstätten mit Name oder Region,	JetBrains Mono	13.3px / 14.5px	400	0	21.3px		#9A9A9A

Inhalte

KickerFertigung
ÜberschriftWo und wie wir fertigen
TextHergestellt in Europa, genauer im Norden Portugals und in der Türkei. Faire Bedingungen und Transparenz sind für uns Standard. Jedes Teil geht vor dem Versand durch unsere Hände.
Teeseigener Boxy-Schnitt, Baumwolle, pre-shrunk · 200 gsm · Portugal
Hoodieseigener weiter Schnitt, Baumwolle, pre-shrunk · 280 und 320 gsm · Portugal
Jeans und JortsSchnitt von Mark Westmoreland, Right Hand Twill · 13 oz · [Land]
Capseigenes Design · – · [Land]
Ergänzung[Werkstätten mit Name oder Region, zwei Fotos aus der Produktion]

Bilder

sunset.jpgHoodie im GegenlichtFeld 1.07 · Ausschnitt 50% 50% · Datei 1000×1474

In Shopify

So wird es 1:1

Eigener Abschnitt type-fertigung: Text und Tabelle links, Bild rechts. Die Tabellenzeilen als Blöcke. CSS .fert, .mtab.

CSS für diesen Abschnitt · 6 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Produktseite · Kaufbereich mit Reitern, Produktseite · So sitzt sie

.fert { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); }
@media (min-width: 900px) {
  .fert { grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); }
}
.fert__txt { display: flex; flex-direction: column; gap: 16px; padding: clamp(32px,4vw,64px) var(--gut); }
.fert__txt > p:not(.kick):not(.ph) { max-width: 62ch; }
.fert__img { min-height: 420px; position: relative; background: rgb(17, 17, 17); }
.fert__img img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }

Grundsätze

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 386 px · Handy 390 × 820 px
Raster: 479.3px 479.3px 479.3px · Abstand 1px
Hintergrund: #E6E6E6

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickLimitiert	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h3Kleine Auflagen, kein künstlicher	Outfit	15.2px	500	1.8px	20.5px	Versalien	#000000
pJeder Drop erscheint in fester Stü	Outfit	15.5px	300	0.3px	24.8px		#000000

Inhalte

01 LimitiertKleine Auflagen, kein künstlicher Hype – Jeder Drop erscheint in fester Stückzahl, bei TYPE SHIT sind es 150 pro Teil. Ist ein Teil ausverkauft, war es das. Wer zur Crew gehört, bekommt jeden Drop 24 Stunden vor allen anderen.
02 LanglebigStil trifft Substanz – Nachhaltigkeit bedeutet für uns Langlebigkeit. Wenn Kleidung Jahre hält, statt nach einer Saison aussortiert zu werden, ist das der ehrlichste Weg, den Fußabdruck zu verkleinern.
03 EhrlichKeine Trends, kein künstlicher Hype – Wir machen, was wir selbst tragen und fahren. Was im Film zu sehen ist, wurde dort auch wirklich getragen.

In Shopify

Schnell, aber nur ähnlich: Textspalten von Impulse mit drei Spalten.

So wird es 1:1

Große Nummer, Kicker, Titel, Text, drei Spalten mit Trennlinien. CSS .prin.

CSS für diesen Abschnitt · 4 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Über uns · So entsteht ein TYPE.-Teil

.prin { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: var(--sec); }
@media (min-width: 900px) {
  .prin { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
.prin > div { background: rgb(255, 255, 255); padding: clamp(28px,4vw,56px) var(--gut); display: flex; flex-direction: column; gap: 12px; }
.prin__n { font-family: var(--h); font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.9; color: rgb(17, 17, 17); }

Vor Ort

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 874 px · Handy 390 × 1208 px
Raster: 600px 840px · Abstand normal
Hintergrund: #0C0C0C

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickVor Ort	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 85 %
.meet__tTriff uns am Greenhill und am Stan	Helvetica Neue	63.4px / 36.8px	400	-0.3px	58.9px	Versalien	#FFFFFF
.meet__pAnprobieren, anfassen, mitnehmen.	Outfit	17.3px / 16px	300	0.3px	27.6px		#FFFFFF · 72 %
liseit13.09.Greenhill BikeparkParksh	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF
bGreenhill Bikepark	Helvetica Neue	18px / 16px	400	0.2px	28.8px	Versalien	#FFFFFF
.ph[Festival]	Helvetica Neue	18px / 16px	400	0.2px	28.8px	Versalien	#FFFFFF · 45 %

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.lqb	–	999px	rgb(255, 255, 255) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 20px 0px	Verlauf

Inhalte

KickerVor Ort
SaisonSaison 2026
ÜberschriftTriff uns am Greenhill und am Stand
TextAnprobieren, anfassen, mitnehmen. Am Stand anmelden, und die Crew-Vorteile gelten sofort.
Termin 1seit 13.09. · Greenhill Bikepark · Parkshop · im Parkbetrieb · Geöffnet
Termin 2Termin TBA · [Festival] · [Ort] · Stand
Termin 3Termin TBA · [Festival] · [Ort] · Stand
KnopfTermine zuerst bekommen
Zeile danebenDie Crew erfährt neue Stände vor allen anderen.

Bilder

meet.jpgRider im grauen Zip-Hoodie, Lookbook TYPE.Feld 0.69 · Ausschnitt 50% 30% · Datei 1400×1740

In Shopify

So wird es 1:1

Eigener Abschnitt type-vor-ort: Porträt links randlos, rechts dunkles Panel mit Terminliste. Am Handy steht das Panel unter dem Bild.
Termine aus Metaobjekten „Termin“ mit Datum, Name, Ort und Status, dieselben wie im Parkshop-Band der Startseite. Der Status „Geöffnet“ ist hervorgehoben.
„Termine zuerst bekommen“ als helle Glas-Kapsel mit Kalender auf dem dunklen Panel.
Zum Crew-Block darunter bleibt der normale Abschnittsabstand, damit die beiden dunklen Flächen nicht ineinanderlaufen.

CSS für diesen Abschnitt · 30 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Journal, Startseite · Design ohne Stangenware

.meet { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: var(--sec); background: rgb(12, 12, 12); color: rgb(255, 255, 255); }
@media (min-width: 900px) {
  .meet { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); min-height: min(92svh, 920px); }
}
.meet__img { position: relative; margin: 0px; overflow: hidden; background: rgb(233, 233, 233); aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .meet__img { aspect-ratio: auto; }
}
.meet__img img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.meet__panel { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(36px,6vw,104px) var(--edge); }
@media (min-width: 900px) {
  .meet__panel { padding-inline: clamp(40px, 6vw, 112px); }
}
.meet__panel::after { content: ""; position: absolute; inset: 0px; z-index: -1; background-image: var(--grain); background-size: 180px auto; opacity: 0.07; pointer-events: none; }
.meet__top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.meet__top span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.meet__t { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(2.3rem, 4.4vw, 4.6rem); line-height: 0.93; letter-spacing: -0.005em; max-width: 15ch; }
.meet__p { font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 44ch; }
.meet__list { list-style: none; margin: 6px 0px 0px; padding: 0px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.meet__list li { display: grid; grid-template-columns: 7.5ch minmax(0px, 1fr) auto; align-items: center; gap: 18px; padding: 18px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.meet__d { font-family: var(--h); font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 4px; }
.meet__d small { font-family: var(--f); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.meet__n { display: flex; flex-direction: column; gap: 3px; min-width: 0px; }
.meet__n b { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(1rem, 1.25vw, 1.2rem); letter-spacing: 0.01em; }
.meet__n i { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.meet__s { font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.meet__s--on { background: rgb(255, 255, 255); color: rgb(12, 12, 12); border-color: rgb(255, 255, 255); }
.meet .ph { color: rgba(255, 255, 255, 0.45); }
.meet__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.meet__cta span { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.meet__d--tba { color: rgba(255, 255, 255, 0.4); }
.pg-about main > section.meet:last-child { padding-bottom: 0px; margin-bottom: 0px; }
@media (max-width: 699px) {
  .meet__t { max-width: none; }
  .meet__list li { grid-template-columns: 5.5ch minmax(0px, 1fr) auto; gap: 12px; }
  .meet__s { font-size: 9.5px; letter-spacing: 0.14em; padding: 5px 8px; }
  .meet__cta .lqb { flex: 1 1 100%; }
}

Blogartikel mit eigener Vorlage templates/article.lookbook.json

Journal

Der Kampagnen-Artikel zu TYPE SHIT im Lookbook-Stil. Im Entwurf ansehen

01Titelbild
02Einleitung
03Der ganze Film
04Der Film in sieben Kapiteln
05Zitat
06Bildpaar
07Der Designer mit drei Fragen
0816 Teile
09Premiere und Credits
10Weiterlesen

Titelbild

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 864 px · Handy 390 × 810 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickJournal · Kampagne · 1. August 202	Outfit	11.5px / 10.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 85 %
.hero__tTYPE SHIT: der Film und die Kollek	Helvetica Neue	92.2px / 38.4px	400	0.5px	87.6px	Versalien	#FFFFFF
.hero__sDrei Jahre, fünf Länder, 23 Minute	Outfit	19.2px / 16px	300	0.3px	30.7px		#FFFFFF · 92 %
.art__byVon Erik Fedko · 6 Min. Lesezeit ·	Outfit	11.5px	300	1.8px	18.4px	Versalien	#FFFFFF · 80 %

Inhalte

KickerJournal · Kampagne · 1. August 2026
TitelTYPE SHIT: der Film und die Kollektion
UnterzeileDrei Jahre, fünf Länder, 23 Minuten. Und 16 Teile, die im Film gefahren wurden, nicht für die Kamera gestylt.
BylineVon Erik Fedko · 6 Min. Lesezeit · Premiere in Innsbruck · Foto: Anna Rogler

Bilder

journal-hero.jpgCrowdsurfen bei der Premiere von TYPE SHITFeld 1.67 · Ausschnitt 50% 40% · Datei 2200×1467

In Shopify

So wird es 1:1

Artikelvorlage article.lookbook mit Titelbild-Abschnitt: Titel, Datum und Bild kommen aus dem Artikel, Unterzeile und Byline aus Artikel-Metafeldern (type.unterzeile, type.byline).
Text links unten über dem Bild, Verlauf von links für die Lesbarkeit. Der Kopf liegt durchsichtig darüber.

CSS für diesen Abschnitt · 11 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Startbild

.hero__t { font-family: var(--h); font-weight: 400; text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 7rem); line-height: 0.92; letter-spacing: 0.005em; }
.hero__s { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 44ch; color: rgba(255, 255, 255, 0.92); }
.art__by { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.hero--jrn { min-height: min(96svh, 1000px); justify-content: flex-start; }
.hero--jrn .hero__img { object-position: 50% 40%; }
.hero__in--l { align-items: flex-start; text-align: left; max-width: 1100px; padding-left: var(--edge); padding-right: var(--edge); }
.hero__t--jrn { font-size: clamp(2.4rem, 6.4vw, 6.4rem); max-width: 16ch; line-height: 0.95; }
.art__by--w { color: rgba(255, 255, 255, 0.8); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.hero--jrn::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 78%), linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); }
.hero .kick, .hero__s { text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 14px; }
@media (max-width: 699px) {
  .hero .kick { font-size: 10.5px; letter-spacing: 0.12em; }
}

Einleitung

1:1 mit eigenem AbschnittDatenCode

Erledigt

Design

Fläche: Desktop 720 × 461 px · Handy 390 × 661 px
Innenabstand: 86.4px 51.8px 0px 51.8px · Handy 48px 16px 0px 16px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.art__leadDrei Jahre lang haben wir Spots an	Outfit	17px	300	0.3px	29.8px		#000000

Inhalte

Erster Absatz (größer)Drei Jahre lang haben wir Spots anders gelesen als sonst, und sie genau so gefahren. Manches davon ist vorher noch nie gefahren worden. Daraus ist TYPE SHIT geworden, ein Mountainbike-Film von Erik Fedko und KLEINMOND Studios: fünf Segmente zwischen Slopestyle, Freeride, Skatepark und Dirt, von der Gorge Road in Neuseeland über Kanada, Barcelona und Marseille bis zum Greenhill Bikepark. Gedreht auf 16 mm und digital. Korn neben Schärfe, mit Absicht.
Zweiter AbsatzDen ganzen Film gibt es frei und in voller Länge, ohne Paywall und ohne Login. Mit ihm erscheint unsere Kollektion TYPE SHIT: 16 Teile, schwerer Denim, weite Schnitte, Hoodies, Shirts und Accessoires. Gebaut für Dirt, Street und alles dazwischen, und genau dort getragen. Nichts davon wurde für die Kamera gestylt.

In Shopify

So wird es 1:1

Artikeltext im Editor von Shopify. Die Textspalte ist 720 px breit, der erste Absatz größer. CSS .art__col, .art__lead.

CSS für diesen Abschnitt · 2 Regeln

.art__col { max-width: 720px; margin: 0px auto; padding: clamp(32px,4vw,56px) var(--gut) 0; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.75; }
.art__col { padding-top: clamp(48px, 6vw, 96px); }

Der ganze Film

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 1006 px · Handy 390 × 449 px
Hintergrund: #111111

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDer ganze Film	Outfit	11.5px	500	2.5px	18.4px	Versalien	#FFFFFF · 82 %
.h2TYPE SHIT · 23:44	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#FFFFFF
pEin Mountainbike-Film von Erik Fed	Outfit	15.5px	300	0.3px	24.8px		#FFFFFF · 82 %

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.yt__play	blur(8px)	50%	–	#000000 · 60 %

Inhalte

KickerDer ganze Film
ÜberschriftTYPE SHIT · 23:44
TextEin Mountainbike-Film von Erik Fedko x KLEINMOND Studios. Frei, in voller Länge, ohne Login.

Bilder

film-poster.jpgTYPE SHIT, der FilmFeld 1.78 · Ausschnitt 50% 50% · Datei 2400×1350

In Shopify

So wird es 1:1

Abschnitt type-film wie auf der Startseite, nur andere Texte: schwarzer Block, Überschrift links, Text rechts, darunter Vorschaubild 16:9. Das Video lädt erst beim Klick.

Verhalten aus shop.js

Film: erst Bild, Video erst auf Klick

CSS für diesen Abschnitt · 0 Regeln · nutzt außerdem Regeln aus 1 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Der Film

Der Film in sieben Kapiteln

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 3426 px · Handy 390 × 3893 px
Innenabstand: 93.6px 0px 0px 0px · Handy 56px 0px 0px 0px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickShop the scene	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Der Film in sieben Kapiteln	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pSpring direkt in jedes Kapitel. Da	Outfit	15.5px	300	0.3px	24.8px		#333333
pGleich zu Beginn fährt ein roter F	Outfit	16.6px / 15.5px	300	0.3px	27.3px		#222222
bTee – Rari	Outfit	12px	500	0.8px	16.8px	Versalien	#111111

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
span	blur(8px)	50%	–	#000000 · 55 %

Inhalte

KickerShop the scene
ÜberschriftDer Film in sieben Kapiteln
TextSpring direkt in jedes Kapitel. Daneben siehst du das Teil, das in der Szene getragen wird.
0:00 IntroGleich zu Beginn fährt ein roter Ferrari F40 durchs Bild. Auf dem Tee Rari brennt er als Stickerei. – Teil: Tee – Rari, der Ferrari als Stickerei
2:05 Gorge RoadDer legendäre Dirt-Jump-Spot in Queenstown, Neuseeland. Erik fährt ihn im Longsleeve, das nach genau diesem Spot benannt ist. – Teil: Longsleeve – Gorge, in diesem Kapitel getragen
4:30 The HomiesDie Crew zwischen den Spots: Emil Johansson, Nick Schubarth, Denny Kürten, Leo Vielhaber und die anderen. Dazwischen Autofahrten, Reifenflicken und lange Abende.
9:00 Marseille x Tomas LemoineEin ganzes Segment in Schwarzweiß mit Slopestyle-Veteran und Rampage-Fahrer Tomas Lemoine. Die gestickten Flammen am Saum gehören zur Chino aus seiner Collab mit TYPE. – Teil: Flame Chino – Stratos x TYPE, im Segment getragen
13:53 Red Bull Segment am GreenhillEine eigene Slopestyle-Line, über mehr als einen Monat gebaut von Sam „Hodgy“ Hodgson, Oscar Powell, Jonas Bachmann und der Greenhill-Crew. Mit Sturz, Umarmung und allem, was dazugehört. – Teil: Jersey – Fedko Signature, Eriks Contest-Jersey
19:00 Team & Friends am GreenhillDer ganze Hang voller Rider: Johanna Nußbaumer, Finn Wenzel, Dorian Macher, Valentin Raimann, Nicholi Rogatkin und viele mehr.
22:34 OutroDer Abspann: alle Spots, die Build-Crew und jeder einzelne Rider.

Bilder

ch-intro.jpgIntroFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900
p-tee-rari.jpgProduktbild, kommt aus dem ProduktFeld 0.81 · Ausschnitt 50% 50% · Datei 900×1125
ch-gorge.jpgGorge RoadFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900
p-longsleeve.jpgProduktbild, kommt aus dem ProduktFeld 0.81 · Ausschnitt 50% 50% · Datei 900×1125
ch-homies.jpgThe HomiesFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900
ch-marseille.jpgMarseille x Tomas LemoineFeld 1.78 · Ausschnitt 50% 58% · Datei 1600×1232
p-chino.jpgProduktbild, kommt aus dem ProduktFeld 0.81 · Ausschnitt 50% 50% · Datei 900×1125
ch-redbull.jpgRed Bull Segment am GreenhillFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900
p-jersey.jpgProduktbild, kommt aus dem ProduktFeld 0.81 · Ausschnitt 50% 50% · Datei 900×1125
ch-team.jpgTeam & Friends am GreenhillFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900
ch-outro.jpgOutroFeld 1.78 · Ausschnitt 50% 50% · Datei 1600×900

In Shopify

So wird es 1:1

Eigener Abschnitt type-kapitel. Jedes Kapitel ist ein Block mit Startsekunde (0, 125, 270, 540, 833, 1140, 1354), Zeitmarke, Titel, Text, Bild und optional Produkt mit Notiz.
Bild und Text wechseln von Zeile zu Zeile die Seite, volle Breite, am Handy untereinander.
Ein Klick auf Bild oder Zeitmarke startet den Film darüber an dieser Stelle.

Verhalten aus shop.js

Film: Sprung an die Startsekunde (data-seek)
Anker #k125 usw. aus der Startseite

Die Aufnahme am Desktop ist nach 2.600 px gekürzt, es folgen weitere Kapitel im selben Muster.

CSS für diesen Abschnitt · 20 Regeln

.mini { display: flex; align-items: center; gap: 12px; text-decoration: none; border: 1px solid var(--line); padding: 6px 12px 6px 6px; background: rgb(255, 255, 255); max-width: 100%; }
.mini img { width: 52px; height: 64px; object-fit: cover; background: var(--soft); flex: 0 0 auto; }
.mini span { font-size: 13px; line-height: 1.4; color: rgb(68, 68, 68); }
.mini b { display: block; color: rgb(17, 17, 17); font-weight: 500; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }
.mini:hover { border-color: rgb(17, 17, 17); }
.jch { padding: var(--sec) 0 0; }
.jch__h { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--edge) 32px; max-width: 900px; }
.jch__h p:last-child { color: rgb(51, 51, 51); }
.jchr { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: 8px; background: rgb(255, 255, 255); }
@media (min-width: 900px) {
  .jchr { grid-template-columns: minmax(0px, 7fr) minmax(0px, 5fr); }
  .jchr:nth-of-type(2n) .jchr__img { order: 2; }
}
.jchr__img { position: relative; padding: 0px; border: 0px; background: rgb(0, 0, 0); aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; }
.jchr__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.jchr__img:hover img { transform: scale(1.03); }
.jchr__img span { position: absolute; left: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); color: rgb(255, 255, 255); display: grid; place-items: center; }
.jchr__img span svg { width: 20px; height: 20px; margin-left: 3px; }
.jchr__x { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(24px,4vw,64px) var(--edge); }
@media (min-width: 900px) {
  .jchr__x { padding-inline: clamp(28px, 4vw, 72px); }
}
.jchr__t { background: none; border: 0px; padding: 0px; font-family: var(--h); font-size: clamp(1.1rem, 1.6vw, 1.4rem); text-decoration: underline; text-underline-offset: 6px; color: var(--mute); }
.jchr__x p { font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; max-width: 52ch; color: rgb(34, 34, 34); }

Zitat

1:1 mit eigenem AbschnittDatenCode

Erledigt

Design

Fläche: Desktop 1100 × 237 px · Handy 390 × 160 px
Innenabstand: 100.8px 51.8px 0px 51.8px · Handy 56px 16px 0px 16px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
citeAus der Filmbeschreibung	Outfit	11.5px	300	2.1px	11.7px	Versalien	#6B6B6B

Inhalte

Zitat„Worn in the film under real conditions, not styled for it.“
QuelleAus der Filmbeschreibung

In Shopify

So wird es 1:1

Als Zitat im Artikeltext oder als kleiner eigener Abschnitt. CSS .art__quote.

CSS für diesen Abschnitt · 2 Regeln

.art__quote { max-width: 1100px; margin: 0px auto; padding: clamp(56px,7vw,104px) var(--gut) 0; text-align: center; font-family: var(--h); text-transform: uppercase; font-size: clamp(1.6rem, 4.2vw, 3.4rem); line-height: 1.02; }
.art__quote cite { display: block; margin-top: 14px; font-family: var(--f); font-style: normal; font-size: 11.5px; letter-spacing: 0.18em; color: var(--mute); }

Bildpaar

1:1 mit eigenem AbschnittCode

Erledigt

Design

Fläche: Desktop 1440 × 925 px · Handy 390 × 288 px
Raster: 716px 716px · Abstand 8px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
figcaptionLookbook TYPE SHIT · getragen beim	Outfit	11.5px	300	1.2px	18.4px	Versalien	#6B6B6B

Inhalte

BildunterschriftLookbook TYPE SHIT · getragen beim Fahren, nicht für die Kamera

Bilder

jump.jpgSprung in den blauen Himmel, Lookbook TYPE SHITFeld 0.80 · Ausschnitt 50% 50% · Datei 1100×1684
night.jpgSkate-Session bei Nacht, Lookbook TYPE SHITFeld 0.80 · Ausschnitt 50% 50% · Datei 1100×1620

In Shopify

So wird es 1:1

Abschnitt type-bildpaar: zwei oder drei Bilder randlos nebeneinander, Bildunterschrift darunter. CSS .jpair.

CSS für diesen Abschnitt · 3 Regeln

.jpair { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; margin-top: var(--sec); }
.jpair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.jpair figcaption { grid-column: 1 / -1; padding: 4px var(--edge) 0; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

Der Designer mit drei Fragen

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 888 px · Handy 390 × 1034 px
Raster: 600px 840px · Abstand normal

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDer Designer	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Die Jeans von Mark Westmoreland	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pMark Westmoreland hat früher Denim	Outfit	15.5px	300	0.3px	24.8px		#000000
bWas nimmst du von Levi's und Evisu	Outfit	15.5px	500	0.3px	24.8px		#000000
.ph[Porträt Mark Westmoreland]	JetBrains Mono	13.3px	400	0	21.3px		#9A9A9A
bDouble Knee Jeans – Brickwall	Outfit	12px / 15.5px	500	0.8px	16.8px	Versalien	#111111

Inhalte

KickerDer Designer
ÜberschriftDie Jeans von Mark Westmoreland
TextMark Westmoreland hat früher Denim für Levi's und Evisu gestaltet. Für TYPE SHIT hat er die Double Knee Jeans entworfen: 13 oz Right Hand Twill, 100 % Baumwolle, doppelte Knie, eine Carpenter-Tasche und ein weiter Schnitt, den es so nur bei TYPE. gibt. Für uns ist sie die robusteste Hose, die wir je gemacht haben.
ZwischentitelDrei Fragen an Mark
Frage 1Was nimmst du von Levi's und Evisu mit in eine Hose fürs Bike? – [Antwort]
Frage 2Warum 13 oz Right Hand Twill und doppelte Knie? – [Antwort]
Frage 3Wie soll die Jeans nach einem Jahr im Park aussehen? – [Antwort]
Bild[Porträt Mark Westmoreland]
ProduktDouble Knee Jeans – Brickwall · €115,00 · 13 oz Denim · Mark Westmoreland

Bilder

p-jeans.jpgProduktbild, kommt aus dem ProduktFeld 0.81 · Ausschnitt 50% 50% · Datei 900×1125
front.jpgDouble Knee Jeans BrickwallFeld 0.44 · Ausschnitt 50% 50% · Datei 1400×1750
macro-stick.jpgBrickwall-Stickerei auf der MünztascheFeld 0.44 · Ausschnitt 50% 50% · Datei 1400×1750

In Shopify

So wird es 1:1

Abschnitt type-designer wie auf Über uns, ergänzt um Fragen als Blöcke und eine kleine Produktzeile mit Bild.

CSS für diesen Abschnitt · 6 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Journal · Der Film in sieben Kapiteln, Über uns · Der Designer

.qa { width: 100%; border-top: 1px solid rgb(17, 17, 17); margin-top: 6px; }
.qa .kick { padding: 12px 0px 4px; }
.qa div { padding: 12px 0px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.qa b { font-weight: 500; }
.art .mw { margin-top: var(--sec); }
.art .qa { max-width: 640px; }

16 Teile

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 1266 px · Handy 390 × 1632 px
Innenabstand: 93.6px 28.8px 0px 28.8px · Handy 56px 14px 0px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h216 Teile. 150 Stück pro Teil.	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
.lnkAlle 16 Teile	Outfit	12.5px	500	1.8px	20px	Versalien	#000000
.art__subGefertigt in Europa, jedes Teil in	Outfit	15.5px	300	0.3px	24.8px		#333333
.pc__tDouble Knee Jeans – Brickwall	Outfit	13.5px	400	0.9px	18.2px	Versalien	#000000
.pc__p€115,00	Outfit	15px	300	0.3px	24px		#000000
.pc__m13 oz Denim · Mark Westmoreland	Outfit	12.5px	300	0.3px	20px		#6B6B6B

Effekt an	Unschärfe (Glas)	Radius	Schatten	Fläche
.pq	blur(20px) saturate(2) brightness(1.04)	999px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pq__b	–	50%	–	–
.pq__b	–	50%	rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.06) 0px -1px 2px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px	#FFFFFF · 66 %
.pqs	blur(20px) saturate(2) brightness(1.04)	20px	rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px	Verlauf
.pqs__x	–	50%	–	–
.pqs__s	–	999px	rgba(255, 255, 255, 0.9) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.55) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px	#FFFFFF · 50 %

Inhalte

Überschrift16 Teile. 150 Stück pro Teil.
LinkAlle 16 Teile
UnterzeileGefertigt in Europa, jedes Teil in eigenem Schnitt, jeder Stoff selbst ausgewählt.
ProdukteDouble Knee Jeans – Brickwall · Flame Chino – Stratos x TYPE · Hoodie – Two Tone Backstitched · Hoodie – Waving Arms · Carpenter Jorts – Brickwall · Jersey – Fedko Signature (Nur noch wenige) · Longsleeve – Gorge · Tee – Rari

Bilder

p-jeans.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-chino.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-hoodie2.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-hoodie.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-jorts.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-jersey.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-longsleeve.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125
p-tee-rari.jpgProduktbild, kommt aus dem ProduktFeld 0.80 · Ausschnitt 50% 50% · Datei 900×1125

In Shopify

Schnell, aber nur ähnlich: „Ausgewählte Kollektion“ von Impulse in der Artikelvorlage.

So wird es 1:1

Raster und Karten wie auf der Startseite.

CSS für diesen Abschnitt · 1 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Im Film getragen, Grundlagen · Produktkarte mit Merken und Schnellkauf

.art__sub { color: rgb(51, 51, 51); margin-bottom: 22px; max-width: 70ch; }

Premiere und Credits

1:1 mit eigenem AbschnittCodeDaten

Erledigt

Design

Fläche: Desktop 1440 × 1111 px · Handy 390 × 1412 px
Innenabstand: 93.6px 0px 0px 0px · Handy 56px 0px 0px 0px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.kickDie Premiere	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
.h2Premiere in Innsbruck	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
pSeine Premiere hatte der Film in I	Outfit	15.5px	300	0.3px	24.8px		#000000
figcaptionFotos: Anna Rogler	Outfit	11.5px	300	1.2px	18.4px	Versalien	#6B6B6B
tdFilm	Outfit	14.5px	400	0.3px	23.2px		#000000
tdLouis Eder x KLEINMOND Studios x E	Outfit	14.5px	300	0.3px	23.2px		#000000

Inhalte

KickerDie Premiere
ÜberschriftPremiere in Innsbruck
TextSeine Premiere hatte der Film in Innsbruck. Seitdem läuft er frei für alle. [Zwei, drei Sätze zum Abend]
BildzeileFotos: Anna Rogler
FilmLouis Eder x KLEINMOND Studios x Erik Fedko
RidingErik Fedko, Tomas Lemoine, Emil Johansson, Nicholi Rogatkin und 17 weitere
LineSam „Hodgy“ Hodgson, Oscar Powell, Jonas Bachmann und die Greenhill-Crew
OrteGorge Road (Neuseeland), Coast Gravity Park (Kanada), Barcelona, Marseille, Greenhill Bikepark
PartnerRed Bull, YT Industries, SRAM, Swatch, Alpina, Noa Hubs, Greenhill Bikepark

Bilder

stage.jpgErik auf der Bühne bei der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1250
party.jpgDie Crew nach der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1000×1500
premiere.jpgDie Crew bei der PremiereFeld 0.80 · Ausschnitt 50% 50% · Datei 1400×2100

In Shopify

So wird es 1:1

Text oben, drei Bilder randlos nebeneinander, darunter die Credits als zweispaltige Tabelle. Credits als Blöcke mit Bezeichnung und Wert. CSS .jprem, .cred.

CSS für diesen Abschnitt · 7 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Produktseite · Kaufbereich mit Reitern, Journal · Bildpaar

.cred { margin-top: 26px; }
.jpair--3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); margin-top: 28px; }
@media (max-width: 699px) {
  .jpair--3 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .jpair--3 img:first-child { grid-column: 1 / -1; }
}
.jprem { padding: var(--sec) 0 0; }
.jprem__h { display: flex; flex-direction: column; gap: 12px; padding: 0 var(--edge); max-width: 900px; }
.jprem .cred { margin: 26px var(--edge) 0; width: calc(100% - 2 * var(--edge)); }

Weiterlesen

1:1 mit eigenem AbschnittEinstellungCode

Erledigt

Design

Fläche: Desktop 1440 × 618 px · Handy 390 × 1105 px
Innenabstand: 93.6px 28.8px 93.6px 28.8px · Handy 56px 14px 56px 14px

Element	Schrift	Größe D / H	Gewicht	Laufweite	Zeile	Schreibung	Farbe
.h2Weiterlesen	Helvetica Neue	51.8px / 30.4px	400	0.3px	51.8px	Versalien	#000000
.lnkAlle Artikel	Outfit	12.5px	500	1.8px	20px	Versalien	#000000
.kickRatgeber	Outfit	11.5px	500	2.5px	18.4px	Versalien	#6B6B6B
bDouble Knee Jeans: Größe, Passform	Outfit	16px	500	0.3px	21.6px		#000000

Inhalte

ÜberschriftWeiterlesen
LinkAlle Artikel
Karte 1Ratgeber · Double Knee Jeans: Größe, Passform, Maße
Karte 2Ratgeber · Was bedeutet 13 oz Denim?
Karte 3Szene · Rider-Porträt aus der Crew

Bilder

jc-passform.jpgDie Crew bei der Premiere in weiten SchnittenFeld 1.50 · Ausschnitt 50% 50% · Datei 1200×800
jc-designer.jpg13 oz Denim mit TYPE-PatchFeld 1.50 · Ausschnitt 50% 50% · Datei 1200×798
crew3.jpgdekorativFeld 1.50 · Ausschnitt 50% 50% · Datei 1000×1250

In Shopify

So wird es 1:1

Drei ausgewählte Artikel als Karten wie auf der Startseite (.jc).

Vor dem Livegang klären

Die drei Artikel gibt es noch nicht.

CSS für diesen Abschnitt · 0 Regeln · nutzt außerdem Regeln aus 2 anderen Abschnitten

Gemeinsame Regeln stehen bei: Startseite · Journal, Startseite · Was Käufer sagen

Vor dem Livegang

Checkliste

Was der Entwurf noch offen lässt, was bestätigt werden muss und was nicht in den Shop gehört.

Platzhalter füllen · 20

Abschnitt	Feld	Platzhalter
Startseite · Parkshop und Stände	Termin 2	[Nächstes Festival] – [Datum, Ort]
Startseite · Parkshop und Stände	Termin 3	[Übernächstes Festival] – [Datum, Ort]
Produktseite · Kaufbereich mit Reitern	Reiter Pflege	[Pflegehinweise wie auf dem Etikett ergänzen]
Produktseite · Die Geschichte der Hose	Zitat	[Ein Satz von Mark Westmoreland, warum die Hose so gebaut ist]
Produktseite · So sitzt sie	Beispiel 2	[Name] · [__ cm] · [Größe]
Produktseite · So sitzt sie	Beispiel 3	[Rider] · [__ cm] · L
Über uns · So entsteht ein TYPE.-Teil	Ergänzung	[Ein, zwei echte Beispiele, was sich von Drop zu Drop verändert hat, dazu ein Foto vom Schnittmuster oder der Anprobe]
Über uns · Der Designer	Zitat	[Ein Satz von Mark Westmoreland]
Über uns · Erik Fedko und die Crew	Ergänzung	[Zwei, drei Sätze in deinen Worten: seit wann du fährst, warum du TYPE. gegründet hast, was der Name bedeutet.]
Über uns · Erik Fedko und die Crew	Rider	Erik Fedko · [Rider] · [Rider] · [Rider]
Über uns · Fertigung	Jeans und Jorts	Schnitt von Mark Westmoreland, Right Hand Twill · 13 oz · [Land]
Über uns · Fertigung	Caps	eigenes Design · – · [Land]
Über uns · Fertigung	Ergänzung	[Werkstätten mit Name oder Region, zwei Fotos aus der Produktion]
Über uns · Vor Ort	Termin 2	Termin TBA · [Festival] · [Ort] · Stand
Über uns · Vor Ort	Termin 3	Termin TBA · [Festival] · [Ort] · Stand
Journal · Der Designer mit drei Fragen	Frage 1	Was nimmst du von Levi's und Evisu mit in eine Hose fürs Bike? – [Antwort]
Journal · Der Designer mit drei Fragen	Frage 2	Warum 13 oz Right Hand Twill und doppelte Knie? – [Antwort]
Journal · Der Designer mit drei Fragen	Frage 3	Wie soll die Jeans nach einem Jahr im Park aussehen? – [Antwort]
Journal · Der Designer mit drei Fragen	Bild	[Porträt Mark Westmoreland]
Journal · Premiere und Credits	Text	Seine Premiere hatte der Film in Innsbruck. Seitdem läuft er frei für alle. [Zwei, drei Sätze zum Abend]
Produktseite · So sitzt sie	Maßtabelle	Bund, Innenbein, Oberschenkel und Saum für S bis XL

Fakten bestätigen

Gratis Versand ab 80 € und Versand nach Österreich und in die Schweiz: Vorschlag aus dem Dossier, erst nach der Umstellung der Versandeinstellungen zeigen.
150 Stück pro Teil im Drop TYPE SHIT.
13 oz Right Hand Twill, 100 % Baumwolle; 200 gsm Tees; 280 und 320 gsm Hoodies; Hoodie Two Tone vorgewaschen.
Mark Westmoreland, früher Denim-Designer bei Levi's und Evisu.
Gefertigt im Norden Portugals und in der Türkei; Herkunft von Jeans, Jorts und Caps fehlt noch.
Lieferzeiten Deutschland 4–6, EU 5–7 Werktage; 14 Tage Umtausch über das Retourenportal.
Model 175 cm trägt M.
Parkshop im Greenhill Bikepark geöffnet seit 13.09.
Datum des Journal-Artikels (1. August 2026), Lesezeit und Credits.
Partnerliste: Red Bull, YT Industries, SRAM, Swatch, Alpina, Noa Hubs, Greenhill Bikepark.
Bildnachweise: Fotografen der Lookbook-Bilder prüfen (genannt ist Anna Rogler für die Premiere).
Frühzugang „24 Stunden früher“ für die Crew: erst versprechen, wenn der Ablauf steht.

Nicht übernehmen

Die graue Entwurfsleiste ganz oben (Entwurf · TYPE. Shop, Seitenwahl, Zum Dossier).
Der Zusatz „Entwurf zur Ansicht, kein echter Shop“ im Fuß.
Die schwarzen Meldungen unten am Bildschirm. Im Shop übernimmt die Warenkorb-Schublade von Impulse.
Links auf typeclothing.de bei den Produktkarten. Im Shop sind das normale Produktlinks.
Das Bewertungsformular als Demo. Im Shop ist das das Formular von Judge.me.
Unbenutzte CSS-Regeln aus früheren Entwurfsständen, die das Skript erkannt hat.

Stand 7.10.2026 · Shop-Entwurf unter shop/index.html · Haken bei „Erledigt“ bleiben nur in diesem Browser gespeichert.