【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

株式会社リテリアのアイコン
株式会社リテリア

はじめに

本記事は、Shopify アプリ「コレクションページでカートに追加|リテリア ぽんぽんカート」の設定方法について記載しております。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなものという認識で問題ありません。

「コレクションページでカートに追加|リテリア ぽんぽんカート」は、コレクションページやトップページからカートページに遷移することなく商品をカートに追加できるアプリです。

顧客はカートに追加した後、すぐに次の商品をカートに追加することが可能なので、顧客単価・コンバージョン率の向上が見込めます。

Shopify に慣れていない方やセクションの使い方がわからない方でも設定できるよう書こうと思います。

コレクションページにカートに追加ボタンを導入したいという方は、ぜひインストールしていただきたいです。

https://apps.shopify.com/ponpon-cart?locale=ja&from=hp-guide

それでは、アプリを導入することでできること・インストール方法・使い方の解説を行なっていきます。

目次

本記事は下記の内容で構成されております。

  1. ぽんぽんカートで追加されるセクション

  2. ぽんぽんカートでできること
    ・どこのページからでも商品をカートに追加
    ・コレクションの商品タグでの絞り込み
    ・モーダル機能
    ・バリエーションピッカー機能

  3. ぽんぽんカートの設定方法
    ・ カートの種類を変更
    ・ 商品タグの表示
    ・ バリエーションピッカーの種類を選択
    ・ バリエーションピッカーの形を選択
    ・ 商品の表示数を変更
    ・ メインカラーを変更
    ・ 商品の列数の変更
    ・ 商品間の余白を調整
    ・ 商品名の余白を調整
    ・ 商品名のフォントサイズを調整
    ・ 言語編集

  4. バリエーションピッカー事前設定

ぽんぽんカートで追加できるセクション

ぽんぽんカートでは下記の 2 つのセクションを追加することができます。

PonPonCart Collection(コレクション限定セクション)

  • コレクションページのみ追加可能
  • カートの中身を表示するフォームが搭載
  • 機能
    • カートの種類を変更
    • 商品タグの表示
    • バリエーションピッカーの種類を選択
    • バリエーションピッカーの形を選択
    • 商品の表示数を変更
    • メインカラーを変更
    • 商品の列数の変更
    • 商品間の余白を調整
    • 商品名の余白を調整
    • 商品名のフォントサイズを調整
    • 言語編集


PonPonCart Section

  • コレクションページのみ追加可能
  • 機能
    • コレクションを選択
    • 商品タグの表示
    • バリエーションピッカーの種類を選択
    • バリエーションピッカーの形を選択
    • 商品の表示数を変更
    • メインカラーを変更
    • 商品の列数の変更
    • 商品間の余白を調整
    • 商品名の余白を調整
    • 商品名のフォントサイズを調整
    • 言語編集

各セクションの設定方法については、「ぽんぽんカートの設定方法」に記載しております。

ぽんぽんカートで出来ること

ぽんぽんカートを導入することで追加できる主な機能は下記になります。

  • どこのページからでも商品をカートに追加機能
  • コレクションの商品タグでの絞り込み機能
  • モーダル機能
  • バリエーションピッカー機能

各機能について説明していきます。

どこのページからでも商品をカートに追加機能

まさに、ぽんぽんカートのメイン機能です。
カートページに移動することなく、商品をカートに追加することができます。
セクションは、トップページだけでなく、商品ページ、コレクションページ、ブログページ、各ページなどあらゆるページに追加することができます。(まさに、、どこでもカートに追加、、、)

セクションを各ページに追加する方法については、「ぽんぽんカートの設定方法」に記載しております。
image.png

コレクションの商品タグでの絞り込み機能

次に「コレクションの商品タグでの絞り込み」機能について説明します。

ぽんぽんカートでは、商品タグで絞り込みをすることができます。(タグの絞り込み機能は削除することはできません。※2022 年 4 月 6 日時点)

現在(2022 年 4 月 6 日時点)の機能では、ぽんぽんカートを追加したコレクションページに表示される商品の商品タグがすべて表示されます。
表示されたタグをクリックすると、クリックした商品タグを持つ商品のみ表示されます。

また、複数タグを選択すると、どちらかのタグを持った商品が表示されます。

実装例

例えば、商品 A:「赤、T シャツ、メンズ」、商品 B:「紺、ズボン、メンズ」、商品 C:「白、T シャツ、ウィメンズ」という各タグを持った 3 つの商品があるとします。この状態で、「赤」と「T シャツ」というタグをクリックすると、商品 A と商品 B が表示されます。

【商品タグをクリックする前】
image.png

【商品タグをクリックした後】
image.png

モーダル機能

次に「モーダル」機能について説明します。

ぽんぽんカートでは、商品画像をクリックすると商品の詳細が記載されたモーダルが表示されます。(モーダル機能は削除することはできません。※2022 年 4 月 6 日時点)

