Bundles und Abos

Bundles mit Set-Rabatt und Staffelpreisen, dazu Abos mit Tarifen, Box-Builder und einem Lieferplan zum Aussetzen oder Pausieren.

2 Components · 9 Variants

Kategorie wechseln

subscription-box

Abos

Verkaufen, was wiederkommt. Einmal kaufen oder abonnieren auf der Produktseite, Boxgrößen als Pläne, ein Baukasten in drei Schritten, der Plan der nächsten Lieferungen und wie ein Abo funktioniert.

Abonnieren und sparen
Box-Pläne
Box zusammenstellen
Lieferplan
So funktioniert es

Props und Details

Abonnieren und sparen

Einmal kaufen oder abonnieren auf der Produktseite. Die Abo-Option öffnet mit weicher Höhe und zeigt den Rhythmus mit gleitendem Daumen und die Vorteile, der Preis zählt zum Abo-Preis und der Knopf nennt den Rhythmus.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/subscription-box

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="purchase-toggle" product={{ name, subtitle, price, image }} discount={10} rhythms={[2, 4, 6]} perks={[…]} />

Source

Box-Pläne

Boxgrößen als Pläne mit Preis pro Lieferung und pro Stück. Monatlich oder jährlich mit gleitender Pille, die Preise zählen zum neuen Wert, der meistgewählte Plan hat einen leuchtenden Rand und jede Karte hebt sich beim Hover.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/subscription-box

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="plans" plans={[{ id, name, amount, price, pieces, perks, tag }]} yearly={15} />

Source

Box zusammenstellen

Drei Schritte mit einem Balken, der sich füllt, für Sorte, Menge und Rhythmus. Jeder Schritt gleitet von seiner Seite herein, die gewählte Kachel zeigt einen Haken, und die Übersicht daneben folgt jeder Wahl und zählt den Preis.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/subscription-box

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="builder" choices={[{ id, label, note, image }]} sizes={[{ id, label, note, price }]} rhythms={[2, 4]} discount={10} />

Source

Lieferplan

Die nächsten Lieferungen auf einer Zeitleiste, die sich beim Scrollen füllt. Geplante Boxen lassen sich aussetzen (durchgestrichen, mit Rückgängig) oder eine Woche schieben, die nächste ist markiert, und Pausieren dimmt den Plan und sagt es.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/subscription-box

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="schedule" deliveries={[{ id, date, items, status: "next" }]} />

Source

So funktioniert es

Wie ein Abo funktioniert, in vier Schritten. Die Schritte steigen nacheinander auf, eine Linie verbindet sie und füllt sich beim Scrollen, quer auf dem Desktop und als Liste auf Telefon und Tablet.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/subscription-box

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<SubscriptionBox variant="how-it-works" steps={[{ icon, title, text }]} />

Source

bundles

Bundles und Sets

Mehrere Dinge zusammen verkaufen. Häufig zusammen gekauft mit einer Summe, ein Set zum Zusammenstellen mit Staffelrabatt, fertige Sets und Packungen mit Stückpreis.

Häufig zusammen gekauft
Set zusammenstellen
Fertige Sets
Packungen und Staffelpreise

Props und Details

Häufig zusammen gekauft

Das Produkt und zwei Ergänzungen mit Pluszeichen dazwischen. Abwählen blendet Kachel und Plus ab, die Summe zählt zum neuen Wert, der Rabatt für alle drei blendet ein und der Knopf sagt, wie viele in den Warenkorb gehen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bundles

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="frequently-bought" items={[product, addOn, addOn]} discount={10} onAdd={(items, total) => …} />

Source

Set zusammenstellen

Freie Plätze oben füllen sich mit jeder Wahl, jedes Stück springt hinein und verlässt den Platz per Tippen. Ein Balken mit Stufenmarken füllt sich bis zum nächsten Rabatt und sagt, wie viele fehlen, die Summe zählt mit.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bundles

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="build-a-set" items={items} slots={4} tiers={[{ count: 2, percent: 10 }, { count: 4, percent: 20 }]} />

Source

Fertige Sets

Kuratierte Sets als Karten. Die Stücke stehen nebeneinander und fächern sich beim Hover auf, ein Sticker mit der Ersparnis richtet sich auf, Chips zeigen den Inhalt und der Setpreis steht gegen die Einzelpreise.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bundles

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="set-cards" sets={[{ id, name, description, items, price }]} />

Source

Packungen und Staffelpreise

Ein Produkt in Packungen zu 1, 3 und 6 als Karten mit Stückpreis und Ersparnis. Das Bild zeigt die gewählte Packung als so viele Stücke, die nacheinander aufsteigen, die Summe zählt zum neuen Preis.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/bundles

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<Bundles variant="volume" product={{ id, name, price, unit, image }} packs={[{ id, count: 3, price: 40.2 }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Bundles und Abos stehen.

Abonnieren und sparen

Box-Pläne

Box zusammenstellen

Lieferplan

So funktioniert es

Häufig zusammen gekauft

Set zusammenstellen

Fertige Sets

Packungen und Staffelpreise

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit