> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rc.cleverhub.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify に Hello Clever を追加する

> Shopify ストアに Hello Clever を導入し、エクスプレスチェックアウト、決済ロゴ、フッターのブランド表示、商品のキャッシュバックのタグラインを順に設定します。

このページでは、Shopify ストアに Hello Clever を追加するために必要なすべてを扱います。Merchant Dashboard でストア用の Payments Account（決済アカウント）を作成し、Shopify App Store から Hello Clever アプリを導入し、App ID と Secret Key で両者を接続します。その後、必要に応じてエクスプレスチェックアウト、チェックアウトページの決済ロゴ、フッターの Hello Clever ロゴ、商品ページのキャッシュバックのタグラインでストアフロントを強化できます。

## 要件

アプリを導入する前に、ストアが正しく設定されていることを確認してください。

<Info>
  Hello Clever は、加盟店アカウントの構成に応じて複数の国と通貨に対応しています。ストアの住所と通貨が Hello Clever アカウントの地域と一致していることを確認してください。
</Info>

<Steps>
  <Step title="ストアの住所を確認する">
    1. Shopify Admin で **Settings > General** へ移動します。
    2. **Store address** の下で、Hello Clever アカウントの地域に一致する国を選択します（例：**Australia**）。
  </Step>

  <Step title="ストアの通貨を確認する">
    1. Shopify Admin で **Settings > General** へ移動します。
    2. **Store defaults** の下で、ストアの通貨を Hello Clever の加盟店アカウントに設定されている通貨に一致させます。
  </Step>
</Steps>

## Hello Clever を導入する

