1) oder sieh dir den Eintrag im Shopify App Store an.1. ShipCalc installieren
ShipCalc wird über den Shopify App Store installiert. Die 14-tägige kostenlose Testphase beginnt mit der Installation, alle Funktionen sind verfügbar.
- Öffne den ShipCalc-Eintrag im Shopify App Store.
- Klicke auf Install und bestätige die App.
- ShipCalc öffnet sich in deinem Shopify-Adminbereich mit einer Onboarding-Checkliste.
Die Onboarding-Seite enthält Ein-Klick-Links, die den Theme-Editor für jede Platzierung an der richtigen Stelle öffnen.
2. Block für die Produktseite hinzufügen
Mit dem Produktseiten-Block prüfen Kunden die Versandkosten, bevor sie einen Artikel in den Warenkorb legen. Er nutzt die aktuell gewählte Variante und Menge.
- Klicke im ShipCalc-Onboarding auf Add Product Page Block. Der Theme-Editor öffnet sich mit einer Produktvorlage.
- Klicke im Bereich mit den Produktinformationen auf Add block (Block hinzufügen) und wähle den ShipCalc-Block.
- Zieh ihn an die gewünschte Stelle – unter den Preis oder unter die Kaufen-Buttons passt gut.
- Klicke auf Save (Speichern).
3. Block für die Warenkorbseite hinzufügen
Der Warenkorb-Block berücksichtigt jeden Artikel und jede Menge im Warenkorb, sodass Kunden die Lieferkosten für die gesamte Bestellung sehen.
- Klicke in ShipCalc auf Add Cart Page Block. Der Theme-Editor öffnet sich mit der Warenkorbvorlage.
- Klicke auf Add block (Block hinzufügen) und wähle den ShipCalc-Warenkorb-Block.
- Platziere ihn in der Nähe der Zwischensumme und des Checkout-Buttons und klicke dann auf Save (Speichern).
4. Warenkorb-Drawer aktivieren
Warenkorb-Drawer (Slide-out-Warenkörbe) sind in jedem Theme anders aufgebaut. ShipCalc unterstützt sie daher über eine App-Einbettung, die den geöffneten Drawer erkennt und einen kompakten, einklappbaren Rechner über dem Checkout-Button platziert.
- Öffne den Theme-Editor und wähle in der linken Seitenleiste App embeds (App-Einbettungen).
- Aktiviere die ShipCalc-Einbettung für den Warenkorb-Drawer.
- Die meisten Themes funktionieren mit der automatischen Erkennung. Falls deins nicht dazugehört, trag den CSS-Selektor deines Drawers in den Einstellungen der Einbettung ein.
- Klicke auf Save (Speichern) und öffne dann den Drawer in deinem Live-Shop, um die Platzierung zu prüfen.
5. Das Widget anpassen
Design- und Texteinstellungen findest du auf der Seite Appearance in ShipCalc – mit Live-Vorschau, bevor Änderungen in deinem Shop erscheinen.
Layout und Stil
- Karten- oder Minimal-Layout.
- Akzent-, Hintergrund-, Text- und Rahmenfarben.
- Eckenradius, Abstände und Schriftgrößen.
- Typografie und einfache Bedienelement-Stile deines Themes übernehmen.
Texte
- Titel, Hilfetext und Button-Beschriftung.
- Beschriftungen und Platzhalter für Land und Postleitzahl.
- Meldungen für Berechnung, keine Tarife, Fehler und leeren Warenkorb.
- Eine Bezeichnung für kostenlose Versandarten.
Jede Beschriftung, die Kunden sehen, kann in der Sprache deines Shops geschrieben werden.
Eigenes CSS
Für mehr Kontrolle kannst du im CSS-Editor Regeln für das Widget hinzufügen – praktisch für theme-spezifische Abstände oder Hover-Effekte.
6. Länder und Postleitzahlen
Wähle, woher das Zielland kommt:
- Fixed country (festes Land) – immer für ein von dir gewähltes Land berechnen.
- Shopper’s Shopify country (Shopify-Land des Kunden) – dem Lokalisierungsland aus Shopify Markets folgen.
- Country selector (Länderauswahl) – Kunden wählen aus den von dir erlaubten Ländern.
Lege dann fest, wie Postleitzahlen funktionieren:
- Required (erforderlich) – der Kunde muss eine Postleitzahl eingeben.
- Optional – Kunden können für eine genauere Berechnung eine angeben.
- Country only (nur Land) – das Postleitzahlfeld ausblenden; ShipCalc kann eine Schätzung für das gewählte Land liefern.
Du kannst den Rechner außerdem für Besucher aus bestimmten Ländern ausblenden oder nur Besuchern aus von dir gewählten Ländern anzeigen.
7. Optionen für die Tarifanzeige
- Alle verfügbaren Tarife, nur den günstigsten oder nur den teuersten anzeigen.
- Lieferdetails unter einem Tarif anzeigen, wenn Shopify sie liefert.
- Eine eigene Bezeichnung für kostenlose Versandarten verwenden (zum Beispiel „Kostenlose Lieferung“).
8. Manuelle Platzierung (für Fortgeschrittene)
Wenn dein Theme-Layout an der gewünschten Stelle keinen App-Block erlaubt, füge deinem Theme ein Platzhalter-Element und den ShipCalc-Loader hinzu:
<div data-shipcalc-m="product"></div>
<script src="/apps/shipcalc/manual.js" defer></script>Verwende data-shipcalc-m="cart" für eine Platzierung im Warenkorb. Der manuelle Rechner nutzt dieselben Einstellungen, Stile und Analytics wie die App-Blöcke.
9. Analytics
Die Seite Analytics zeigt, wie Kunden den Rechner nutzen:
- Anfragen insgesamt im Zeitverlauf und aktuelle Aktivität.
- Anfragen nach Quelle: Produktseite, Warenkorbseite oder Warenkorb-Drawer.
- Beliebte Kombinationen aus Postleitzahl und Land.
- Versandarten, die Kunden angezeigt wurden.
- Fehler, damit du Ziele ohne Tarife erkennst.
10. Marketing-Events
ShipCalc kann ein Event „Calculate Shipping“ an Google Analytics 4, Google Tag Manager und Meta Pixel senden, wenn diese Tools bereits in deinem Shop eingebunden sind. ShipCalc installiert selbst keine Tracking-Skripte.
- Öffne Marketing events in ShipCalc.
- Wähle die Plattformen, an die gesendet werden soll.
- Optional kannst du Eventname, Kategorie, Label oder Wert überschreiben oder eigene Parameter hinzufügen.
- Speichern.
Events enthalten die Quelle des Widgets (Produkt, Warenkorb oder Drawer), das Land und ob eine Postleitzahl eingegeben wurde.
11. Diagnose
Die Seite Diagnostics führt eine echte Anfrage aus, ohne über deinen Shop zu gehen – praktisch, nachdem du Versandzonen oder Tarife geändert hast.
- Öffne Diagnostics in ShipCalc.
- Wähle ein Produkt, ein Land und eine Postleitzahl.
- Führe die Anfrage aus und sieh genau, was Shopify zurückgibt.
12. Fehlerbehebung
Der Rechner erscheint nicht auf der Produktseite
- Prüfe, ob der Block der Vorlage hinzugefügt wurde, die deine Produkte tatsächlich nutzen, und ob du gespeichert hast.
- Stell sicher, dass der Block nicht in einem ausgeblendeten oder eingeklappten Abschnitt liegt.
- Prüfe, ob Länderregeln für Besucher unter Appearance ihn für deinen Standort ausblenden.
Es werden keine Tarife zurückgegeben
- Prüfe, ob das Ziel zu einem aktiven Markt und einer Versandzone in Shopify gehört.
- Prüfe, ob Versandprofil und Gewicht des Produkts deine Tarifbedingungen erfüllen.
- Teste dasselbe Ziel in Diagnostics, um zu sehen, was Shopify zurückgibt.
- Formuliere die Meldung „keine Tarife“ so, dass Kunden wissen, was sie als Nächstes tun können.
Eine ausführlichere Checkliste findest du unter Shopify-Versandtarife werden nicht angezeigt.
Er erscheint nicht in meinem Warenkorb-Drawer
- Prüfe, ob die App-Einbettung für den Warenkorb-Drawer aktiviert und gespeichert ist.
- Trag in den Einstellungen der Einbettung einen Drawer-Selektor ein.
- Kontaktiere uns mit dem Namen deines Themes.
13. Support
Im ShipCalc-Adminbereich gibt es eine Support-Seite mit schnellen Antworten und einem Kontaktformular. Du kannst uns auch hier schreiben – wir antworten per E-Mail.