Zum Inhalt springen
  1. Start
  2. Projekte
  3. Bipo-Atelier
WebOnline

Bipo-Atelier

Ein eigenes T-Shirt in unter einer Minute.

Der T-Shirt-Designer des Montibit-Shops. Vier Schritte, jede Wahl sofort auf dem Shirt sichtbar: T-Shirt, Farbe, Motiv, Grösse. Wer ein Lieblings-T-Shirt nachmisst, bekommt die passende Grösse empfohlen. Bezahlt wird mit TWINT oder Karte, danach wird jedes Shirt einzeln gedruckt und verschickt.

  • Live-Vorschau auf dem Shirt
  • Grösse durch Nachmessen
  • TWINT, Visa, Mastercard
Bipo-Atelier, Schritt Grösse: Messbild mit Breite A 57 cm und Länge B 75 cm, Bipos Tipp Grösse L, links das T-Shirt in Natur mit Motiv 6 · 7
Bipos Tipp: LA 56.5 cm · B 75 cm · passt genau
4Schritte vom leeren Shirt bis zum Warenkorb
337Motive in 22 Kategorien
58Stofffarben für Erwachsene, 31 für Kinder
16Grössen, von 98/104 bis 5XL

Ein Fenster, ein T-Shirt, vier Entscheidungen

Viele T-Shirt-Designer sind Grafikprogramme mit Ebenen, Schriften und Werkzeugleisten. Das Bipo-Atelier geht den anderen Weg. Es stellt pro Schritt genau eine Frage, alles andere ist sinnvoll vorbelegt. Jede Berührung ist sofort auf dem Shirt zu sehen. Das macht das Gestalten auch für Kinder einfach.

Üblicher T-Shirt-Designer

  • Werkzeugleisten, Ebenen und Schriftmenüs
  • Grösse nach Tabelle raten und zurückschicken, wenn sie nicht passt
  • Am Handy kaum bedienbar
  • Bestellung, Rechnung und Versand von Hand nachführen

Mit dem Bipo-Atelier

  • Bipo stellt pro Schritt eine Frage, mehr nicht
  • Lieblings-T-Shirt nachmessen, Bipo nennt die Grösse
  • Gleich gut am Computer, Tablet und Handy
  • Zahlung, Buchhaltung, Druck und Versand laufen automatisch
Im Shop

Ein grosser Knopf öffnet das Atelier

Das Atelier steht nicht auf der Shop-Seite, sondern öffnet sich als Fenster darüber. Die Seite dahinter wird grau und unscharf, der Blick bleibt beim Shirt. Auch die zwanzig Bestseller-Motive im Shop öffnen das Atelier direkt mit dem gewählten Motiv.

  • Schliessen mit ×, Escape, Klick daneben oder Zurück-Taste
  • Der Entwurf bleibt im Browser und wartet beim nächsten Besuch
  • «Alles zurücksetzen» beginnt mit einem leeren Shirt
Montibit-Shop: Kopf mit Werbebild Bipo im Atelier und den drei Wegen Selbst gestalten, Gutschein verschenken und Gutschein einlösen

Vier Schritte, sieben Berührungen

Links steht das Shirt gross in der gewählten Farbe, mit Motiv, Schatten und Licht. Rechts stellt Bipo die Frage des Schritts. Unter dem Shirt fassen vier Kacheln die Wahl zusammen. Ein Tipp darauf springt zurück zum Schritt.

  1. T-Shirt

    Zwei grosse Karten: Kinder und Jugendliche oder Erwachsene. Die Wahl führt gleich weiter.

    Schritt 1
  2. Farbe

    Alle Stofffarben als Kreise, nach Farbfamilien geordnet. Schon beim Darüberfahren färbt sich das Shirt.

    Schritt 2
  3. Motiv

    337 Motive mit Suche, Filtern und Würfel. Das gewählte Motiv sitzt sofort in Druckgrösse auf dem Shirt.

    Schritt 3
  4. Grösse

    Lieblings-T-Shirt nachmessen, Bipo empfiehlt die Grösse. Dann Menge wählen und ab in den Warenkorb.

    Schritt 4
