Ajout du badge Planet à votre boutique en ligne
Si vous souhaitez montrer à vos clients que vos commandes sont neutres en carbone, vous pouvez ajouter le badge Planet à votre boutique en ligne. Cet article vous guidera tout au long du processus d’ajout du badge et de personnalisation de son apparence.
Sur cette page
Considérations relatives à l’ajout du badge Planet
Avant d’ajouter le badge Planet à votre boutique en ligne, prenez en compte les considérations suivantes :
- Vous devez avoir installé Planet.
- Vous devez avoir un abonnement actif à un forfait d’abonnement Planet.
- Si vous utilisez un thème vintage, vous ne pourrez pas personnaliser le badge Planet.
Langues disponibles
Vous ne pouvez pas appliquer vos propres traductions au badge Planet. Cependant, il existe une liste de langues disponibles dans lesquelles vous pouvez convertir l’interface administrateur Shopify. Pour traduire le badge de l’application Planet, vous devez utiliser un thème compatible avec la vente en plusieurs langues. Vous pouvez changer la langue par défaut du thème et ajouter d’autres langues afin que les clients puissent sélectionner la langue de leur choix.
Ajout du badge Planet à un thème Online Store 2.0
Si vous utilisez un thème Online Store 2.0, vous pouvez ajouter le badge Planet à n’importe quelle page de votre boutique en ligne directement depuis votre éditeur de thème.
Étapes
Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
À la page Applications et canaux de vente, cliquez sur Online store.
Cliquez sur Ouvrir le canal de vente.
Cliquez sur Thèmes.
Dans la section Thème actuel , cliquez sur Personnaliser.
Sélectionnez la page à laquelle vous souhaitez ajouter le badge Planet, tel que la page d’accueil ou le panier.
-
Ajoutez le badge à une section existante ou nouvelle :
- Pour ajouter le badge à une section existante, cliquez sur Ajouter un bloc, puis sélectionnez Planet.
- Pour ajouter le badge à une nouvelle section, cliquez sur Ajouter une section, puis sélectionnez Planet.
Cliquez sur Save (Enregistrer).
Personnaliser le design du badge Planet
Si vous utilisez un thème Online Store 2.0, vous pouvez également personnaliser l’apparence du badge Planet directement à partir de votre éditeur de thème. Voici les attributs que vous pouvez personnaliser :
- couleur et bordure de l’arrière-plan
- l’affichage du logo Planet, la section « Plus d’informations », la section des statistiques et la section des innovations financées
- la taille du badge, les marges et les dimensions de l’arrondi des coins
Étudiez le tableau suivant pour en savoir plus sur les différents attributs du badge Planet que vous pouvez personnaliser :
| Attribut | Description | Options de personnalisation |
|---|---|---|
| Logo Planet | Le logo Planet est représenté par un cercle vert clair et une feuille de couleur sombre en bas à droite du cercle. Selon la taille du badge, le logo apparaît dans le coin gauche ou le coin supérieur gauche du badge. | Vous pouvez cocher ou décocher la case du logo Planet. |
| Lien « Plus d’informations » | Vous pouvez afficher le lien intitulé « Plus d’informations » pour diriger vos clients vers votre page « Impact », si vous en avez configuré une. En fonction de la taille du badge, l’appel à l’action pour obtenir des renseignements supplémentaires s’affiche sous la forme d’un lien intitulé « Plus d’informations » dans le coin droit ou le coin supérieur droit du badge. Si vous n’avez pas configuré de page « Impact », le texte Créé par Shopify Planet apparaît. | Vous pouvez cocher ou décocher la case permettant d’afficher la section « Plus d’informations ». |
| Afficher les émissions éliminées | L’affichage des émissions éliminées permet de montrer le nombre de kilos d’émissions carbone que vous avez supprimés de l’atmosphère grâce aux projets que vous avez soutenus par le biais de Planet. L’affichage des émissions éliminées présente également une comparaison des kilomètres parcourus par une voiture à essence moyenne, afin que vos clients puissent quantifier et se représenter l’impact que vous avez eu avec l’expédition neutre en carbone. | Vous pouvez cocher ou décocher la case Afficher les émissions éliminées. |
| Afficher les innovations financées | Chaque forfait permet de financer différentes entreprises et solutions innovantes. En fonction de votre forfait, la section des innovations financées présentera des exemples de types de projets de suppression des émissions carbone que vous soutenez. | Vous pouvez cocher ou décocher la case Afficher les émissions éliminées. |
Étapes
Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
À la page Applications et canaux de vente, cliquez sur Online store.
Cliquez sur Ouvrir le canal de vente.
Cliquez sur Thèmes.
Dans la section Thème actuel , cliquez sur Personnaliser.
Sélectionnez une page où vous avez ajouté le badge Planet, telle que la page d’accueil ou le panier.
Dans la section Applications du menu déroulant, sélectionnez le bloc d’application Planet.
Appliquez les personnalisations que vous avez effectuées sur le badge Planet.
Cliquez sur Save (Enregistrer).
Ajout du badge Planet à un thème vintage ou personnalisé
Si vous utilisez un thème vintage ou personnalisé, vous devrez modifier manuellement le code de votre thème pour ajouter le badge Planet.
Étapes
Depuis votre interface administrateur Shopify, cliquez sur Paramètres > Applications et canaux de vente.
À la page Applications et canaux de vente, cliquez sur Planet.
Cliquez sur Ouvrir l’application.
Dans la section Affichage du badge Planet, cliquez sur Ajouter un badge.
Copiez l’extrait de code suivant :
<!-- 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 -->-
Accéder à l’un des fichiers suivants pour ajouter le badge :
- Pour ajouter le badge à la page du panier, accédez au fichier templates/cart.liquid .
- Pour ajouter le badge à la page de produit, accédez au fichier templates/product.liquid
Collez l’extrait de code à l’endroit où vous souhaitez que le badge s’affiche, puis cliquez sur Enregistrer.
Cliquez sur Aperçu pour voir comment le badge s’affiche sur votre boutique en ligne.