Hangrail-Dokumentation

10Theme installieren

1. Öffne im Shopify-Adminbereich Onlineshop > Themes.
2. Wähle Theme hinzufügen > ZIP-Datei hochladen und dann hangrail.zip.
3. Wähle Anpassen, um den Theme-Editor zu öffnen.
4. Wähle in der Section Kleiderstange auf der Startseite deine neue Kollektion: Einige Teile hängen an der Stange. Darunter geht der Shop wie eine klassische Website weiter: Wähle eine Kollektion unter Vorgestellte Kollektion und die Teile eines Outfits unter Shop the Look.
5. Wähle Veröffentlichen, wenn alles bereit ist.

Solange keine Produkte gewählt sind, zeigen die Sections gezeichnete Kleidungsstücke an der Stange. So sieht der Shop schon am ersten Tag nach Hangrail aus.

20Produkt als Mockup anzeigen

Ein Produkt wird zum gezeichneten Mockup, sobald es den Tag mockup:<typ> hat, zum Beispiel mockup:hoodie. Ohne diesen Tag zeigt das Produkt seine Fotos.

Das Druckmotiv

• Füge das Motiv (Logo, Muster, Illustration) als Produktbild hinzu, am besten als .png mit transparentem Hintergrund.
• Schreibe in den Alt-Text des Bildes [front] für die Vorderseite oder [back] für die Rückseite. Beispiel: Stern-Logo [front].
• Ohne Markierung dient das erste Produktbild als Motiv für die Vorderseite.
• Die Motive bleiben in der Galerie der Produktseite, nach dem Mockup und den Fotos.

Position und Größe

Ein Kleidungsstück aus deinem Stoff

Für einen bedruckten Stoff (Toile de Jouy, Karo, Blumen …) fotografierst du ein flach liegendes Stück Stoff, fügst es als Produktbild mit [front] (und [back]) im Alt-Text hinzu und vergibst den Tag print:fabric (und print-back:fabric). Das Foto wiederholt sich über das ganze Kleidungsstück, Nähte, Taschen und Schatten bleiben sichtbar. Verwende für diese Varianten eine weiße oder helle Farbe. print-size legt die Größe des Rapports fest.

Stoffstruktur

Mit texture:corduroy (Cord), texture:knit (Strick), texture:fleece, texture:denim, texture:waffle, texture:lace (Spitze) oder texture:satin bekommt das Mockup die Optik seines Stoffs. Mützen sind immer gestrickt.

Deine eigenen Fotos auf dem Bügel

Produkte ohne mockup:-Tag zeigen ihr Foto, und ein freigestelltes Foto hängt von selbst auf dem Bügel. Siehe Fotos auf dem Bügel.

Bei Hosen und Shorts steht chest für den Oberschenkel und center für das Bein. Bei der Tote Bag sind es ein kleines und ein großes Motiv.

Farbe des Kleidungsstücks

Das Mockup übernimmt die Farbe der gewählten Variante. Lege eine Option Farbe an und gib jedem Wert im Adminbereich ein Farbfeld (Swatch). Ohne Farbfeld versucht das Theme den englischen Farbnamen (black, navy …) und danach die Standardfarbe aus Theme-Einstellungen > Farben. Welche Optionsnamen als Farbe gelten, legst du unter Theme-Einstellungen > Stange und Mockups fest.

12345

1. 1Das Mockup übernimmt die gewählte Farbe
2. 2Auswahl Vorderseite / Rückseite
3. 3Farben als Hängeetiketten aus Kraftpapier
4. 4Größen als Buttons
5. 5In den Warenkorb und Express-Checkout

30Fotos auf dem Bügel

Jedes Produkt ohne Mockup kann sein eigenes Foto zeigen. Hat das Foto einen transparenten Hintergrund, hängt Hangrail es wie ein echtes Kleidungsstück auf: an der Stange, auf der Produktseite, in der Schnellansicht und in Shop the look. In Produktrastern wird das Foto ganz gezeigt, ohne Bügel. Nichts einzustellen: Das Theme liest das Foto und wählt die Aufhängung.

In vier Schritten

1. 1
   Fotografiere das Kleidungsstück allein, flach liegend oder auf unsichtbarer Puppe, vor einfarbigem Hintergrund.
2. 2
   Öffne im Shopify-Adminbereich das Bild, wähle Farbiger Hintergrund › Transparent und dann Als neu speichern. Du erhältst ein PNG.
3. 3
   Setze dieses PNG als erstes Produktbild. Füge keinen mockup:-Tag hinzu.
4. 4
   Fertig: Das Kleidungsstück hängt von selbst, überall im Shop.