モーダル内には、商品名、商品価格、商品説明、商品画像、数量ピッカー、カートに追加ボダンが実装されています。
カートに追加ボタンが実装されているため、モーダルから直接、商品をカートに追加することが可能です。
image.png

バリエーションピッカー機能

次に「バリエーションピッカー」機能について説明します。

ぽんぽんカートでは、商品にバリエーションがある場合に、バリエーションを選択できるフォームが追加されます。(バリエーション機能は削除することはできません。※2022 年 4 月 6 日時点)

バリエーションピッカーで購入したいバリエーションを選択することで、選択したバリエーションの商品がカートに追加されます。

ぽんぽんカートでは、 カラーセレクター、イメージセレクター、オプションセレクターの 3 種類のバリエーションピッカーを用意しております。

バリエーションピッカーの設定方法については、「ぽんぽんカートの設定方法」に記載しております。

【カラーセレクター】
image.png

【イメージセレクター】
image.png

【オプションセレクター】
image.png

主な機能について説明しました。
次に、ぽんぽんカートで実装されている機能の設定方法について説明します。

ぽんぽんカートの設定方法

ぽんぽんカートで実装されている機能の設定方法を下記の順に説明します。

  • アプリのインストール
  • カートの種類を変更(PonPonCart Collection(コレクションページ限定セクション))
  • コレクションの選択(PonPonCart Section)
  • 商品タグの表示
  • バリエーションピッカーの種類を選択
  • バリエーションピッカーの形を選択
  • 商品の表示数を変更
  • メインカラーを変更
  • 商品の列数の変更
  • 商品間の余白を調整
  • 商品名の余白を調整
  • 商品名のフォントサイズを調整
  • 言語編集

アプリのインストール

ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。

アプリストアで、「コレクションページでカートに追加|リテリア ぽんぽんカート」を検索してください。
検索結果に「コレクションページでカートに追加|リテリア ぽんぽんカート」が表示されますので、クリックしてアプリの紹介ページを開きます。

「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。

マーチャント用のアカウント(普通の Shopify アカウント)ですと、月額 $5.99 でご利用いただけます。また、7 日間の無料お試し期間をご利用いただいてアプリの挙動をご確認いただくことができます。

以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。

アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後から取りますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。

以下のようなアプリの管理画面が表示されれば、インストールは完了です。

アプリの管理画面に従いアプリブロックを追加すると、ぽんぽんカートを使用することができます。

次にアプリの機能設定について解説します。

カートの種類を変更(PonPonCart Collection)

カートの種類は「Sticky カート」と「Drawer カート」の 2 種類です。

『ドロワーカート』のチェックボックスでカートの種類を変更できます。
チェック時は「Drawer カート」、チェックしていないときは「Sticky カート」が適用されます。

Sticky カート

Sticky カートでは常に表示で、スクロールに合わせてカートが移動します。

image.png
image.png

スクロール時
image.png

Drawer カート

Drawer カートでは通常時は非表示で、カートに追加ボタンを押したときに、カートの中身を表示します。

image.png
image.png

カートに追加ボタンを押したとき
image.png

コレクションの選択(PonPonCart Section)

PonPonCart Section では、表示するセクションを選択する必要があります。

下記フォームよりコレクションを選択します。
image.png

コレクション選択時
image.png

商品タグの表示

『商品タグを表示する』の商品タグの表示/非表示を変更できます。

商品タグ表示
image.png
image.png

商品タグ非表示
image.png
image.png

バリエーションピッカーの種類を選択

『バリエーションピッカーの種類を選択』でバリエーションピッカーの種類を変更できます。
バリエーションピッカーの種類は、下記の 3 種類です。

バリエーションピッカーの事前設定に関しては、「バリエーションピッカーの事前設定」に記載しております。

カラーセレクター
image.png
image.png

イメージセレクター
image.png
image.png

オプションセレクター
image.png
image.png

バリエーションピッカーの形を選択

『バリエーションピッカーの形』でバリエーションピッカーの形を変更できます。
バリエーションピッカーの形が適用されるのは、「カラーセレクター」と「イメージセレクター」です。

カラーセレクター
image.png
image.png

image.png
image.png

イメージセレクター
image.png
image.png

image.png
image.png

商品の表示数を変更

『表示数 商品/ページ』で 1 ページあたりの商品数を設定することができます。
表示数は、1~50 個まで選択できます。
image.png
image.png

1 ページあたりの表示数よりもコレクションの商品数が多い場合は下記画像のようにページネーションされます。
image.png

メインカラーを変更

『メイン色』でセクションのメインカラーを設定できます。
image.png

変更箇所は下記の場所です。

タグボタン
image.png
image.png

チェックアウトボタン
image.png

商品の列数の変更

『列数』でセクションの列数を設定できます。
選択可能な列数は、1 列から 5 列です。

1 列
image.png

5 列
image.png

商品間の余白を調整

『余白:水平方向』・『余白:鉛直方向』で商品間の余白を調節できます。
選択可能な値は、0 から 100 です。

image.png

image.png

商品名の上下余白・フォントサイズを調整

『上下余白』・『フォントサイズ』で商品名の上下余白・フォントサイズを調節できます。

上下余白は、0-30 px、フォントサイズは、1-100 px の範囲で選択できます。
image.png

image.png

image.png

言語編集

言語編集でぽんぽんカートで使用されている文言を変更できます。

image.png

変更可能なテキスト

  • カートに追加
  • 売り切れ
    image.png
  • カート
  • 支払いへ進む
    image.png

バリエーションピッカーの事前設定

ぽんぽんカートで「カラーセレクター」や「イメージセレクター」を使用する際の事前設定を解説していきます。

事前準備では、バリエーションのメタフィールドに色と画像の 2 つのメタフィールドを登録していきます。

メタフィールドを使用すると、商品名や説明などのデフォルトで設定できる項目とは別に、さまざまな項目を追加することができます。
ぽんぽんカートでは、メタフィールドを使用することで、セクション内でカラーピッカーを実装することができます。

設定の流れ

設定の流れは下記の通りです。

  1. メタフィールドの追加
  2. ファイルにイメージセレクターで表示する画像を追加
  3. 商品管理ページでメタフィールドに色、画像リンクを追加
  4. ぽんぽんカートセクション内でカラーピッカーを選択

上記の流れに沿って事前準備をしていきます。

メタフィールドの追加

まず、メタフィールドから追加していきます。

メタフィールド登録

まず、ストア管理画面を開きます。
ストア管理画面左下の、「設定」をクリックします。
ScreenClip.png

サイドバーに「メタフィールド」がありますので、そちらをクリックします。
その後、「バリエーション」の項目をクリックします。
ScreenClip.png

右上の「定義を追加する」ボタン又は、真ん中の「定義を追加」ボタンを押します。

ScreenClip.png

名前ネームスペース説明コンテンツタイプを選択するを入力します。

カラーセレクターの場合
名前:任意の値
ネームスペース:my_fields._ponpon_color_picker_color
説明:任意の値
コンテンツタイプ:色

イメージセレクターの場合
名前:任意の値
ネームスペース:my_fields._ponpon_color_picker_image
説明:任意の値
コンテンツタイプ:URL

ScreenClip.png

入力したら、保存するを押して登録します。

ScreenClip.png

カラーセレクターかイメージセレクターどちらかを登録したら、もう一方のメタフィールドも同様に作成します。

カラーセレクターの場合
名前:任意の値
ネームスペース:my_fields._ponpon_color_picker_color
説明:任意の値
コンテンツタイプ:色

イメージセレクターの場合
名前:任意の値
ネームスペース:my_fields._ponpon_color_picker_image
説明:任意の値
コンテンツタイプ:URL

ScreenClip.png

ScreenClip.png

ファイルに画像を追加

次にファイルに画像を追加していきます。
サイドバーの「ファイル」を選択します。

右上の「ファイルをアップロード」ボタンを押します。
アップロードする画像を選択します。

ScreenClip.png

追加した画像のリンクを保存しておきます。(後でメタフィールドに画像のリンクを貼り付けます。)

リンクは、下記画像の場所をクリックすると保存できます。

ScreenClip.png

商品管理ページでメタフィールドに色、画像のリンクを追加

カラーセレクター、イメージセレクターを使用したい商品のメタフィールドを登録していきます。

Shopify ストア管理画面のサイドバーにある「商品管理」をクリックします。

商品を選択し編集画面に移動します。

ScreenClip.png

商品編集画面のバリエーションの「編集ボタン」を押します。

ScreenClip.png

画面の下の方にある、メタフィールドを入力するフォームがあると思うので、そちらに色と、先程保存した画像のリンクを入力します。

ScreenClip.png

下記のように登録できれば問題ありません。(※画像のリンクは各自の値を入力してください。)
ScreenClip.png

セクション内でカラーピッカーを選択

テーマカスタマイズ画面に移動し、ぽんぽんカートセクションでバリエーションピッカーの値を変更すると設定完了です。

ScreenClip.png

下記の画像のように、表示されると思います。

ScreenClip.png

ScreenClip.png

ScreenClip.png

終わりに

今回は、「コレクションページでカートに追加|リテリア ぽんぽんカート」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/ponpon-cart?locale=ja&from=hp-guide

もし、うまく動かない、設定方法がわからない、さらに機能を追加して欲しい等ありましたら、下記よりお問い合わせいただけますと幸いです。

https://www.re-terior.com/contact-us

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説