【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説
はじめに
本記事は、Shopify アプリ「コレクションページでカートに追加｜リテリア ぽんぽんカート」の設定方法について記載しております。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなものという認識で問題ありません。
「コレクションページでカートに追加｜リテリア ぽんぽんカート」は、コレクションページやトップページからカートページに遷移することなく商品をカートに追加できる sアプリです。
顧客はカートに追加した後、すぐに次の商品をカートに追加することが可能なので、顧客単価・コンバージョン率の向上が見込めます。
Shopify に慣れていない方やセクションの使い方がわからない方でも設定できるよう書こうと思います。
コレクションページにカートに追加ボタンを導入したいという方は、ぜひインストールしていただきたいです。
それでは、アプリを導入することでできること・インストール方法・使い方の解説を行なっていきます。
目次
- ぽんぽんカートで追加できるセクション
- ぽんぽんカートで出来ること
- ぽんぽんカートの設定方法
- バリエーションピッカーの事前設定
- メタフィールドの追加
- ファイルに画像を追加
- 商品管理ページでメタフィールドに色、画像のリンクを追加
- セクション内でカラーピッカーを選択
- 終わりに
ぽんぽんカートで追加できるセクション
ぽんぽんカートでは下記の 2 つのセクションを追加することができます。
PonPonCart Collection（コレクション限定セクション）
- コレクションページのみ追加可能
- カートの中身を表示するフォームが搭載
- 機能
- カートの種類を変更
- 商品タグの表示
- バリエーションピッカーの種類を選択
- バリエーションピッカーの形を選択
- 商品の表示数を変更
- メインカラーを変更
- 商品の列数の変更
- 商品間の余白を調整
- 商品名の余白を調整
- 商品名のフォントサイズを調整
- 言語編集
PonPonCart Section
- コレクションページのみ追加可能
- 機能
- コレクションを選択
- 商品タグの表示
- バリエーションピッカーの種類を選択
- バリエーションピッカーの形を選択
- 商品の表示数を変更
- メインカラーを変更
- 商品の列数の変更
- 商品間の余白を調整
- 商品名の余白を調整
- 商品名のフォントサイズを調整
- 言語編集
各セクションの設定方法については、「ぽんぽんカートの設定方法」に記載しております。
ぽんぽんカートで出来ること
ぽんぽんカートを導入することで追加できる主な機能は下記になります。
- どこのページからでも商品をカートに追加機能
- コレクションの商品タグでの絞り込み機能
- モーダル機能
- バリエーションピッカー機能
各機能について説明していきます。
どこのページからでも商品をカートに追加機能
まさに、ぽんぽんカートのメイン機能です。
カートページに移動することなく、商品をカートに追加することができます。
セクションは、トップページだけでなく、商品ページ、コレクションページ、ブログページ、各ページなどあらゆるページに追加することができます。（まさに、、どこでもカートに追加、、、）
セクションを各ページに追加する方法については、「ぽんぽんカートの設定方法」に記載しております。
コレクションの商品タグでの絞り込み機能
次に「コレクションの商品タグでの絞り込み」機能について説明します。
ぽんぽんカートでは、商品タグで絞り込みをすることができます。（タグの絞り込み機能は削除することはできません。※2022 年 4 月 6 日時点）
現在（2022 年 4 月 6 日時点）の機能では、ぽんぽんカートを追加したコレクションページに表示される商品の商品タグがすべて表示されます。
表示されたタグをクリックすると、クリックした商品タグを持つ商品のみ表示されます。
また、複数タグを選択すると、どちらかのタグを持った商品が表示されます。
実装例
例えば、商品 A：「赤、T シャツ、メンズ」、商品 B：「紺、ズボン、メンズ」、商品 C：「白、T シャツ、ウィメンズ」という各タグを持った 3 つの商品があるとします。この状態で、「赤」と「T シャツ」というタグをクリックすると、商品 A と商品 B が表示されます。
【商品タグをクリックする前】
【商品タグをクリックした後】
モーダル機能
次に「モーダル」機能について説明します。
ぽんぽんカートでは、商品画像をクリックすると商品の詳細が記載されたモーダルが表示されます。（モーダル機能は削除することはできません。※2022 年 4 月 6 日時点）
モーダル内には、商品名、商品価格、商品説明、商品画像、数量ピッカー、カートに追加ボダンが実装されています。
カートに追加ボタンが実装されているため、モーダルから直接、商品をカートに追加することが可能です。
バリエーションピッカー機能
次に「バリエーションピッカー」機能について説明します。
ぽんぽんカートでは、商品にバリエーションがある場合に、バリエーションを選択できるフォームが追加されます。（バリエーション機能は削除することはできません。※2022 年 4 月 6 日時点）
バリエーションピッカーで購入したいバリエーションを選択することで、選択したバリエーションの商品がカートに追加されます。
ぽんぽんカートでは、 カラーセレクター、イメージセレクター、オプションセレクターの 3 種類のバリエーションピッカーを用意しております。
バリエーションピッカーの設定方法については、「ぽんぽんカートの設定方法」に記載しております。
【カラーセレクター】
【イメージセレクター】
【オプションセレクター】
主な機能について説明しました。
次に、ぽんぽんカートで実装されている機能の設定方法について説明します。
ぽんぽんカートの設定方法
ぽんぽんカートで実装されている機能の設定方法を下記の順に説明します。
- アプリのインストール
- カートの種類を変更（PonPonCart Collection（コレクションページ限定セクション））
- コレクションの選択（PonPonCart Section）
- 商品タグの表示
- バリエーションピッカーの種類を選択
- バリエーションピッカーの形を選択
- 商品の表示数を変更
- メインカラーを変更
- 商品の列数の変更
- 商品間の余白を調整
- 商品名の余白を調整
- 商品名のフォントサイズを調整
- 言語編集
アプリのインストール
ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。
アプリストアで、「コレクションページでカートに追加｜リテリア ぽんぽんカート」を検索してください。
検索結果に「コレクションページでカートに追加｜リテリア ぽんぽんカート」が表示されますので、クリックしてアプリの紹介ページを開きます。
「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。
マーチャント用のアカウント（普通の Shopify アカウント）ですと、月額 $5.99 でご利用いただけます。また、7 日間の無料お試し期間をご利用いただいてアプリの挙動をご確認いただくことができます。
以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。
アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後から取りますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。
以下のようなアプリの管理画面が表示されれば、インストールは完了です。
アプリの管理画面に従いアプリブロックを追加すると、ぽんぽんカートを使用することができます。
次にアプリの機能設定について解説します。
カートの種類を変更（PonPonCart Collection）
カートの種類は「Sticky カート」と「Drawer カート」の 2 種類です。
『ドロワーカート』のチェックボックスでカートの種類を変更できます。
チェック時は「Drawer カート」、チェックしていないときは「Sticky カート」が適用されます。
Sticky カート
Sticky カートでは常に表示で、スクロールに合わせてカートが移動します。
スクロール時
Drawer カート
Drawer カートでは通常時は非表示で、カートに追加ボタンを押したときに、カートの中身を表示します。
カートに追加ボタンを押したとき
コレクションの選択（PonPonCart Section）
PonPonCart Section では、表示するセクションを選択する必要があります。
下記フォームよりコレクションを選択します。
コレクション選択時
商品タグの表示
『商品タグを表示する』の商品タグの表示/非表示を変更できます。
商品タグ表示
商品タグ非表示
バリエーションピッカーの種類を選択
『バリエーションピッカーの種類を選択』でバリエーションピッカーの種類を変更できます。
バリエーションピッカーの種類は、下記の 3 種類です。
バリエーションピッカーの事前設定に関しては、「バリエーションピッカーの事前設定」に記載しております。
カラーセレクター
イメージセレクター
オプションセレクター
バリエーションピッカーの形を選択
『バリエーションピッカーの形』でバリエーションピッカーの形を変更できます。
バリエーションピッカーの形が適用されるのは、「カラーセレクター」と「イメージセレクター」です。
カラーセレクター
イメージセレクター
商品の表示数を変更
『表示数 商品/ページ』で 1 ページあたりの商品数を設定することができます。
表示数は、1~50 個まで選択できます。
1 ページあたりの表示数よりもコレクションの商品数が多い場合は下記画像のようにページネーションされます。
メインカラーを変更
『メイン色』でセクションのメインカラーを設定できます。
変更箇所は下記の場所です。
タグボタン
チェックアウトボタン
商品の列数の変更
『列数』でセクションの列数を設定できます。
選択可能な列数は、1 列から 5 列です。
1 列
5 列
商品間の余白を調整
『余白:水平方向』・『余白:鉛直方向』で商品間の余白を調節できます。
選択可能な値は、0 から 100 です。
商品名の上下余白・フォントサイズを調整
『上下余白』・『フォントサイズ』で商品名の上下余白・フォントサイズを調節できます。
上下余白は、0-30 px、フォントサイズは、1-100 px の範囲で選択できます。
言語編集
言語編集でぽんぽんカートで使用されている文言を変更できます。
変更可能なテキスト
- カートに追加
- 売り切れ
- カート
- 支払いへ進む
バリエーションピッカーの事前設定
ぽんぽんカートで「カラーセレクター」や「イメージセレクター」を使用する際の事前設定を解説していきます。
事前準備では、バリエーションのメタフィールドに色と画像の 2 つのメタフィールドを登録していきます。
メタフィールドを使用すると、商品名や説明などのデフォルトで設定できる項目とは別に、さまざまな項目を追加することができます。
ぽんぽんカートでは、メタフィールドを使用することで、セクション内でカラーピッカーを実装することができます。
設定の流れ
設定の流れは下記の通りです。
- メタフィールドの追加
- ファイルにイメージセレクターで表示する画像を追加
- 商品管理ページでメタフィールドに色、画像リンクを追加
- ぽんぽんカートセクション内でカラーピッカーを選択
上記の流れに沿って事前準備をしていきます。
メタフィールドの追加
まず、メタフィールドから追加していきます。
メタフィールド登録
まず、ストア管理画面を開きます。
ストア管理画面左下の、「設定」をクリックします。
サイドバーに「メタフィールド」がありますので、そちらをクリックします。
その後、「バリエーション」の項目をクリックします。
右上の「定義を追加する」ボタン又は、真ん中の「定義を追加」ボタンを押します。
名前、ネームスペース、説明、コンテンツタイプを選択するを入力します。
カラーセレクターの場合
名前：任意の値
ネームスペース：my_fields._ponpon_color_picker_color
説明：任意の値
コンテンツタイプ：色
イメージセレクターの場合
名前：任意の値
ネームスペース：my_fields._ponpon_color_picker_image
説明：任意の値
コンテンツタイプ：URL
入力したら、保存するを押して登録します。
カラーセレクターかイメージセレクターどちらかを登録したら、もう一方のメタフィールドも同様に作成します。
カラーセレクターの場合
名前：任意の値
ネームスペース：my_fields._ponpon_color_picker_color
説明：任意の値
コンテンツタイプ：色
イメージセレクターの場合
名前：任意の値
ネームスペース：my_fields._ponpon_color_picker_image
説明：任意の値
コンテンツタイプ：URL
ファイルに画像を追加
次にファイルに画像を追加していきます。
サイドバーの「ファイル」を選択します。
右上の「ファイルをアップロード」ボタンを押します。
アップロードする画像を選択します。
追加した画像のリンクを保存しておきます。（後でメタフィールドに画像のリンクを貼り付けます。）
リンクは、下記画像の場所をクリックすると保存できます。
商品管理ページでメタフィールドに色、画像のリンクを追加
カラーセレクター、イメージセレクターを使用したい商品のメタフィールドを登録していきます。
Shopify ストア管理画面のサイドバーにある「商品管理」をクリックします。
商品を選択し編集画面に移動します。
商品編集画面のバリエーションの「編集ボタン」を押します。
画面の下の方にある、メタフィールドを入力するフォームがあると思うので、そちらに色と、先程保存した画像のリンクを入力します。
下記のように登録できれば問題ありません。（※画像のリンクは各自の値を入力してください。）
セクション内でカラーピッカーを選択
テーマカスタマイズ画面に移動し、ぽんぽんカートセクションでバリエーションピッカーの値を変更すると設定完了です。
下記の画像のように、表示されると思います。
終わりに
今回は、「コレクションページでカートに追加｜リテリア ぽんぽんカート」の解説を行いました。
少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。
ここまでお付き合い頂き、誠にありがとうございました。
どこでもカートに追加｜リテリア ぽんぽんカート
もし、うまく動かない、設定方法がわからない、さらに機能を追加して欲しい等ありましたら、下記よりお問い合わせいただけますと幸いです。
.png%3Fw%3D400&w=828&q=75)
.png%3Fw%3D400&w=828&q=75)