<Steps>
  <Step title="Merchant Dashboard で Payments Account を作成する">
    1. Hello Clever の Merchant Dashboard にログインします。
    2. 右上の **Create account** をクリックします。
  </Step>

  <Step title="このアカウントの通貨を選択する">
    **Create account** の画面で、**Select a currency for this account** の下に表示されている通貨を確認します。

    別の通貨を使う場合は **Change** をクリックし、**Currency** ダイアログの一覧から通貨を選びます（検索欄で絞り込めます）。通貨は Hello Clever の加盟店アカウントに設定されている通貨と一致させてください。
  </Step>

  <Step title="Payments Account の設定を開始する">
    **What would you like to set up?** の下で **Accept payments and send payouts** のカードを確認し、**Create Payments Account** をクリックします。
  </Step>

  <Step title="アカウントのフォームに入力する">
    次のフォーム項目を入力します。

    * **Currency**：前のステップから引き継がれます（読み取り専用）。
    * **Account name**：登録済みのアカウント名（読み取り専用）。
    * **Account nickname**：このアカウントを識別するためのラベル（例：`Payment Account 1`）。
    * **Account image**：**Browse** をクリックしてロゴやストアの画像をアップロードします。ファイルサイズの上限は 2MB です。
    * **Planned integration type**：ドロップダウンを開き、**Shopify** を選択します（**For online and in-store merchants** の下にあります）。
    * **Website URL**：Shopify ストアの URL を入力します（例：`https://your-store-name.shopify.com`）。

    フォームの入力が完了したら、**Create Payments Account** をクリックします。

    <Note>
      ストアフロント向けにアカウントが構成されるよう、**Planned integration type** を **Shopify** に設定してください。**Website URL** がストアと一致していることも確認してください。一致していないと連携が機能しないことがあります。
    </Note>
  </Step>

  <Step title="App ID と Secret Key を確認する">
    1. Merchant Dashboard の右上にあるアカウント名をクリックし、**Developer** の下の **Authentication** を選択します。
    2. **Authentication** のページで、**Auth 1.0** タブが選択されていることを確認します。
    3. 作成した Payments Account に該当する行を見つけ（**Account Name & URL** と **Name & Plugin Type** で照合します）、その **App ID** と **Secret Key** をコピーします。
  </Step>

  <Step title="Shopify App Store からアプリを導入する">
    1. Shopify アカウントにログインした状態で、Hello Clever のアプリページ [https://apps.shopify.com/cleverpay](https://apps.shopify.com/cleverpay) にアクセスします。
    2. **Install** をクリックします。
  </Step>

  <Step title="ストアを接続する">
    アプリを導入すると、Hello Clever の接続ページ (`connect.helloclever.co/connect-shopify`) にリダイレクトされます。コピーした **App ID** と **Secret Key** を入力し、**Connect** をクリックします。
  </Step>

  <Step title="設定を確認する">
    接続が完了すると、ストアのチェックアウトページに Hello Clever が支払いの選択肢として表示されます。チェックアウトを開き、顧客が利用できる決済手段の中に Hello Clever が表示されることを確認してください。
  </Step>
</Steps>

<Note>
  App ID と Secret Key のペアは、1つの Shopify ストアにのみ使用できます。複数のストアに Hello Clever を追加する必要がある場合は、ストアごとに Merchant Dashboard で新しい Payments Account を作成し、それぞれ別の認証情報を発行してください。
</Note>

***

## チェックアウトの決済ロゴを設定する

Shopify のチェックアウトページで顧客に表示される決済手段のロゴを設定できます。

<Steps>
  <Step title="Payment の設定へ移動する">
    Shopify Admin の左下にある **Settings** をクリックし、**Payments** を選択します。
  </Step>

  <Step title="Hello Clever の設定を開く">
    **Payments** のセクションで **Hello Clever** の決済アプリをクリックします。Hello Clever の設定ページにリダイレクトされます。
  </Step>

  <Step title="ロゴを選択する">
    チェックアウト時に顧客へ表示したい支払いの選択肢を選びます。
  </Step>

  <Step title="保存する">
    **Save** をクリックして変更を適用します。
  </Step>
</Steps>

<Note>
  Shopify はチェックアウトで最大3つの決済ロゴを表示します。それより多くの決済手段が有効になっている場合、最初の3つのロゴのみが表示されます。顧客はロゴの横のツールチップにカーソルを合わせることで、対応する手段の全一覧を確認できます。
</Note>

***

## フッターに Hello Clever のロゴを追加する

Shopify ストアのフッターに Hello Clever のロゴを表示するには、次の手順に従ってください。

<Steps>
  <Step title="Themes のセクションを開く">
    Shopify Admin のサイドバーから **Themes** をクリックします。
  </Step>

  <Step title="テーマエディターを開く">
    使用中のテーマで **Customize** ボタンをクリックします。
  </Step>

  <Step title="コードエディターを開く">
    テーマエディターで左上の3点メニューをクリックし、**Edit code** を選択します。
  </Step>

  <Step title="フッターのファイルを編集する">
    コードエディターで `footer.liquid` のファイルを開きます。
  </Step>

  <Step title="決済手段のループを更新する">
    `footer.liquid` 内で次のコードを見つけます。

    ```liquid theme={null}
    {% for type in shop.enabled_payment_types %}
    ```

    これを次に置き換えます。

    ```liquid theme={null}
    {% assign enabled_payment_types = 'visa,master,american_express,helloclever' | remove: ' ' | split: ',' %}{% for type in enabled_payment_types %}
    ```
  </Step>

  <Step title="変更を保存する">
    ファイルを保存します。これでストアのフッターに Hello Clever のロゴが表示されます。
  </Step>
</Steps>

***

## エクスプレスチェックアウトを有効にする

Hello Clever のエクスプレスチェックアウトは、商品ページに直接チェックアウトのボタンを追加し、顧客が通常のカートの流れを経ずに購入を完了できるようにします。

### バージョン 1.x から 2.0 への移行

現在 Hello Clever アプリのバージョン 1.x を使用している場合、エクスプレスチェックアウトを有効にする前にアップグレードする必要があります。

<Steps>
  <Step title="Shopify の管理画面にログインする">
    `https://admin.shopify.com/store/{your-shopify-store}` にアクセスします。`{your-shopify-store}` はストアの Shopify のスラッグに置き換えてください。
  </Step>

  <Step title="アプリを更新する">
    `https://shopify.helloclever.co/?shop={your-shopify-store}.myshopify.com` にアクセスして更新を実行します。
  </Step>

  <Step title="更新された権限に同意する">
    商品とチェックアウトへのアクセスを付与するため、更新されたアプリの権限を承認します。
  </Step>

  <Step title="theme.liquid を更新する">
    `theme.liquid` のファイル内のスクリプトの URL がバージョン 2.0 を参照していることを確認します。

    ```html theme={null}
    <script
      id="clever_widget_2.0"
      src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
      async
      onload="createCleverWidget()">
    </script>
    ```
  </Step>
</Steps>

### 商品ページでエクスプレスチェックアウトを有効にする

<Steps>
  <Step title="使用中のテーマへ移動する">
    Shopify Admin のサイドバーから **Themes** をクリックします。
  </Step>

  <Step title="テーマエディターを開く">
    使用中のテーマで **Customize** をクリックします。
  </Step>

  <Step title="コードエディターを開く">
    左上の3点メニューをクリックし、**Edit code** を選択します。
  </Step>

  <Step title="theme.liquid を開く">
    ファイルブラウザの **Layout** のセクションで `theme.liquid` のファイルを開きます。
  </Step>

  <Step title="ウィジェットのコードを追加する">
    次のコードを `theme.liquid` に挿入します。`app-id-xxxxx` は実際の App ID に置き換えてください。

    ```html theme={null}
    <script>
      async function createCleverWidget() {
        const widgets = new CleverWidget({
          app_id: 'app-id-xxxxx', // Your App ID
        });
        await widgets.initialize();
        // Cashback tagline on product page
        widgets.cashbackBanner({
          containerSelector: '.product-form__buttons',
        });
        // Express checkout button
        widgets.expressCheckout({
          containerSelector: '.product-form__buttons',
        });
      }
    </script>
    <script
      id="clever_widget_2.0"
      src="https://helloclever.co/lib/clever-widget/VERSION/2.0.0/index.js"
      async
      onload="createCleverWidget()">
    </script>
    ```

    <Tip>
      App ID は、**Authentication** ページの **Auth 1.0** タブで確認できます（Merchant Dashboard のプロフィールメニューの **Developer** の下）。
    </Tip>
  </Step>

  <Step title="保存して確認する">
    ファイルを保存し、ストアの商品ページへ移動します。Hello Clever のエクスプレスチェックアウトのボタンが表示され、機能していることを確認してください。
  </Step>
</Steps>

<Tip>
  `containerSelector` の値は、ウィジェットをページのどこに描画するかを指定します。エクスプレスチェックアウトのボタンが表示されない場合は、商品ページの HTML を調べて、テーマのカート追加ボタン周辺の正しいクラスまたは ID のセレクターを見つけ、それに合わせて更新してください。
</Tip>

***

## 商品ページにキャッシュバックのタグラインを表示する

商品ページに Hello Clever のロゴと即時キャッシュバックの率を直接表示して、顧客が購入前に特典を確認できるようにできます。

<Steps>
  <Step title="テーマエディターを開いてコードを編集する">
    Shopify Admin で **Themes** へ移動し、**Customize** をクリックして、3点メニューから **Edit code** を選択します。
  </Step>

  <Step title="theme.liquid を開く">
    **Layout** のセクションで `theme.liquid` を開きます。
  </Step>

  <Step title="キャッシュバックバナーのウィジェットを追加する">
    エクスプレスチェックアウトで使用したものと同じウィジェットのコード（上のセクションに掲載）を挿入します。`widgets.cashbackBanner()` の呼び出しが、商品ページにキャッシュバックのタグラインを描画します。

    `app-id-xxxxx` は Shopify の Payments Account の App ID に置き換えてください。
  </Step>

  <Step title="保存して確認する">
    ファイルを保存し、商品ページを開いて Hello Clever のロゴとキャッシュバックの率が正しく表示されていることを確認します。表示の見た目はテーマのレイアウトによって異なる場合があります。
  </Step>
</Steps>


## Related topics

- [Shopline に Hello Clever を追加する](/ja/integrations/shopline.md)
- [Xero に Hello Clever を追加する](/ja/integrations/xero.md)
- [Magento に Hello Clever を追加する](/ja/integrations/magento.md)