オンラインストアに地球のバッジを追加する

このページはApr 26, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/shipping/carbon-neutral-shipping/planet-appをご覧ください。

オンラインストアにPlanetバッジを追加すれば、カーボンニュートラルな注文であることをお客様にアピールできます。この記事では、Planetバッジを追加してその外観をカスタマイズするプロセスを説明します。

目次

Planetバッジを追加する際の留意事項

オンラインストアにPlanetバッジを追加する前に、以下の考慮事項を確認してください。

  • Planetをインストールする必要があります。
  • Planetの有効なサブスクリプションプランに加入している必要があります。
  • 以前のテーマを使用している場合、Planetバッジをカスタマイズすることはできません。

利用可能な言語

Planetバッジにご自身で作成した翻訳を適用することはできません。ただし、管理画面の表示言語として変更可能な言語のリストがあります。Planetアプリバッジを翻訳するには、複数の言語での販売に対応しているテーマを使用する必要があります。デフォルトテーマの言語を変更し、他の言語を追加して、お客様が希望する言語を選択できるようにすることができます。

Online Store 2.0のテーマにPlanetバッジを追加する

Online Store 2.0のテーマを使用している場合、テーマエディタからオンラインストアの任意のページに地球のバッジを直接追加できます。

手順:

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Online store] をクリックします。

  3. [販売チャネルを開く] をクリックします。

  4. [テーマ] をクリックします。

  5. [現在のテーマ] セクションで、[カスタマイズ] をクリックします。

  6. [ホームページ] や [カート] など、地球のバッジを追加するページを選択します。

  7. 次の方法で、既存のセクションまたは新しいセクションにバッジを追加します。

    • 既存のセクションにバッジを追加するには、[ブロックを追加] をクリックし、[Planet] を選択します。
    • 新しいセクションにバッジを追加するには、[セクションを追加] をクリックし、[Planet] を選択します。

  8. [保存] をクリックします。

Planetバッジのデザインをカスタマイズする

Online Store 2.0のテーマを使用している場合、テーマエディタから直接、Planetバッジの外観をカスタマイズすることもできます。カスタマイズできる属性は以下の通りです。

  • 背景色と罫線
  • Planetのロゴの表示、詳細情報セクション、ステータスセクション、資金提供しているイノベーションセクション
  • バッジのサイズ、余白、角を丸くする際の寸法

カスタマイズ可能な異なるPlanetバッジの属性について、詳しくは以下の表を確認してください。

Planetバッジのカスタマイズ可能な属性
属性 説明 カスタマイズオプション
Planetのロゴ Planetのロゴのデザインには、ライトグリーンの円の右下にダークグリーンの葉が描かれています。バッジのサイズに応じて、バッジの左または左上にロゴが表示されます。 [Planetのロゴ] チェックボックスには、チェックを入れたり外したりすることができます。
詳細情報のリンク Impactページを設定している場合、詳細情報リンクを表示してお客様をImpactページに誘導することができます。バッジのサイズに応じて、バッジの右または右上に、[詳細情報] リンクとして詳細情報CTAが表示されます。Impactページを設定していない場合は、「Powered by Shopify Planet」のテキストが表示されます。 [「詳細情報」セクションを表示する] チェックボックスのチェックを入れたり外したりすることができます。
除去された排出ガスの量を表示する 「除去された排出ガスの量を表示する」には、あなたがPlanetを通じてサポートしているプロジェクトにより、大気中から除去された二酸化炭素の量が㎏で表示されます。お客様にとってわかりやすく、カーボンニュートラルな配送の影響を数値化できるようにするため、「除去された排出ガスの量を表示する」には、平均的なガソリン車による走行距離の比較も表示されます。 [除去された排出ガスの量を表示する] チェックボックスのチェックを入れたり外したりすることができます。
資金提供しているイノベーションを表示する 各サブスクリプションプランでは、さまざまな会社や革新的なソリューションに資金を提供しています。サブスクリプションプランに応じて、資金提供しているイノベーションセクションには、あなたがサポートしている炭素排出量の除去プロジェクトの種類の例が掲載されます。 [除去された排出ガスの量を表示する] チェックボックスのチェックを入れたり外したりすることができます。

手順:

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Online store] をクリックします。

  3. [販売チャネルを開く] をクリックします。

  4. [テーマ] をクリックします。

  5. [現在のテーマ] セクションで、[カスタマイズ] をクリックします。

  6. [ホームページ] や [カート] など、Planetバッジを追加したページを選択します。

  7. ドロップダウンメニューの [アプリ] セクションから、[Planet] アプリのブロックを選択します。

  8. Planetバッジのカスタマイズを適用します。

  9. [保存] をクリックします。

以前のテーマまたはカスタムテーマにPlanetバッジを追加する

以前のテーマまたはカスタムテーマを使用している場合は、テーマのコードを手動で編集して、Planetバッジを追加する必要があります。

手順:

  1. 管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。

  2. [アプリと販売チャネル] ページで、[Planet] をクリックします。

  3. [アプリを開く] をクリックします。

  4. [地球のバッジの表示] セクションで、[バッジを追加] をクリックします。

  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で販売を開始する準備はできていますか?

無料体験を試す