Schritt 1: Bipo fragt, für wen das T-Shirt ist, zwei Karten Kinder und Jugendliche CHF 34 und Erwachsene CHF 39
Schritt 1Für wen ist das T-Shirt?Kinder von 3 bis 13 Jahren oder Erwachsene von XXS bis 5XL. Der Preis steht gleich auf der Karte.
Schritt 2: Farbkreise aller Stofffarben, gewählt Aquablau, das T-Shirt links ist hellblau
Schritt 2Welche Farbe?Die Kreise passen sich der Fenstergrösse an. Alle 58 Farben sind ohne Scrollen sichtbar.
Schritt 3: grosser Knopf Anderes Motiv auswählen, darunter das gewählte Motiv 6 · 7, links das T-Shirt in Natur mit Motiv
Schritt 3Welches Motiv?Ein grosser Bipo-Knopf öffnet die Motivauswahl. Das gewählte Motiv ist grün bestätigt.
Schritt 4: Masse A 57 und B 75 cm eingetragen, Bipos Tipp L, Grössen XXS bis 5XL in einer Reihe, Menge 1, In den Warenkorb
Schritt 4Welche Grösse?Erst messen, dann wählen. Bipos Tipp ist gelb markiert, die Kachel unten zeigt Grösse und Masse.

Der Grössen-Editor: messen statt raten

Die häufigste Frage beim Kleiderkauf im Internet ist die Grösse. Das Atelier löst sie mit einem T-Shirt, das schon gut passt. Es wird flach hingelegt und an zwei Strecken gemessen. Aus den beiden Massen errechnet Bipo die passende Grösse und sagt, wie gut sie passt.

Zwei Masse

A Breite, B Länge

Das Messbild zeigt beide Strecken. Tippt man ins Feld A, leuchtet die orange Linie von Achsel zu Achsel. Im Feld B leuchtet die blaue Linie von der Schulter bis zum Saum. Die Felder nehmen nur Ziffern an und zeigen ein Beispiel in Grau.

  • A: von Achsel zu Achsel, 1 cm unter dem Ärmel
  • B: vom höchsten Punkt der Schulter bis zum Saum
  • Unplausible Werte werden markiert, bevor eine Grösse erscheint
  • Ohne Masse keine Grössenwahl, damit niemand falsch bestellt
Grössen-Editor vor dem Messen: Messbild mit Strecken A und B, leere Felder mit Beispiel 57 cm und 75 cm, Hinweis Sobald A und B eingetragen sind
Bipos Tipp

Die passende Grösse, mit Begründung

Bipo vergleicht beide Masse mit der Grössentabelle des Shirts. Die Breite zählt doppelt, denn ein zu enges Shirt ist schlimmer als ein etwas weites. Zu enge Grössen bekommen einen Abzug. Das Ergebnis steht in Worten neben der Grösse.

  • «passt genau» bis 1.5 cm Abweichung
  • «etwas weiter (+2 cm)» oder «etwas enger»
  • Bipos Tipp gelb markiert, alle anderen Grössen bleiben wählbar
  • Die gewählte Grösse steht mit A und B in der Kachel unter dem Shirt
Bipos Tipp L: A 56.5 cm passt genau, B 75 cm passt genau, Grösse L gelb markiert
Kinder-Shirt: A 36 und B 51 cm, Bipos Tipp 7–8 Jahre, Grössen von 3–4 bis 12–13 Jahren mit Körpergrösse in cm, gelber Hinweis Bitte Grösse auswählen
KinderGrössen nach Alter und KörpergrösseFür Kinder zeigt Bipo das Alter und die Körpergrösse in Zentimetern. Ein gelber Hinweis bleibt, bis eine Grösse gewählt ist.
Hinweisfenster: Diese Masse passen eher zu einem Erwachsenen-T-Shirt, Knopf Auf Erwachsenen-T-Shirt wechseln Grösse L
WechselMasse passen zum anderen Shirt?Misst jemand beim Kinder-Shirt ein Erwachsenen-Shirt aus, schlägt Bipo den Wechsel vor, gleich mit der richtigen Grösse.
  1. Hinlegen

    Ein gut passendes T-Shirt flach hinlegen und glatt streichen.

  2. Messen

    Breite A und Länge B mit dem Massband messen.

  3. Eintragen

    Zwei Zahlen ins Atelier tippen. Die Linie im Messbild leuchtet mit.

  4. Bipos Tipp

    Die passende Grösse ist markiert, mit «passt genau» oder dem Unterschied in cm.

337 Motive, 58 Farben, eine Vorschau

Die Motive stammen aus der Welt von Montibit: Bipo beim Skifahren, im Garten, beim Gaming oder am Apéro. Gefunden wird ein Motiv über Zielgruppe, Kategorie, Suche oder Zufall.

Motivauswahl

Ein Fenster so gross wie der Bildschirm

Die Motivauswahl öffnet sich über das ganze Browserfenster. Oben stehen Reiter für die Zielgruppen, ein schmales Suchfeld, «Überrasch mich» und alle Filter. Die Kacheln zeigen das Motiv gleich auf der gewählten Stofffarbe.

  • Reiter: Alle, Kinder, Jugendliche, Erwachsene, Grosseltern
  • Filter: Bestseller, Tipp, Neu, Hobbys, Bipo pur und 22 Kategorien
  • Suche mit einem Wort, sortiert nach Treffergenauigkeit
  • Stofffarbe direkt im Fenster wechseln
Motivauswahl über das ganze Fenster: Farbzeile, Reiter, Suche, Filter mit Symbolen und ein Raster mit Bipo-Motiven, gewählt 6 · 7
Vorschau

So sieht das Shirt aus

Das Shirt entsteht aus einer Stoffmaske in der echten Stofffarbe, darüber das Motiv in Druckgrösse sowie Schatten und Licht. «Gross ansehen» zeigt es bildschirmfüllend mit allen Angaben.

  • Druckgrösse ca. 34 cm bei Erwachsenen, 27 cm bei Kindern
  • Kleine Motive für die Brust links mit 10 bzw. 8 cm
  • Helle Platzhalter auf dunklem Stoff, dunkle auf hellem
Grossansicht: T-Shirt in Natur mit dem Motiv 6 · 7 bildschirmfüllend, darunter T-Shirt mit Bipo-Motiv, Natur, 6 · 7

Ein T-Shirt verschenken, das sich die beschenkte Person selbst gestaltet

Grösse, Farbe und Motiv sind beim Schenken oft unbekannt. Darum gibt es den Gutschein: Er wird bezahlt und per E-Mail als A4-Blatt zum Ausdrucken verschickt. Wer ihn bekommt, gestaltet im selben Atelier und bestellt gratis.

Gutschein verschenken: links Vorschau des A4-Gutscheins mit Kinder-T-Shirt und Code, rechts Für wen, Gruss und Menge
VerschenkenEin Bildschirm, live auf dem GutscheinKinder- oder Erwachsenen-Shirt wählen, Name und Gruss eintragen. Das A4-Blatt links zeigt den Text sofort. Der Versand ist im Gutscheinpreis enthalten.
Gutschein einlösen: Feld für den Gutschein-Code BIPO-XXXX-XXXX und Knopf Gutschein prüfen
EinlösenCode rein, Shirt rausCode eingeben, der Server prüft ihn. Danach Farbe, Motiv und Grösse wählen, Lieferadresse angeben und für CHF 0.00 bestellen.

A4-PDF mit QR-Code

Pro Gutschein ein eigener Code auf einem eigenen Blatt. Der QR-Code führt direkt zum Einlösen.

Code nie im Browser

Der Entwurf wird gespeichert, der Gutschein-Code nie. Einmal eingelöst, ist er verbraucht.

Shirt steht fest

Beim Einlösen ist Kinder- oder Erwachsenen-Shirt schon gesetzt. Ein gelbes Band zeigt Gutschein und Namen.

Am Handy genauso einfach

Auf dem Handy füllt das Atelier den ganzen Bildschirm. Oben stehen das Shirt klein und die vier Kacheln, in der Mitte scrollt Bipos Frage, unten klebt die Leiste mit Zurück, Preis und Weiter.

Handy: Schritt Motiv mit grossem Knopf Anderes Motiv auswählen, oben Shirt und Kacheln, unten Zurück, Preis CHF 39 und Weiter
Motiv wählenDer grosse Bipo-Knopf öffnet die Motivauswahl über den ganzen Bildschirm.
Handy: Grössen-Editor mit A 57 und B 75 cm, Bipos Tipp L, Grössen in zwei Reihen, In den Warenkorb
Grösse wählenZifferntastatur für die Masse, Grössen in zwei Reihen, Warenkorb immer in Reichweite.

Zurück-Taste schliesst

Die Zurück-Taste des Handys schliesst das Atelier, statt die Seite zu verlassen.

Entwurf bleibt

Fenster zu, später weiter: Shirt, Farbe, Motiv und Masse warten im Browser.

Eigene Zeichen

Alle Symbole sind im Montibit-Stil gezeichnet, ohne Emoji und ohne Browser-Standardzeichen.

Vom Warenkorb bis zum Paket, ohne Handarbeit

Hinter dem Atelier läuft eine ganze Kette. Sie beginnt mit der Zahlung und endet mit der Sendungsnummer im Postfach der Kundschaft. Dazwischen entstehen Rechnung, Buchung und Druckauftrag von selbst.

  1. Warenkorb

    Fertige Shirts klein abgebildet, Menge änderbar. Versand CHF 6.90, ab CHF 80 gratis.

    Shop
  2. Gast-Kasse

    Ohne Kundenkonto, nur Lieferadresse und E-Mail. Mit Montibit-Konto ist alles vorausgefüllt.

    Shop
  3. Bezahlen

    Bezahlseite von Payrexx mit TWINT, Visa, Mastercard und PostFinance.

    Payrexx
  4. Zahlung bestätigt

    Die Meldung von Payrexx wird nie blind geglaubt. Der Server fragt Betrag, Währung und Bezahlseite selbst nach.

    Server
  5. Bestätigung

    Quittung an die Kundschaft, Meldung «Neue Bestellung» ans Team.

    Server
  6. bexio

    Kontakt, Rechnung mit allen Positionen und die Zahlung entstehen in bexio von selbst.

    bexio
  7. Produktion

    Der Auftrag geht mit allen Druckangaben an die Produktion: Artikel, Stofffarbe, Grösse, Motiv und Druckgrösse.

    Druck
  8. Versand

    Jedes Shirt wird einzeln gedruckt und mit der Schweizerischen Post verschickt, in die Schweiz und nach Liechtenstein.

    Post
  9. Unterwegs

    Mit der Sendungsnummer geht die E-Mail «unterwegs» mit Link zur Sendungsverfolgung.

    Server
  • Offen
  • Bezahlt
  • Versandt
  • oder
  • Erstattet

Preise rechnet der Server

Der Browser schickt nur Artikel, Farbe, Grösse, Motiv und Menge. Preise und Versand bestimmt der Server selbst.

Rückerstattung erkannt

Wird eine Zahlung zurückgebucht, wechselt die Bestellung auf «erstattet» und das Team wird informiert.

Verwaltung

Alle Bestellungen mit Status, Lieferschein zum Drucken und «versandt» mit Sendungsnummer.

Zwei Nummern

Eine geheime Referenz für Links und Zahlung, eine fortlaufende Bestellnummer für Menschen, Mails und bexio.

Postausgang mit Geduld

Mails und bexio-Buchungen laufen über eine Warteschlange und werden bei Störungen wiederholt.

Umtausch 14 Tage

Ungetragene Ware lässt sich innert 14 Tagen umtauschen. Die Bestätigung nennt die Frist.

Browser, Server, angebundene Dienste

Das Atelier ist eine einzige JavaScript-Datei ohne Framework. Der eigene Server hält das Sortiment, prüft jede Bestellung und spricht mit Zahlung, Buchhaltung und Produktion.

BrowserDas Atelier
  • Fenster über dem Shop
  • Vorschau aus Stoffmaske, Farbe und Motiv
  • Entwurf im Browser gespeichert
JavaScriptohne Framework
HTTPS
ServerDas Gehirn
  • Sortiment, Preise, Motive
  • Bestellungen und Gutscheine
  • Mails, PDF und Warteschlangen
Node.jseigene Datenbank
API
DiensteZahlung, Buchhaltung, Produktion
  • Payrexx für TWINT und Karten
  • bexio für Kontakt und Rechnung
  • Produktion und Post für Druck und Versand
WebhooksREST

Kein Feld bleibt ungeprüft

Farben gehören zum Artikel, Grössen zur Tabelle, Länder zur Liste. Alles andere lehnt der Server ab.

Daten in einer Datei

Artikel, Farben in Anzeige-Reihenfolge, Grössentabellen, Motive und Kategorien stehen in einer Sortiments-Datei.

Probemodus

Ein Nachbau der Zahlungsschnittstelle erlaubt ganze Bestellungen ohne echtes Geld, mit demselben Code.

Barrierearm

Schritte mit Beschriftung für Screenreader, Ansagen bei jeder Änderung, volle Bedienung mit der Tastatur.

Herkunft der Bestellung

Quelle und Kampagne werden mit der Bestellung gespeichert, ohne Tracking-Dienste von Dritten.

Automatisch getestet

Bestellung, Zahlung, Gutscheine und Schutz vor Missbrauch sind mit automatischen Tests abgesichert.

Ein eigener Produkt-Designer für Ihren Shop?

Wir bauen das Atelier für Ihre Artikel, Ihre Motive und Ihre Abläufe: mit Grössenberatung, Zahlung, Buchhaltung und Anbindung an Ihre Produktion.

Alle Bildschirme stammen aus dem Bipo-Atelier im Montibit-Shop, aufgenommen im November 2026. Preise und Versandkosten können sich ändern.

Mehr von Liroba

Weitere Projekte

Alle Projekte