Kapitel 02
Shop im eigenen Framer-Projekt
Du hast schon eine Framer-Website und möchtest darauf verkaufen? Das Checkout-Plugin richtet die Shop-Bausteine selbst ein und übernimmt dabei Farben, Schriften und Ecken aus deinem Projekt.
Für wen
Für alle, die kein Template von kspr studio nutzen, sondern ein eigenes Framer-Projekt haben, zum Beispiel eine bestehende Markenseite oder ein Projekt, das eine Agentur gebaut hat. In einem kspr-Shop-Template ist alles schon da, dann geht es direkt mit Stripe verbinden weiter.
Set up shop
Öffne das Checkout-Plugin (Plugin öffnen) und dort den Bereich „Design“. Das Plugin liest dein Projekt und zeigt unter „Your style“, was es erkannt hat: „Accent“, „Corners“, die Schriften für „Headings“ und „Text“ und das Erscheinungsbild („Follow site“, „Always light“ oder „Always dark“). Steht bei einem Wert „Guess, please check“, prüfe ihn kurz. Jede Änderung siehst du sofort in der Vorschau (Warenkorb, Produktseite, Danke-Seite).
Mit „Follow my color styles“ folgt der Shop später deinen Farbstilen: Änderst du einen Farbstil, ändert sich der Shop mit, hell und dunkel.
Unter „What gets added“ wählst du:
- bei „Collection“: „Create “Products”“ (neue Sammlung), eine bestehende Sammlung ergänzen oder „Don't change the CMS“;
- ob die Seiten „Thank-you page (/thanks)“ und „Cart cancelled page (/cart-cancelled)“ angelegt werden;
- dann „Add to project“.
Das Plugin arbeitet die Schritte ab und meldet je Schritt, was es getan hat. Ein zweiter Lauf legt nichts doppelt an.
Was angelegt wird
- ein Code-Ordner „Shop“ mit den Komponenten Cart Button (Knopf mit Zähler und Schublade), Add to Bag (Preis, Varianten, Menge, Kaufknopf), Order Status (Bestellbestätigung) und Cart Cancelled;
- die Sammlung „Products“ mit allen Feldern (siehe unten). Ist sie leer, kommen drei Beispielprodukte hinein: eines einmalig, eines mit Varianten, eines als Abo;
- die Seiten /thanks mit Order Status und /cart-cancelled mit Cart Cancelled. Bestehende Seiten mit eigenem Inhalt bleiben unverändert;
- den Cart Button in deiner Navigation (sonst fest oben rechts auf der Startseite);
- Add to Bag auf der CMS-Detailseite deiner Produkte, falls es sie schon gibt.
Alle Komponenten bekommen Farben, Schriften und Ecken aus deinem Projekt. Später änderst du jeden Wert rechts im Editor bei den Eigenschaften der Komponente.
Felder der Sammlung „Products“
| Feld | Wofür |
|---|---|
| Name | Produktname, erscheint auch im Stripe-Checkout |
| Price | Preis, als Zahl oder Text wie CHF 12.50 |
| Image | Produktbild |
| Description | Beschreibung |
| Sold Out | Schalter für nicht lieferbare Produkte |
| Variants | Grössen oder Packungen mit eigenem Preis |
| Billing Interval | One-time, Week, Month oder Year (Abo) |
| Billing Interval Key | Textfassung des Intervalls, pflegt das Plugin beim Abgleich |
| Net Weight (g) | Nettogewicht, für den Grundpreis (zum Beispiel je kg) |
| Stripe Price ID | füllt das Plugin, nicht von Hand ändern |
| Stripe Variant IDs | füllt das Plugin, nicht von Hand ändern |
Den Slug bringt Framer selbst mit. Wie Preise, Varianten, Abos und „Sold Out“ funktionieren, steht unter Produkte abgleichen.
Was du danach selbst machst
Ein paar Handgriffe kann ein Plugin in Framer nicht übernehmen. Der Bereich „Overview“ zeigt, was noch fehlt, mit dem Knopf „Run Set up shop“ für einen zweiten Lauf.
- Detailseite anlegen, falls deine Produkte noch keine haben: in Framer bei den Seiten auf +, dann New CMS page und Detail page für die Sammlung „Products“. Danach „Set up shop“ erneut laufen lassen, dann setzt das Plugin Add to Bag auf die Detailseite.
- „Add to Bag“ an die Felder binden: Wähle auf der Detailseite Add to Bag und verbinde rechts jede Eigenschaft mit ihrem Feld:
| Eigenschaft | CMS-Feld |
|---|---|
| Stripe Price ID | Stripe Price ID |
| Slug | Slug |
| Name | Name |
| Price | Price |
| Image | Image |
| Sold out | Sold Out |
| Billing interval | Billing Interval Key |
| Variants | Variants |
| Stripe Variant IDs | Stripe Variant IDs |
| Net quantity | Net Weight (g) |
- Billing interval bindest du an Billing Interval Key, nicht an „Billing Interval“: Auswahlfelder lassen sich in Framer nicht direkt an Code-Eigenschaften binden, das Textfeld schon mit einem Klick.
- Danke- und Abbruch-Seite nicht indexieren: Schalte in den Seiteneinstellungen von /thanks und /cart-cancelled die Indexierung für Suchmaschinen aus.
- Feinschliff: Schiebe Cart Button und Add to Bag an die gewünschte Stelle. Hat deine Navigation mehrere Varianten (zum Beispiel für Phone), prüfe die Position in jeder.
- Veröffentliche die Website.
Und dann
Ab hier ist der Weg derselbe wie mit einem Template: