🚀 Quickstart

In weniger als 10 Minuten haben Sie Ihren ersten Flowtifyy-Shop live. Folgen Sie diesen Schritten:

⚙️ Shop einrichten

Unter Einstellungen im Adminbereich können Sie Ihren Shop vollständig anpassen:

Allgemein

• Shop-Name: Erscheint im Shop-Header und in E-Mails.
• Sprache / Währung: Aktuell CHF und EUR unterstützt.
• Logo: Upload als PNG/SVG, wird im Shop-Header angezeigt.
• Farben & Schriften: Primärfarbe, Textfarbe, Hintergrund, Schriftquelle (Google Fonts oder Webflow-Vererbung).

Custom Domain Basic+

• Tragen Sie Ihre Wunsch-Domain ein (z. B. shop.ihrefirma.ch).
• Richten Sie einen CNAME-Eintrag auf app.flowtifyy.com ein.
• Das SSL-Zertifikat wird automatisch ausgestellt (Let's Encrypt).

E-Mail-Einstellungen

• Absendername und Betreff der Bestellbestätigungs-E-Mails anpassen.
• Rechtliche Angaben im E-Mail-Footer (gesetzlich verpflichtend in der Schweiz).
• Optionale Kopie jeder Bestellbestätigung an eigene E-Mail.

📦 Artikel

Artikel erstellen

Gehen Sie zu Produkte → Neues Produkt. Füllen Sie folgende Felder aus:

Artikel deaktivieren

Setzen Sie den Status auf Inaktiv oder löschen Sie den Artikel. Artikel in bestehenden Bestellungen bleiben erhalten.

💾 Digitale Produkte

Flowtifyy unterstützt neben physischen Waren auch digitale Produkte — zum Beispiel E-Books, Vorlagen, PDFs, Audio-Dateien oder Software-Lizenzen. Der Fokus der Plattform liegt auf dem klassischen Warenhandel; digitale Produkte ergänzen Ihr Sortiment als praktische Option.

Liefermethoden

Sie wählen pro Produkt, wie der digitale Inhalt nach dem Kauf bereitgestellt wird:

Zugangslimits & Ablauf

• Max. Downloads: Wie oft ein Käufer den Download-Link nutzen darf (0 = unbegrenzt).
• Gültigkeitsdauer: Wie viele Tage der Link aktiv ist (0 = kein Ablauf).

Dateigrössen-Limits nach Plan

Varianten mit digitalem Inhalt

Jede Variante eines digitalen Produkts kann einen eigenen Datei-Upload oder Lizenzschlüssel-Pool besitzen — ideal für unterschiedliche Editionen (z. B. «Standard» vs. «Pro-Version») desselben Produkts.

⚡ AVIF-Bildoptimierung

AVIF ist ein modernes Bildformat, das Fotos bei gleicher Qualität bis zu 50 % kleiner als JPEG oder WebP macht. Kleinere Bilder laden schneller, verbessern Ihre Core Web Vitals und steigern die Konversionsrate im Shop.

Aktivierung

Bestehende Fotos konvertieren

Fotos die vor der Aktivierung hochgeladen wurden, bleiben im Originalformat. Um alle bestehenden Produktfotos auf einmal zu konvertieren:

Kompatibilität

AVIF wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari ab 16, Edge). Auf älteren Browsern liefert der Server das Originalbild als Fallback.

🗂️ Kategorien

Kategorien strukturieren Ihren Shop und ermöglichen Kunden die gezielte Filterung. Gehen Sie zu Kategorien → Neue Kategorie.

• Jede Kategorie erhält einen Namen (mehrsprachig) und ein optionales Bild.
• Produkte können einer oder mehreren Kategorien zugeordnet werden.
• Im Shop erscheinen Kategorien als Tabs oder Filterkacheln.
• Reihenfolge ist per Drag-and-drop anpassbar.

🛒 Bestellungen

Alle Bestellungen erscheinen unter Bestellungen in Echtzeit.

Bestellstatus

Bestelldetail

Klicken Sie auf eine Bestellung, um alle Angaben zu sehen: Kundendaten, Artikel, Gesamtbetrag, Zahlungsmethode, Versandadresse und Zeitstempel. Von hier können Sie auch den Status ändern oder eine Bestellbestätigung erneut senden.

Export

Bestellungen können als CSV exportiert werden (Filter nach Datum und Status möglich).

💳 Zahlungsmethoden

Unter Einstellungen → Zahlungsmethoden aktivieren und konfigurieren Sie die gewünschten Methoden.

Rechnung-Einschränkung

Sie können die Zahlungsmethode «Rechnung» auf bekannte Kunden beschränken. Im Adminbereich können Sie Kund:innen explizit für Rechnungskauf freischalten.

🟡 TWINT einrichten

TWINT Zahlungslink (Free+)

Dynamischer TWINT (Payrexx) Pro+

Verbinden Sie Ihren Payrexx-Account unter Einstellungen → Payrexx. Jede Bestellung erhält einen einzigartigen QR-Code mit dem genauen Bestellbetrag. Die Zahlung wird automatisch bestätigt.

🔗 Webflow iFrame-Integration

Der einfachste Weg: Betten Sie Ihren Shop direkt als iFrame in Ihre Webflow-Seite ein.

Einbettungs-Code holen

Eigene «In den Warenkorb»-Schaltflächen

Sie können beliebige Elemente auf Ihrer Webflow-Seite als «In den Warenkorb»-Button nutzen:

<button data-fi-slug="SHOP-SLUG" data-fi-product="PRODUKT-SLUG">In den Warenkorb</button>
<script src="https://app.flowtifyy.com/widget/embed.js?slug=SHOP-SLUG"></script>

Ersetzen Sie SHOP-SLUG durch Ihre Shop-URL und PRODUKT-SLUG durch den Artikel-Slug.

🔒 Domain-Beschränkung

Unter Einstellungen → Einbettung legen Sie fest, auf welchen Domains Ihr Shop eingebettet werden darf. Das schützt Sie davor, dass der Shop unerlaubt auf fremden Websites eingebunden wird.

Sobald eine Domain eingetragen ist, wird der Shop ausschliesslich auf dieser Domain angezeigt. Versucht jemand, den Shop auf einer anderen Website einzubetten, erscheint stattdessen eine Sperrmeldung. Ohne eingetragene Domain gibt es keine Einschränkung — dies ist nur für erste Tests empfohlen.

🛍️ Warenkorb-Widget

Das Warenkorb-Widget ermöglicht eine nahtlose Shop-Erfahrung direkt auf Ihrer Webflow-Seite — ohne dass Besucher die Seite verlassen müssen.

Widget aktivieren

Unter Einstellungen → Warenkorb-Widget aktivieren Sie das Widget und wählen:

• Position: Links oder rechts
• Sichtbarkeit: Nur auf Shop-Seiten oder auf der gesamten Website
• Platzierung: Automatisch in das Element mit ID flowtifyy-cart-widget eingefügt

Widget-Code einbinden

<script src="https://app.flowtifyy.com/widget/cart.js?slug=SHOP-SLUG" async></script>

Für eine feste Position im Webflow-Navbar fügen Sie ein leeres <div id="flowtifyy-cart-widget"></div> an der gewünschten Stelle ein.

Was das Widget kann

• Warenkorb-Icon mit Artikel-Badge in Echtzeit
• Slide-in-Drawer mit Artikelliste, Mengenanpassung und Entfernen-Funktion
• Produkthauptfotos in der Warenkorb-Ansicht
• Vollständiger Checkout-Prozess im Drawer
• Automatische Leerung nach Bestellabschluss

🔗 URL-Synchronisation

Die URL-Synchronisation hält die Browser-URL der Elternseite (Ihre Webflow-Seite) immer im Einklang mit der aktuellen Shop-Ansicht im iFrame — ganz ohne Seitenneuladen.

Was das bedeutet

• Öffnet ein Besucher ein Produkt, ändert sich die URL von /shop/ zu /shop/?_fi_view=detail&_fi_slug=produkt-name.
• Filtert er eine Kategorie, wird ?_fi_cat=42 angehängt.
• Der Zurück-Button des Browsers navigiert korrekt zur Produktliste oder zur vorherigen Kategorie.
• Links auf Produktdetailseiten sind direkt teilbar — beim Öffnen springt der Shop sofort zur richtigen Ansicht.

Aktivieren

Unter Einstellungen → Integration → URL-Synchronisation aktivieren (Checkbox) ein- oder ausschalten. Standardmässig aktiv.

URL-Parameter im Überblick

Technischer Ablauf

1. Der Shop-iFrame sendet per postMessage ein flowtifyy-nav-push-Event, wenn der Besucher navigiert.
2. Das Widget-Script auf der Elternseite schreibt die URL-Parameter mit history.pushState — ohne Seitenneuladen.
3. Beim Laden der Seite liest das Widget die vorhandenen URL-Parameter und schickt flowtifyy-nav-init an den iFrame.
4. Bei Back/Forward löst der Browser ein popstate-Event aus — das Widget sendet flowtifyy-nav-pop an den iFrame, der die Ansicht entsprechend wiederherstellt.

🔌 REST API Basic+

Flowtifyy bietet eine vollständige JSON-REST-API. Damit können Sie den Shop ohne iFrame in jedes eigene Frontend, eine native App oder ein externes System einbinden.

Basis-URL

https://app.flowtifyy.com/api/{slug}/

Alle Antworten haben folgendes Format:

{ "success": true, "data": ... }
{ "success": false, "error": "Fehlermeldung" }

Authentifizierung & CORS

Die öffentlichen API-Endpunkte benötigen keinen API-Key. Der Zugriff wird über CORS gesteuert: Unter Einstellungen → Allgemein → Erlaubte Domain tragen Sie Ihre Website-Domain ein (z.B. https://ihre-domain.ch). Anfragen von anderen Origins werden dann abgewiesen. Solange keine Domain hinterlegt ist, sind alle Origins erlaubt (*).

Endpunkte

GET /products — Parameter

GET /api/mein-shop/products?category=zbehaelter&sort=price_asc

GET /shipping-cost — Parameter

GET /api/mein-shop/shipping-cost?value=49.90&quantity=2&weight=800&country=CH

POST /orders — Request Body

Pflichtfelder: customer_name, customer_email, customer_address, customer_zip, customer_city, items

{
  "customer_name":    "Max Muster",
  "customer_email":   "max@example.com",
  "customer_phone":   "+41 79 123 45 67",
  "customer_address": "Musterstrasse 1",
  "customer_zip":     "8001",
  "customer_city":    "Zürich",
  "customer_country": "CH",
  "customer_note":    "Bitte klingeln",
  "payment_method":   "invoice",
  "items": [
    { "product_id": 42, "qty": 2 },
    { "product_id": 17, "qty": 1 }
  ]
}

Mögliche Werte für payment_method: invoice, stripe, twint, vorauskasse, payrexx_twint, payrexx_cc — abhängig von den aktivierten Zahlungsarten im Shop.

Preise, Versandkosten und MwSt werden serverseitig berechnet und können nicht übermittelt werden. Die Antwort enthält die fertige Bestellnummer.

👥 Benutzer & Rollen

Unter Benutzer können Sie Teammitglieder einladen und Rollen vergeben.

Verfügbare Rollen

Einladung senden

Klicken Sie auf Benutzer einladen, geben Sie die E-Mail-Adresse ein und wählen Sie eine Rolle. Der Eingeladene erhält einen Einladungslink per E-Mail und kann sich damit registrieren oder einloggen.

🔐 Sicherheit & 2FA

Zwei-Faktor-Authentifizierung (2FA)

Wir empfehlen dringend, 2FA für Ihren Account zu aktivieren. Unter Mein Profil → Sicherheit können Sie 2FA per OTP-E-Mail einrichten. Nach der Aktivierung wird bei jedem Login ein Einmalcode an Ihre E-Mail-Adresse gesendet.

Passwort zurücksetzen

Über flowtifyy.com/forgot-password können Sie Ihr Passwort zurücksetzen. Sie erhalten einen Link per E-Mail, der 60 Minuten gültig ist.

Sitzungen

Sitzungen sind JWT-basiert. Browser-Sitzungen laufen nach 24 Stunden automatisch ab. Wenn Sie die App als PWA installiert haben, bleibt die Sitzung 1 Jahr aktiv — Sie werden nicht automatisch abgemeldet. Sie können sich jederzeit explizit abmelden.

💰 Plan & Abrechnung

Planübersicht

Alle kostenpflichtigen Pläne beinhalten eine 7-tägige Testphase ohne Kreditkarte. Die Karte wird erst nach Ablauf der Testphase belastet.

Upgrade / Downgrade

Unter Plan & Abrechnung können Sie jederzeit auf einen höheren Plan upgraden (sofort wirksam) oder kündigen (Ende der Zahlungsperiode). Das Downgrade auf den Free-Plan deaktiviert Artikel über dem Limit.

Zahlungsart ändern

Klicken Sie auf Zahlungsart & Rechnungen — Sie werden zum Stripe-Kundenportal weitergeleitet, wo Sie Kreditkarte, Rechnungen und Abonnement verwalten können.

Kündigung

Die Kündigung erfolgt über Plan wechseln / Kündigen → Stripe-Portal. Ihr Zugang bleibt bis zum Ende der bezahlten Periode aktiv. Es gibt keine Mindestlaufzeit.

❓ Häufige Fragen

📬 Support

Wir helfen Ihnen gerne weiter. So erreichen Sie uns:

🚀 Quickstart

Get your first Flowtifyy shop live in under 10 minutes. Follow these steps:

⚙️ Shop Setup

Under Settings in the admin area, you can fully customise your shop:

General

• Shop name: Appears in the shop header and in emails.
• Language / Currency: CHF and EUR are currently supported.
• Logo: Upload as PNG/SVG, displayed in the shop header.
• Colours & Fonts: Primary colour, text colour, background, font source (Google Fonts or Webflow inheritance).

Custom Domain Basic+

• Enter your desired domain (e.g. shop.yourcompany.com).
• Set up a CNAME record pointing to app.flowtifyy.com.
• SSL certificate is issued automatically (Let's Encrypt).

Email Settings

• Customise the sender name and subject of order confirmation emails.
• Legal details in the email footer (required by law in Switzerland).
• Optional copy of every order confirmation to your own email.

📦 Products

Creating a product

Go to Products → New product. Fill in the following fields:

💾 Digital Products

In addition to physical goods, Flowtifyy supports digital products — for example e-books, templates, PDFs, audio files or software licences. The platform's core focus remains on traditional product sales; digital products are a practical extension for your catalogue.

Delivery methods

Choose per product how the digital content is delivered after purchase:

Access limits & expiry

• Max. downloads: How many times the buyer may use the download link (0 = unlimited).
• Validity period: How many days the link remains active (0 = no expiry).

File limits by plan

Variants with digital content

Each variant of a digital product can have its own file upload or licence key pool — ideal for different editions of the same product (e.g. "Standard" vs. "Pro Version").

⚡ AVIF Image Optimisation

AVIF is a modern image format that compresses photos by up to 50 % less data than JPEG or WebP at the same visual quality. Smaller images load faster, improve your Core Web Vitals and increase conversion rates in the shop.

Activation

Converting existing images

Images uploaded before activation remain in their original format. To convert all existing product photos at once:

Browser compatibility

AVIF is supported by all modern browsers (Chrome, Firefox, Safari 16+, Edge). On older browsers the server delivers the original image as a fallback.

🗂️ Categories

Categories structure your shop and allow customers to filter products. Go to Categories → New category.

• Each category gets a name (multilingual) and an optional image.
• Products can be assigned to one or more categories.
• Categories appear in the shop as tabs or filter tiles.
• Order can be adjusted via drag-and-drop.

🛒 Orders

All orders appear under Orders in real time.

Order status

Order detail

Click on an order to see all details: customer data, items, total, payment method, delivery address and timestamps. From here you can also change the status or resend an order confirmation.

Export

Orders can be exported as CSV (with filters by date and status).

💳 Payment Methods

Under Settings → Payment methods, activate and configure your desired methods.

🟡 Setting up TWINT

TWINT Payment Link (Free+)

🔗 Webflow iFrame Integration

The easiest method: embed your shop directly as an iFrame on your Webflow page.

Get the embed code

Custom "Add to cart" buttons

You can use any element on your Webflow page as an "Add to cart" button:

<button data-fi-slug="SHOP-SLUG" data-fi-product="PRODUCT-SLUG">Add to cart</button>
<script src="https://app.flowtifyy.com/widget/embed.js?slug=SHOP-SLUG"></script>

Replace SHOP-SLUG with your shop URL and PRODUCT-SLUG with the product slug.

🔒 Domain Restriction

Under Settings → Integration you define which domains are allowed to embed your shop. This prevents your shop from being displayed on unauthorized websites.

Once a domain is configured, the shop will only display on that domain. Any attempt to embed it on another website will show a blocked notice instead. Without a configured domain there is no restriction — this is only recommended for initial testing.

🛍️ Cart Widget

The cart widget enables a seamless shopping experience directly on your Webflow page — without visitors having to leave the page.

Activate the widget

Under Settings → Cart Widget activate the widget and choose:

• Position: Left or right
• Visibility: Only on shop pages or across the entire website
• Placement: Automatically inserted into the element with ID flowtifyy-cart-widget

Embed the widget code

<script src="https://app.flowtifyy.com/widget/cart.js?slug=SHOP-SLUG" async></script>

Widget features

• Cart icon with real-time item badge
• Slide-in drawer with item list, quantity adjustment and remove function
• Product main photos in the cart view
• Full checkout process within the drawer
• Automatic clear after order completion

🔗 URL Sync

URL Sync keeps the browser URL of your Webflow page in sync with the current shop view inside the iframe — without any page reload.

What this means

• When a visitor opens a product, the URL changes from /shop/ to /shop/?_fi_view=detail&_fi_slug=product-name.
• When filtering a category, ?_fi_cat=42 is appended.
• The browser's Back button correctly navigates back to the product list or previous category.
• Product detail links are directly shareable — opening the link jumps straight to the correct view.

Enable

Under Settings → Integration → Enable URL Sync (checkbox) toggle on or off. Enabled by default.

URL parameters

How it works

1. The shop iframe sends a flowtifyy-nav-push postMessage event whenever the visitor navigates.
2. The widget script on the parent page writes the URL parameters using history.pushState — without a page reload.
3. On page load the widget reads any existing URL parameters and sends flowtifyy-nav-init to the iframe.
4. On browser back/forward the browser fires a popstate event — the widget sends flowtifyy-nav-pop to the iframe, which restores the correct view.

🔌 REST API Basic+

Flowtifyy provides a full JSON REST API — integrate the shop into any custom frontend, native app, or external system without using an iframe.

Base URL

https://app.flowtifyy.com/api/{slug}/

All responses follow this format:

{ "success": true, "data": ... }
{ "success": false, "error": "Error message" }

Authentication & CORS

The public API endpoints require no API key. Access is controlled via CORS: under Settings → General → Allowed Domain, enter your website domain (e.g. https://your-domain.com). Requests from other origins will then be blocked. If no domain is set, all origins are allowed (*).

Endpoints

GET /products — Parameters

GET /api/my-shop/products?category=containers&sort=price_asc

GET /shipping-cost — Parameters

GET /api/my-shop/shipping-cost?value=49.90&quantity=2&weight=800&country=CH

POST /orders — Request Body

Required fields: customer_name, customer_email, customer_address, customer_zip, customer_city, items

{
  "customer_name":    "Jane Smith",
  "customer_email":   "jane@example.com",
  "customer_phone":   "+41 79 123 45 67",
  "customer_address": "Example Street 1",
  "customer_zip":     "8001",
  "customer_city":    "Zurich",
  "customer_country": "CH",
  "customer_note":    "Please ring the bell",
  "payment_method":   "invoice",
  "items": [
    { "product_id": 42, "qty": 2 },
    { "product_id": 17, "qty": 1 }
  ]
}

Accepted values for payment_method: invoice, stripe, twint, vorauskasse, payrexx_twint, payrexx_cc — depending on the payment methods enabled in the shop.

Prices, shipping costs and VAT are calculated server-side and cannot be submitted. The response contains the order number.

👥 Users & Roles

Under Users you can invite team members and assign roles.

Available roles

🔐 Security & 2FA

Two-Factor Authentication (2FA)

We strongly recommend enabling 2FA for your account. Under My Profile → Security you can set up 2FA via OTP email. Once activated, a one-time code is sent to your email address with every login.

Password reset

You can reset your password at flowtifyy.com/forgot-password. You will receive a link by email valid for 60 minutes.

💰 Plan & Billing

Plan overview

All paid plans include a 7-day trial without requiring a credit card upfront. Your card is only charged after the trial ends.

Upgrade / Downgrade

Under Plan & Billing you can upgrade at any time (effective immediately) or cancel (at end of billing period). Downgrading to the Free plan deactivates products above the limit.

Cancellation

Cancellation is done via Change plan / Cancel → Stripe portal. Your access remains active until the end of the paid period. There is no minimum contract period.

❓ Frequently Asked Questions

📬 Support

We're happy to help. Here's how to reach us: