将 Planet 徽章添加到您的在线商店

已于 Apr 24, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/shipping/carbon-neutral-shipping/planet-app。

如果您想向客户展示您的订单采用碳中和运输，您可以将 Planet 徽章添加到在线商店。本文将指导您完成添加徽章和自定义其外观的流程。

本页相关主题

添加 Planet 徽章的注意事项

在将 Planet 徽章添加到在线商店之前，请查看以下注意事项：

  • 您需要安装 Planet。
  • 您需要拥有 Planet 订阅套餐的有效订阅。
  • 如果您使用经典模板，则将无法自定义 Planet 徽章。

可用语言

您无法将您自己的翻译应用于 Planet 徽章。但是，可将 Shopify 后台的语言更改为多种可用语言。若要翻译 Planet 应用徽章，您需要使用与“以多种语言进行销售”兼容的模板。您可以更改默认模板语言并添加其他语言，以便客户可以选择他们的首选语言。

将 Planet 徽章添加到 Online Store 2.0 模板中

如果您使用的是 Online Store 2.0 模板，则可以直接通过模板编辑器将 Planet 徽章添加到在线商店的任何页面。

步骤：

  1. 在 Shopify 后台中，点击设置 > 应用和销售渠道。

  2. 在应用和销售渠道页面中，点击Online store。

  3. 点击打开销售渠道。

  4. 点击模板。

  5. 在当前模板部分中，点击自定义。

  6. 选择要添加 Planet 徽章的页面，例如主页或购物车。

  7. 将徽章添加到现有分区或新分区：

    • 若要将徽章添加到现有分区，请点击添加块，然后选择 Planet。
    • 若要将徽章添加到新分区，请点击添加分区，然后选择 Planet。

  8. 点击保存。

自定义 Planet 徽章的设计

如果您使用 Online Store 2.0 模板，则还可以直接从模板编辑器中自定义 Planet 徽章的外观。以下是您可以自定义的属性：

  • 背景颜色和边框
  • Planet logo、“更多信息”分区、“统计信息”分区或“创新资金支持”分区的显示方式
  • 徽章大小、边距和圆角尺寸

请查看下表，详细了解您可以自定义的不同 Planet 徽章属性：

Planet 徽章可自定义属性
属性 描述 自定义选项
Planet logo Planet logo 为浅绿色圆形 logo，右下角有一片深色树叶。根据徽章的大小，logo 会显示在徽章的左侧或左上角。 您可以选中或取消选中 Planet logo 复选框。
更多信息链接 如果您设置了 Impact 页面，则可以通过显示“更多信息”链接将客户引导至您的 Impact 页面。根据徽章的大小，“更多信息”行动号召操作会在徽章右侧或右上角显示为更多信息链接。如果您未设置 Impact 页面，则会显示文本 Powered by Shopify Planet。 您可以选中或取消选中显示“更多信息”分区复选框。
显示已去除的排放量 “显示已移除的排放量”显示您通过 Planet 支持的项目从空气中已移除的碳排放量（以千克为单位）。“显示已移除的排放量”还会显示与已移除的排放量相对应的普通油车行驶距离，以便您的客户能够理解并衡量您开展碳中和运输的影响。 您可以选中或取消选中显示已去除的排放量复选框。
显示创新资金支持 每个订阅套餐都帮助为不同的公司和创新解决方案提供资金。根据您的订阅套餐，“创新资金支持”分区将显示您支持的碳去除项目类型的示例。 您可以选中或取消选中显示已去除的排放量复选框。

步骤：

  1. 在 Shopify 后台中，点击设置 > 应用和销售渠道。

  2. 在应用和销售渠道页面中，点击Online store。

  3. 点击打开销售渠道。

  4. 点击模板。

  5. 在当前模板部分中，点击自定义。

  6. 选择已添加 Planet 徽章的页面，例如主页或购物车。

  7. 从下拉菜单中的应用分区，选择 Planet 应用块。

  8. 应用 Planet 徽章自定义。

  9. 点击保存。

将 Planet 徽章添加到经典模板或自定义模板中

如果您使用经典或自定义模板，则需要手动编辑模板的代码才能添加 Planet 徽章。

步骤：

  1. 在 Shopify 后台中，点击设置 > 应用和销售渠道。

  2. 在应用和销售渠道页面中，点击Planet。

  3. 点击打开应用。

  4. 在 Planet 徽章显示部分中，点击 添加徽章。

  5. 复制以下代码片段：

<!-- 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. 转到以下文件之一以添加徽章：

  2. 将代码片段粘贴到您希望显示徽章的位置，然后点击保存。

  3. 点击预览以查看徽章在您在线商店中的显示方式。

准备好开始使用 Shopify 进行销售了吗？

免费试用