【オプション】アカウントページに現在のポイント数・ポイント履歴を表示_:b. コードで導入する場合

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

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

   

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

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

 

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

どこポイの機能で必要なliquidファイル及びcssファイルをダウンロードします。dokopoi-pointhistory.zipというファイルがダウンロードされます。
どこポイ アカウントページ-コードで導入 ファイルダウンロード


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

 

 

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

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

  • dokopoi-customer.liquid
  • dokopoi-pointhistory.liquid

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

     

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

     

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

     

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

     

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

    以下のファイルをアセット(assets)フォルダ内にアップロードします(アップロード済みの場合は不要)

    • dokopoi-css.css

     

    ◆アップロードの手順
    1. 新しいアセットを追加するボタンを押します。
    どこポイ アカウントページ-コードで導入 追加ボタン

     

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

    テーマエディタからそれぞれのディレクトリ内に同様のファイルを作成し、コードをコピーして配置いただいても構いません。 

     

     

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

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

    保有ポイントを表示します {% render 'dokopoi-customer' %}
    ポイント履歴を表示します {% render 'dokopoi-pointhistory' %}

    どこポイ アカウントページ-コードで導入 コード貼り付け

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

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

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

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

     どこポイ 機能を有効化

     

    ご不明な点があればカスタマーサポートへお問い合わせください。

    お問い合わせ