Was das Theme liest

Hangrail betrachtet das Foto in winziger Größe und zeichnet einen passenden Bügel. Der Haken kommt aus dem Kragen; die Stange des Bügels liegt hinter dem Kleidungsstück und endet innerhalb seiner Umrisse, sichtbar ist sie nur zwischen zwei Trägern. Ein flacher Bund oder ein Produkttyp wie Hose, Jeans oder Rock bedeutet Unterteile: Zwei Klammern halten die Enden des Bunds. Dann wird das Foto angehoben, bis die Oberkante des Hakens die Stange erreicht.

Drei Arten aufzuhängen

• BügelOberteile, Kleider, Jacken, Mäntel und BHs. Zwischen zwei Trägern ist der Bügel zu sehen.hanger:bar
• KlammernHosen, Jeans, Röcke und Shorts, erkannt am Produkttyp oder an einem flachen Bund.hanger:clip
• HakenCaps, Hüte, Mützen und Taschen, erkannt am Produktnamen in 19 Sprachen.hanger:hook

Das Theme wählt für dich. Um selbst zu wählen, gib dem Produkt den Tag.

Größe an der Stange

Nebeneinander wird jedes Foto so groß gezeigt, dass die echten Proportionen bleiben: Ein langes Kleid hängt tiefer als ein Blazer, eine Tasche ist kleiner als ein Mantel. Kleidung hängt in voller Größe. Caps, Hüte, Mützen und Taschen hängen mit 70 %: Das änderst du unter Theme-Einstellungen › Kleiderstange und Mockups › Größe von Caps, Hüten und Taschen (100 % lässt sie in voller Größe). Für ein einzelnes Produkt setzt du einen Tag wie size:75, von 30 bis 150: ein Kinderrock mit size:75, ein langer Mantel mit size:110.

Welche Fotos am besten funktionieren

• GehtFlach gelegtHintergrund entfernt.
• GehtUnsichtbare PuppeHintergrund entfernt.
• VermeidenVon einem Model getragenDas Freistellen behält den Körper, der mit aufgehängt würde.
• VermeidenJPG mit HintergrundWird gerahmt gezeigt, von zwei Klammern gehalten.

Nimm mindestens 1200 px an der langen Seite, halte das ganze Kleidungsstück im Bild (Ärmel und Säume inklusive), schneide eng zu und beleuchte die ganze Kollektion gleich.

Seitenansicht, Rückansicht und Drehung

Zusätzliche Bilder desselben Produkts bringen Bewegung. Markiere sie in ihrem Alt-Text (im Shopify-Adminbereich das Bild öffnen und den Alt-Text bearbeiten):

Füge den Farbnamen hinzu, um ein Bild nur für eine Farbe zu verwenden, zum Beispiel Blazer [side] Schwarz. Fotografiere Seiten- und Rückansicht wie die Vorderseite (gleiches Licht, gleicher Abstand) und stelle sie genauso frei. Für ein Drehvideo filmst oder generierst du 2 bis 4 Sekunden vor hellem, einfarbigem Hintergrund, das Kleidungsstück auf seinem Bügel oben im Bild; es beginnt mit der Seitenansicht und endet vorn. Die Markierungen werden der Kundschaft nicht vorgelesen.

Die Einstellung

Theme-Einstellungen › Kleiderstange und Mockups › Produktfotos ohne Mockup: Automatisch (Standard) hängt Fotos mit transparentem Hintergrund auf und rahmt die anderen. Freigestellt am Bügel hängt sie immer auf, Gerahmtes Foto rahmt sie immer.

40Die Kleiderstange

Die Kleiderstange ist das Markenzeichen des Themes. Du findest sie in der Section Kleiderstange, in den Ansichten der Kollektionsseite und unter Ähnliche Produkte.

• Luftig: Die Teile hängen nebeneinander. Das Teil unter dem Mauszeiger tritt nach vorne, die anderen treten zurück.
• Kompakt (3D): Die Teile hängen dicht und seitlich. Das Teil unter dem Mauszeiger dreht sich zur Kundschaft und tritt nach vorne, die Nachbarn fächern sich auf und weichen mit dem Abstand zurück, und die Perspektive folgt der Maus. Auf dem Smartphone dreht sich das Teil in der Bildschirmmitte beim Scrollen.

Ein Klick auf ein Teil öffnet die Nahansicht mit Rückseite und den Farben als Hängeetiketten. Verfügbarkeit ansehen öffnet die Schnellansicht, in der die Kundschaft die Größe wählt und in den Warenkorb legt.

Den Abschnitt einrichten

