將 Planet 徽章加入您的網路商店

此頁面列印時間為 Apr 25, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/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 標誌、「更多資訊」區段、「統計資料」區段和「創新資助」區段
  • 徽章大小、邊距和圓角尺寸

請檢視下表，深入瞭解您可以自訂的不同 Planet 徽章屬性：

Planet 徽章可自訂屬性
屬性 說明 自訂選項
Planet 標誌 Planet 標誌為淺綠色圓形，右下角有一片深色樹葉。視徽章大小而定，此標誌會顯示在徽章的左側或左上角。 您可以勾選或取消勾選「Planet 標誌」核取方塊。
更多資訊連結 如果您設定了 Impact 頁面，則可顯示更多資訊連結，將顧客導向您的 Impact 頁面。視徽章大小而定，更多資訊行動號召會以「更多資訊」連結的形式顯示在徽章右側或右上角。如果您尚未設定 Impact 頁面，則會顯示「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 銷售商品了嗎？

免費試用