カートにポイント機能を表示_b. コードで導入する場合

作業をする前にかならずテーマを複製し、複製したテーマに対して編集を行なってください

 Shopifyの管理画面から、オンラインストア→テーマ→ 「•••」→複製の順に押すことでテーマの複製が可能です
どこポイ アカウントページにポイント数-コードで導入  テーマ複製

  

手順1.必要なコードの自動追加

インストールするテーマを選択しインストールボタンを押します。
(選択するテーマは必ず複製したテーマを選んでください)
どこポイ カート-コードで導入 インストール

 

手順2. ファイルのダウンロード

どこポイの機能で必要なliquidファイル及びcssファイルをダウンロードします。
dokopoi-cart .zipというファイルがダウンロードされます

どこポイ カート-コードで導入 ダウンロードボタンを押す

解凍するとsnippetsとassetsというフォルダが格納されており、snippetsフォルダにはliquidファイル、assetsにはcssファイルが格納されています。
どこポイ カート-コードで導入 スニペット

 

手順3. ダウンロードしたファイルをテーマにアップロード

手順2でダウンロードしたファイルをテーマにアップロードします。
以下のファイルをスニペット(snippets)フォルダ内にアップロードします

  • dokopoi-cart.liquid
  • dokopoi-acquisition.liquid

     

    ◆アップロードの手順

    Shopify管理画面から最初に複製したテーマをテーマエディタで開きます。
    1. 新しいスニペットを追加するを押します。
    どこポイ カート-コードで導入 sunipet追加

     

     

    2. スニペットの名前にdokopoi-cartと入力して完了ボタンを押します。
    どこポイ カート-コードで導入 完了ボタン

     

    3.利用しているエディターもしくはブラウザでdokopoi-cart.liquidを開き、コードを全選択しコピーして先ほど作成したスニペットに貼り付けます。最後に保存ボタンを押します。
    どこポイ カート-コードで導入 保存ボタン

     

    4. 同様にdokopoi-acquisitionというスニペットを作成します。
    どこポイ カート-コードで導入 スニペット作成

     

    5. 利用しているエディターもしくはブラウザでdokopoi-acquisition.liquidを開き、コードを全選択しコピーして先ほど作成したスニペットに貼り付けます。最後に保存ボタンを押します。
    どこポイ カート-コードで導入 コード貼り付け
    以下のファイルをアセット(assets)フォルダ内にアップロードします(アップロード済みの場合は不要)

    • dokopoi-css.css

       

      アップロードの手順
      1. 新しいアセットを追加するボタンを押します。

      どこポイ カート-コードで導入 追加ボタン

       

      2. dokopoi-css.cssファイルをドラックアンドドロップします。最後に完了ボタンを押します。
      どこポイ カート-コードで導入 完了ボタン

      テーマをローカル上で編集されている場合はそれぞれのフォルダにファイルを配置していただくだけで構いません 

       

       

      手順4. カートページへコードを追加
      どこポイ カート-コードで導入 カートページ追加

      カートページ内の表示したい箇所に以下のコードをコピーして追加します。
      ※カートページはテーマによってLiquidの構成が大きく異なります。
      そのため、スニペットを追加する際はご利用中のテーマの仕様を確認した上で行なってください。

      {% render 'dokopoi-cart' %}

      カートページの獲得予定ポイントを表示するコードは以下です
      (必ずポイント利用機能の付近に設置してください)

      {% render 'dokopoi-acquisition' %}

      どこポイ カート-コードで導入 貼り付け

      スニペット挿入後は、プレビューでカートに商品を追加し、アカウントをログインして表示されていることを確認してください。
      どこポイ カート-コードで導入 ログイン確認

      ポイント機能が有効になっていないとサイトに表示されません!

      テスト目的でどこポイを利用する場合

      • 確認が必要なタイミングで機能を有効化してください
      • 確認後は忘れずに機能を無効化してください

       どこポイ 機能を有効化

       

       

      手順5.(おすすめ)商品ページ内の「今すぐ購入する」ボタンを非表示

      「今すぐ購入する」ボタンはカートページを経由せずにチェックアウト画面に進むため、ポイント機能を利用するためのアカウント作成のご案内や、アカウント保持されているお客様へ、ログインの推進やポイント利用のご案内ができなくなります。

      そのため、「テーマ」の「カスタマイズ」→「Products」→「デフォルトの商品」(カスタマイズされている場合は該当の商品)ページ内の該当するセクション内(Debutの場合は「商品ページ」セクション)で「動的チェックアウトボタンを表示する」のチェックボックスをオフにしてください。

      【Online store2.0対応テーマの場合】
      どこポイ (おすすめ)商品ページ内の「今すぐ購入する」ボタンを非表示 Dawn

       

      【それ以外のテーマの場合】
      どこポイ (おすすめ)商品ページ内の「今すぐ購入する」ボタンを非表示 Debut