• Layout: die Überschrift links oder zentriert über der Stange mit einem Untertitel darüber. Beim zentrierten Layout stehen die Ansichtsauswahl, ein kurzer Text unter der Stange und der Link zur Kollektion in einer Zeile unter der Stange.
• Form der Stange: gerade oder gebogen, die in der Mitte leicht durchhängt wie eine echte Stange. Jedes Kleidungsstück hängt am Punkt der Kurve direkt darüber.
• Preisschilder: Ein kleines Kraftpapier-Schild mit dem Preis hängt an jedem Haken. In der kompakten Ansicht zeigt nur das gewählte Teil sein Schild. Sale-Preise erscheinen in der Sale-Farbe.
• Hintergrundbild: eine Wand, ein Studio oder eine Landschaft hinter der Stange, mit einer Überlagerung in der Farbe des Farbschemas, damit der Text lesbar bleibt.

Seitenansichten, Rückansichten und Drehvideos kommen aus den Bildern des Produkts: siehe Fotos auf dem Bügel.

50Sections

60Kollektionsfilter

Die Kundschaft sortiert eine Kollektion wie im Laden. Die Filter kommen aus Shopifys kostenloser App Search & Discovery; das Theme gibt ihnen seinen eigenen Stil.

12345

1. 1Verfügbarkeit als Schalter
2. 2Suche in langen Listen
3. 3Größen als Buttons, mit Anzahl
4. 4Sortierung
5. 5Raster- oder Listenansicht

• Drei Layouts unter Kollektion › Filter-Layout: eine Seitenleiste, die beim Scrollen mitläuft, eine Schublade oder eine horizontale Leiste mit Dropdowns über den Produkten. Auf dem Handy öffnen sich die Filter immer in einer Schublade.
• Preis: ein Schieberegler auf einem Maßband, zwei Felder und Preisspannen per Klick.
• Farben zeigen ihr Farbfeld auf einem Etikett. Gib jedem Wert deiner Farboption im Shopify-Adminbereich ein Farbfeld.
• Aktive Filter erscheinen als Etiketten über den Produkten und verschwinden mit einem Klick.

70Theme-Einstellungen

Alle Farben des Themes kommen aus Farbschemata. Änderst du ein Schema, ändern sich alle Sections, die es nutzen, inklusive Bügel und Hängeetiketten.

Jedes Schema legt 13 Farben fest: Hintergrund, Text, Schaltfläche und ihre Beschriftung, Fläche und ihr Text, Rahmen, Stange und Bügel, Hängeetiketten und ihr Text, Maßband und sein Text sowie Sale.

• Typografie: Schriften für Überschriften, Text und Etiketten, Größen, Überschriften in Großbuchstaben.
• Layout: Seitenbreite, Ränder, Eckenradius von Schaltflächen, Feldern und Karten, Brotkrümelnavigation auf Produkt- und Kollektionsseiten.
• Stange und Mockups: Breite der Kleidungsstücke, Fotostil (freigestellt oder gerahmt), Bügel (Holz, Stahl oder Schwarz), 3D-Tiefe und Schatten (beleuchtete Wand, weiche Schlagschatten, Kleidungsstücke, die sich zum Mauszeiger drehen, sanft schwingende Etiketten), Schwingen beim Hover, Optionsnamen, die als Farbe gelten.
• Produktkarten: Farbfelder zum Ausprobieren direkt auf der Karte, Rückseite beim Hover, Schnellansicht, Hersteller.
• Warenkorb: Einschub oder Seite, Bestellnotiz, Maßband für kostenlosen Versand und Schwelle, Zahlungslogos unter dem Kassen-Button.

80Produktseite

Die Infospalte besteht aus Blöcken, die du umsortieren kannst: Titel, Hersteller, Preis, SKU, Variantenauswahl, Menge, Bestandsanzeige, Kauf-Buttons, Beschreibung, Text, Ausklapp-Tab, Größentabelle, Teilen, ergänzende Produkte, eigenes Liquid und App-Blöcke.

• Geschenkgutscheine können mit Nachricht und Versanddatum an eine Person gesendet werden.
• Abonnements, Grundpreise und Ratenzahlung mit Shop Pay werden unterstützt.
• Die Verfügbarkeit zur Abholung passt sich der gewählten Variante an.
• Videos und 3D-Modelle laufen in der Galerie, auf geeigneten Geräten mit In deinem Raum ansehen.
• Mengenregeln (Minimum, Maximum, Schritte) und Staffelpreise aus B2B-Katalogen erscheinen unter der Mengenauswahl und folgen der gewählten Variante.

90Funktionen, die verkaufen

