ポインポン (Poing Pong)
一覧へ戻る

初期設定

Shopifyのテーマが2.0ではない場合の表示設定

こちらはShopifyのテーマが2.0の場合の設定方法となります。

ご利用中のShopifyテーマが2.0に対応している場合は、こちらを参照ください。

 

ポインポンフローの有効化

ストアに表示されるポイントの確認、使用、レビュー投稿を行う「P」マークの表示設定です。

 

カスタマイズを開く

Shopify管理画面から「テーマ」を選択し、「カスタマイズ」を選択します。

 

カスタマイズを開く

「オンラインストア」>「テーマ」>「カスタマイズ」を選択します。

 

テーマ設定で、アプリを有効にする

「テーマ設定」から「アプリを埋め込む」を選択し、アプリを有効にします。

 

サイズや色を設定する

アプリ名を選択すると、設定項目が展開表示されます。

カラーリングや位置を調整できますので、お好みに合わせて設定ください。

 

背景カラー
マークやメニュー画面の内側の色となります。

メインカラー
マークの外側やメニュー画面の文字色に使われる色となります。

サブカラー
ボタンや強調表示などに使われる影色です。

位置
基準点と、基準点からどの程度ずらして表示するかを設定できます。

フローティングアイコン
「P」マークを任意の画像に変更することができます。アイコン変更時カラー設定はアイコンに反映されず、メニュー画面のみに反映されるようになります。
アイコンの画像ファイルは、フォーマットがjpeg、png、gifのいずれか、アスペクト比が1:1、サイズが256ピクセル×256ピクセル、または512ピクセル×512ピクセルの画像をご用意ください。

 

変更中に「P」マークをクリックするとメニュー画面が表示され、各カラーがプレビューされます。

 

レビューの表示

Shopifyテーマ2.0に対応していない場合、レビュー表示は下記の設定を行う必要がございます。

ポインポンの「設定」画面下部にあるレビュー表示のための以下の2つの手順で設定します。

 

①レビューを表示するための部品を取り込みます

「アプリ管理」>「ポインポン」>「設定」内にある「テーマの設定」のから「取得する」を選択します。

 

②レビューを表示する場所をコードを埋め込むことで指定します

①の図のように、レビューを表示するためのコードが記載されているので、該当テキストをコピーします。

 

メニューから「オンラインストア」>「テーマ」を選択し、「アクション」から「コードを編集」を選びます。

 

コード編集画面で、コードを挿入する場所を探します。

図では一般的な位置である、商品説明欄(product.description)の下に表示する設定です。

位置を変更したい場合は、挿入したい場所の該当タグを調べて設定をしていただきますようお願いします。

設定が難しい場合は有償となりますがサポートさせていただきますので、ホームページのお問い合わせフォームよりご連絡ください。

 

挿入したい場所にコードを貼り付けます。

コードの挿入が終わったら、右上にある「保存する」を選択して、設定は完了です。

 

ショップを開き該当する場所にレビューが表示されているか確認してください。

今回はProdut.description= 商品説明欄の後ろに設置する例を挙げましたので、商品説明の後にレビューが表示されています。

※レビューの投稿がないと表示されないため、確認時はテストアカウントおよびテスト商品等でお試しください。

 

一覧表示(サムネイル)へのレビュー星数とレビュー数を表示するコードを埋め込む

商品ページへのレビュー表示同様に、サムネイル用のコードをコピーします。

 

商品ページへのレビュー表示同様に、該当するファイルを探します

この例の場合「Snippets」>「Product-card-list.liquid」および「Product-card-grit.liquid」に挿入コードを追加します。

※テーマによってファイルや挿入位置が異なります。

こちらも設定が難しい場合は有償となりますがサポートさせていただきますので、ホームページのお問い合わせフォームよりご連絡ください。

コードの挿入が終わったら、右上にある「保存する」を選択して、設定は完了です。

 

ショップを開き該当する場所にレビューが表示されているか確認してください。

 

カートページでのクーポン発行表示を埋め込む

商品ページへのレビュー表示同様に、サムネイル用のコードをコピーします。

 

商品ページへのレビュー表示同様に、該当するファイルを探します

この例の場合は「Sections」>「cart-templete.liquid」に挿入コードを追加します。

※テーマによってファイルや挿入位置が異なります。

こちらも設定が難しい場合は有償となりますがサポートさせていただきますので、ホームページのお問い合わせフォームよりご連絡ください。

コードの挿入が終わったら、右上にある「保存する」を選択して、設定は完了です。

 

ショップを開き該当する場所にレビューが表示されているか確認してください。

以上で、設定は完了です。