Adding the Planet badge to your online store

If you want to showcase to your customers that your orders are carbon neutral, then you can add the Planet badge to your online store. This article will guide you through the process of adding the badge and customizing its appearance.

Considerations for adding the Planet badge

Before you add the Planet badge to your online store, review the following considerations:

  • You need to have Planet installed.
  • You need to have an active subscription to a Planet subscription plan.
  • If you're using a vintage theme, then you won't be able to customize the Planet badge.

Available languages

You can't apply your own translations to the Planet badge. However, there's a list of available languages that the Shopify admin can be changed to. To translate the Planet app badge, you need to use a theme that's compatible with selling in multiple languages. You can change the default theme language and add other languages so that customers can select their preferred language.

Adding the Planet badge to an Online Store 2.0 theme

If you're using an Online Store 2.0 theme, then you can add the Planet badge to any page of your online store directly from your theme editor.

Steps:

  1. From your Shopify admin, click Settings > Apps and sales channels.

  2. From the Apps and sales channels page, click Online store.

  3. Click Open sales channel.

  4. Click Themes.

  5. In the Current theme section, click Customize.

  6. Select the page where you want to add the Planet badge, such as Home page or Cart.

  7. Add the badge to an existing or new section:

    • To add the badge to an existing section, click Add block, and then select Planet.
    • To add the badge to a new section, click Add section, and then select Planet.
  8. Click Save.

Customizing the design of the Planet badge

If you're using an Online Store 2.0 theme, then you can also customize the appearance of the Planet badge directly from your theme editor. Here are the attributes that you can customize:

  • background color and border
  • display of the Planet logo, more info section, stats section, and innovations funded section
  • badge size, margins, and corner rounding dimensions

Review the following table to learn more about the different Planet badge attributes that you can customize:

Planet badge customizable attributes
AttributeDescriptionCustomization options
Planet logoThe Planet logo is depicted as a light green circle with a dark leaf off to the bottom right side. Depending on the size of the badge, the logo appears on the left or top-left corner of the badge.You can check or uncheck the Planet logo checkbox.
More info linkIf you have an Impact Page set up, then you can show the more info link to direct customers to your Impact Page. Depending on the size of the badge, the more info call to action appears as a More info link on the right or top-right corner of the badge. If you don't have an Impact Page set up, then the text Powered by Shopify Planet appears.You can check or uncheck the Show "More info" section checkbox.
Display emissions removedDisplay emissions removed displays the amount of carbon emissions in kg that you've removed from the air through the projects that you've supported with Planet. Display emissions removed also displays a comparison of miles driven by an average gasoline-powered car so that your customers can relate to and quantify the carbon-neutral shipping impact that you've made.You can check or uncheck the Display emissions removed checkbox.
Display innovations fundedEach subscription plan helps fund different companies and innovative solutions. Depending on your subscription plan, the innovations funded section will show examples of the types of projects removing carbon emissions that you're supporting. You can check or uncheck the Display emissions removed checkbox.

Steps:

  1. From your Shopify admin, click Settings > Apps and sales channels.

  2. From the Apps and sales channels page, click Online store.

  3. Click Open sales channel.

  4. Click Themes.

  5. In the Current theme section, click Customize.

  6. Select a page where you've added the Planet badge, such as Home page or Cart.

  7. From the drop-down menu, in the Apps section, select the Planet app block.

  8. Apply your Planet badge customizations.

  9. Click Save.

Adding the Planet badge to a vintage or custom theme

If you're using a vintage or custom theme, then you'll need to manually edit your theme's code to add the Planet badge.

Steps:

  1. From your Shopify admin, click Settings > Apps and sales channels.

  2. From the Apps and sales channels page, click Planet.

  3. Click Open app.

  4. In the Planet badge display section, click Add badge.

  5. Copy the following 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 -->
  1. Go to one of the following files to add the badge:
  2. Paste the code snippet where you want the badge to be displayed, and then click Save.
  3. Click Preview to review how the badge is displayed on your online store.
Ready to start selling with Shopify?Try it free