Die meistverkauften Mode-Themes teilen ein paar Funktionen, die aus einem Besuch eine Bestellung machen. Hangrail hat sie, im eigenen Showroom-Stil. Jede ist optional.

Bestandsanzeige: Die angezeigte Zahl ist dein echter Shopify-Bestand. Sie erscheint nur bei Varianten, deren Inventar Shopify verfolgt und die nicht ohne Bestand verkauft werden können (Verkauf fortsetzen, wenn nicht vorrätig ausgeschaltet). Produkte ohne Verfolgung zeigen nichts.

Countdown: Gib das Enddatum als 2026-12-24 18:00 in der Zeitzone deines Shops ein (Einstellungen > Allgemein). Zähle nur auf echte Daten herunter: Ein Timer, der bei jedem Besuch neu startet, täuscht Kundschaft und verstößt gegen die Theme-Store-Regeln.

100Warenkorb und Checkout

Der Warenkorb öffnet sich als Einschub oder auf Wunsch als eigene Seite (Theme-Einstellungen > Warenkorb).

• Mengen ändern sich ohne Neuladen der Seite.
• Automatische Rabatte und Rabattcodes erscheinen pro Artikel und in der Summe.
• Optionale Bestellnotiz und ein Maßband für kostenlosen Versand mit einstellbarer Schwelle.
• Express-Checkout-Buttons (Shop Pay, Apple Pay, Google Pay und weitere).

Den Checkout selbst verwaltet Shopify unter Einstellungen > Checkout.

110Sprachen und Währungen

Hangrail ist in 19 Sprachen übersetzt, für die Kundschaft und für den Theme-Editor:

• Englishen
• Françaisfr
• Deutschde
• Españoles
• Italianoit
• Nederlandsnl
• Português (Brasil)pt-BR
• Português (Portugal)pt-PT
• Svenskasv
• Danskda
• Norsk bokmålnb
• Suomifi
• Polskipl
• Češtinacs
• Türkçetr
• 日本語ja
• 한국어ko
• 简体中文zh-CN
• 繁體中文zh-TW

1. Füge Sprachen unter Einstellungen > Sprachen hinzu. Die Texte des Themes wechseln automatisch.
2. Übersetze deine eigenen Inhalte (Produkte, Kollektionen, Texte in Sections) mit der kostenlosen Shopify-App Translate & Adapt.
3. Blende im Header die Sprachauswahl ein.

Die Länderauswahl zeigt alle Länder und Währungen, die du unter Einstellungen > Märkte aktiviert hast, mit Suchfeld. Shopify rechnet die Preise automatisch um. Akzeptierte Zahlungsarten erscheinen im Footer mit ihren offiziellen Logos.

120Barrierefreiheit und Leistung

• Alles lässt sich mit der Tastatur bedienen, mit sichtbarem Fokus.
• Animationen stoppen, wenn das Gerät reduzierte Bewegung verlangt. Die Maßband-Leiste hat eine Pause-Taste.
• Bilder laden in der passenden Größe für jeden Bildschirm. Mockups werden im Code gezeichnet, ohne Bild zum Herunterladen.

130Häufige Fragen

Das Mockup erscheint nicht.

Prüfe den Tag mockup: (ohne Leerzeichen) und den Typnamen in der Tabelle.

Das Motiv ist zu klein.

Schneide die .png eng um die Zeichnung zu oder füge print-size:140 hinzu.

Das Kleidungsstück bleibt weiß.

Gib dem Optionswert im Adminbereich ein Farbfeld.

Ich möchte Fotos statt eines Mockups.

Entferne den Tag mockup:. Den Fotostil an der Stange stellst du unter Theme-Einstellungen > Stange und Mockups ein.

Die Bestandsanzeige erscheint nicht.

Aktiviere in den Varianten des Produkts Menge verfolgen und deaktiviere Verkauf fortsetzen, wenn nicht vorrätig. Die Anzeige erscheint ab der im Block eingestellten Schwelle.

Die Filter erscheinen nicht.

Lege sie in Shopifys App Search & Discovery an und prüfe, dass Filtern aktivieren in der Section Kollektion eingeschaltet ist.

Kann die Kundschaft eigene Motive hochladen?

Nicht mit dem Theme allein: Es zeigt die Motive, die du im Adminbereich hinzufügst. Personalisierung durch die Kundschaft braucht eine Shopify-App.

140Support

Fragen zu Hangrail? Schreib an ibradventure.company@gmail.com. Wir antworten innerhalb von zwei Werktagen. Gib die Adresse deines Shops an und füge bei Darstellungsfehlern einen Screenshot hinzu.

150Versionshinweise