Adding the Planet badge to your online store

If you want to showcase your commitment to carbon-neutral shipping, then you can add the Planet badge to your online store. Planet badges have two different modes: Marketing mode and Engagement mode. Marketing mode lets you explain your climate commitment with stats, comparisons, and details about the projects you fund with Planet. Engagement mode is an interactive badge that lets your customers add a $0.25 USD fee to their checkout to make their shipment carbon neutral.

If you have selected the Pioneer or Alliance subscription, then your badge will be set to Marketing mode by default. If you have selected the Community subscription, then your badge will be set to Engagement mode by default. You can add as many Planet badges as you want, and can change the mode for each badge individually.

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.
  • Engagement mode is only available if you subscribe to Planet’s Community or Alliance plans.
  • You need to be using an Online Store 2.0 theme.

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.

Add the Planet badge to an Online Store 2.0 theme

If you use 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, go to Online Store > Themes, and then click Customize next to the theme where you want to add the badge.
  2. Select the page where you want to add the Planet badge, such as Home page or Cart.
  3. Add the badge to an existing or new section:
    • To add the badge to an existing section, click Add block, and then select Shopify Planet.
    • To add the badge to a new section, click Add section, and then select Shopify Planet.
  4. Click Save.

Change between Marketing mode and Engagement mode

After you add a Planet badge to your theme, then you can change the mode directly from your theme editor. A badge can be in only one mode at a time.

Steps:

  1. From your Shopify admin, go to Online Store > Themes, and then click Customize next to the theme where you want to adjust the badge.
  2. Select the page where you've added the Planet badge.
  3. In the Online store editor sidebar, from the drop down menu in the Apps section, click Shopify Planet.
  4. In the Badge Mode section, select Marketing or Engagement.
  5. Click Save.

Customizing the design of a 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 side or top-left corner of the badge. Available in Marketing and Engagement modes.You can choose to show or hide the Planet logo.
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 side 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. Available in Marketing and Engagement modes.You can choose to show or hide the “More info” section.
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. Available in Marketing mode.You can choose to show or hide the emissions removed.
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. Available in Marketing mode. You can choose to show or hide the innovations funded.

Customize a Planet badge

  1. From your Shopify admin, go to Online Store > Themes, and then click Customize next to the theme where you want to adjust the badge.
  2. Select the page where you've added the Planet badge.
  3. In the online store editor sidebar, from the drop down menu in the Apps section, click Shopify Planet.
  4. Apply your Planet badge customizations.
  5. Click Save.

Add a Planet Impact Page

If you want to provide your customers with more information about your climate commitment and the positive impact of carbon-neutral shipping, then you can create a Planet Impact Page.

Steps:

  1. From your Shopify admin, go to Apps > Planet.
  2. Click Settings and Tools.
  3. In the Add the Planet Impact Page to your store section, click Add Page.
  4. Optional: If you want to add your new Planet Impact Page to your Planet badge, then select Add link to Impact Page from Planet Badge.

Edit your Planet Impact Page

Your Planet Impact Page will automatically include data, videos, and images that outline the benefits of carbon-neutral shipping and how the process works. If you want to customize this content or personalize it to your brand, then you can edit the page directly in your Shopify admin.

Steps:

  1. Go to Online Store > Pages.
  2. Click the Climate Commitment page.
  3. Make your changes to the existing page content.
  4. Click Save. Visit the page in your online store to make sure the changes display properly. You might have to reload the browser to view saved changes.
  5. Optional: Add a menu item for your Planet Impact Page in your online store navigation to make the page easy for your customers to find.
Can’t find the answers you’re looking for? We’re here to help.