Planet-Badges zum Onlineshop hinzufügen
Wenn du deinen Kunden mitteilen möchtest, dass deine Bestellungen CO-neutral sind, kannst du das Planet-Badge zu deinem Onlineshop hinzufügen. Dieser Artikel führt dich durch den Prozess, wie du das Badge hinzufügst und sein Erscheinungsbild anpasst.
Auf dieser Seite
Überlegungen zum Hinzufügen des Planet-Badges
Bevor du das Planet-Badge zu deinem Onlineshop hinzufühst, solltest du Folgendes beachten:
- Du musst Planet installiert haben.
- Du musst ein aktives Planet-Abonnement haben.
- Wenn du ein Vintage-Theme nutzt, kannst du das Planet-Badge nicht anpassen.
Verfügbare Sprachen
Du kannst deine eigenen Übersetzungen nicht auf das Planet-Badge anwenden. Es gibt jedoch eine Liste von verfügbaren Sprachen, in die der Shopify-Adminbereich geändert werden kann. Um das Planet-App-Badge zu übersetzen, musst du ein Theme verwenden, das mit dem Verkauf in mehreren Sprachen kompatibel ist. Du kannst die Standard-Theme-Sprache ändern und weitere Sprachen hinzufügen, damit Kunden ihre bevorzugte Sprache auswählen können.
Planet-Badge zu einem Theme aus Online Store 2.0 hinzufügen
Wenn du ein Onlineshop 2.0-Theme verwendest, kannst du das Planet-Badge direkt über den Theme-Editor zu einer beliebigen Seite deines Onlineshops hinzufügen.
Schritte:
Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Online store.
Klicke auf Vertriebskanal öffnen.
Klicke auf Themes.
Klicke im Abschnitt Aktuelles Theme auf Anpassen.
Wähle die Seite aus, zu der du das Planet-Badge hinzufügen möchtest, z. B. die Startseite oder den Warenkorb.
-
Füge das Badge zu einem vorhandenen oder neuen Abschnitt hinzu:
- Um das Badge zu einem vorhandenen Abschnitt hinzuzufügen, klicke auf Block hinzufügen und wähle dann Planet aus.
- Um das Badge zu einem neuen Abschnitt hinzuzufügen, klicke auf Abschnitt hinzufügen und wähle dann Planet aus.
Klicke auf Speichern.
Das Design des Planet-Badges anpassen
Wenn du ein Onlineshop 2.0-Theme nutzt, kannst du das Erscheinungsbild des Planet-Badges auch direkt in deinem Theme-Editor anpassen. Folgende Attribute kannst du anpassen:
- Hintergrundfarbe und Rahmen
- Anzeigen des Planet-Logos und der Abschnitte "Mehr Informationen", "Statistiken" und "Unterstützte Innovationen"
- Badge-Größe, Margen und Rundungsmaße der Ecken
In der folgenden Tabelle erhältst du mehr Informationen über die verschiedenen Planet-Badge-Attribute, die du anpassen kannst:
| Attribut | Beschreibung | Anpassungsoptionen |
|---|---|---|
| Planet-Logo | Das Planet-Logo wird als hellgrüner Kreis mit einem dunkelgrünen Blatt, das aus der unteren rechten Seite des Kreises herausragt, abgebildet. Abhängig von der Größe des Badges erscheint das Logo auf der linken Seite oder in der oberen linken Ecke des Badges. | Du kannst das Kontrollkästchen Planet-Logo aktivieren oder deaktivieren. |
| Link "Mehr Informationen" | Wenn du eine Auswirkungsseite eingerichtet hast, kannst du den Link "Mehr Informationen" anzeigen, um Kunden auf deine Auswirkungsseite zu leiten. Je nach Größe des Badges wird der Call-to-Action-Link Mehr Informationen auf der rechten Seite oder in der oberen rechten Ecke des Badges angezeigt. Wenn du keine Auswirkungsseite eingerichtet hast, wird der Text Powered by Shopify Planet angezeigt. | Du kannst das Kontrollkästchen Abschnitt "Mehr Informationen" anzeigen aktivieren oder deaktivieren. |
| Entfernte Emissionen anzeigen | Der Abschnitt "Entfernte Emissionen anzeigen" zeigt die Menge an Kohlenstoffemissionen in kg an, die du durch die Projekte, die du mit Planet unterstützt hast, aus der Luft entfernt hast. Der Abschnitt "Entfernte Emissionen anzeigen" zeigt auch einen Vergleich in Meilen an, die von einem durchschnittlichen benzinbetriebenen Auto zurückgelegt werden, damit deine Kunden die Menge der kohlenstoffneutralen Versandemissionen ins Verhältnis setzen können. | Du kannst das Kontrollkästchen Entfernte Emissionen anzeigen aktivieren oder deaktivieren. |
| Unterstützte Innovationen anzeigen | Jedes Abonnement hilft dabei, verschiedene Unternehmen und innovative Lösungen zu finanzieren. Abhängig von deinem Abonnement werden im Abschnitt "Unterstützte Innovationen anzeigen" Beispiele der von dir unterstützten Projekte zur Entfernung von Kohlenstoffemissionen angezeigt. | Du kannst das Kontrollkästchen Entfernte Emissionen anzeigen aktivieren oder deaktivieren. |
Schritte:
Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Online store.
Klicke auf Vertriebskanal öffnen.
Klicke auf Themes.
Klicke im Abschnitt Aktuelles Theme auf Anpassen.
Wähle eine Seite aus, auf der du das Planet-Badge hinzugefügt hast, z. B. Startseite oder Warenkorb.
Wähle im Dropdown-Menü des Abschnitts Apps den App-Block Planet aus.
Wende die Anpassungen am Planet-Badge an.
Klicke auf Speichern.
Das Planet-Badge zu einem Vintage- oder benutzerdefinierten Theme hinzufügen
Wenn du ein Vintage- oder benutzerdefiniertes Theme nutzt, musst du den Code deines Themes manuell bearbeiten, um das Planet-Badge hinzuzufügen.
Schritte:
Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.
Klicke auf der Seite Apps und Vertriebskanäle auf Planet.
Klicke auf App öffnen.
Klicke im Abschnitt Anzeigen des Planet-Badges auf Badge hinzufügen.
Kopiere das folgende Code-Snippet:
<!-- Start of Shopify Planet code snippet --> <link href="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.css" rel="stylesheet" type="text/css" media="all"> {%- assign CURRENT_DATE = "now" | date: "%Y-%m-%dT%H:%MZ" -%} {%- assign ACTIVE_UNTIL = shop.metafields.shopify-planet.active-until | date: "%Y-%m-%dT%H:%MZ" -%} <script src="https://cdn.shopify.com/shopifycloud/shopify-planet/bundles/latest/snippet.js" async></script> {% if CURRENT_DATE < ACTIVE_UNTIL or request.design_mode %} {% if block.settings.badgeMode != "buyer_contribution" %} <div class="shopify-planet-banner"> <img src="https://cdn.shopify.com/extensions/77a33867-106a-4608-bb7c-98fa40ed256a/0.25.0/assets/logo.png" alt="Carbon-neutral shipping with Shopify Planet" width="34" height="30" loading="lazy"> <div class="shopify-planet-banner-title-container"> <div class="shopify-planet-banner-title">All deliveries are carbon neutral</div> {% if shop.metafields.shopify-planet.impact-comms-linked %} <div class="shopify-planet-banner-subtitle-link"><a href="/pages/climate-commitment" target="_blank">More info</a></div> {% else %} <div class="shopify-planet-banner-subtitle">Powered by Shopify Planet</div> {% endif %} </div> </div> {% endif %} {% endif %} <!-- End of Shopify Planet code snippet -->-
Gehe zu einer der folgenden Dateien, um das Badge hinzuzufügen:
- Gehe zur Datei templates/cart.liquid, um das Badge zu deiner Warenkorbseite hinzuzufügen.
- Gehe zur Datei templates/product.liquid, um das Badge zu deiner Produktseite hinzuzufügen.
Füge das Code-Snippet dort ein, wo das Badge angezeigt werden soll, und klicke dann auf Speichern.
Klicke auf Vorschau, um zu überprüfen, wie das Badge in deinem Onlineshop angezeigt wird.