【Shopifyアプリ解説】どこからでもカートに追加 ⁉ ~ リテリア ぽんぽんカートとは ~

# こんな人・ストアにおすすめ

Shopifyでオンラインストアを運営している方の中には、トップページやコレクションページから商品をカートに追加できる機能がほしい方も多いと思います。しかし、機能を実装しようとすると、自らコーディングしたり、他の会社に依頼する必要があります。

- トップページやコレクションページから商品を直接カートに追加したい。
- 商品タグの絞り込みができるコレクションページを作りたい。

という悩みを持つ方も多いのではないでしょうか。

この記事では、Shopifyの運営・構築の業務を行っている Shopfiy Expert の株式会社UnReactが、「カートに追加ボタン」をストアのページに追加できる「どこでもカートに追加｜リテリア ぽんぽんカート」というShopifyアプリを紹介していきます。

# どこでもカートに追加｜リテリア ぽんぽんカートとは？

https://apps.shopify.com/app-store-example?locale=ja&from=qiita

「どこでもカートに追加｜リテリア ぽんぽんカート」とは、コレクションページやトップページから商品をカートに追加できるようになるアプリです。
商品を追加した後、カートページへは遷移せずに他の商品をカートに追加することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/ff33fe2c-2ba8-07b8-b11c-ddb0c5410cc9.png)

## 導入メリット

どこでもカートに追加｜リテリア ぽんぽんカートを使うメリットを挙げてみます。

- アプリブロックを追加するだけの簡単設定
- カートの種類を選択可能
- 複数タグでの商品の絞り込み
- 柔軟なカスタマイズ性
- モーダルの表示
- OS2.0テーマで利用可能
- アプリ管理画面・サポートが日本語

このように、どこでもカートに追加｜リテリア ぽんぽんカートでは、カートに追加する機能だけでなくタグの絞り込みやモーダルも実装されており、コレクションページで商品を購入するのに困らない機能を提供してくれています。

## 導入デメリット

- OS2.0の前のテーマでは導入出来ない

どこでもカートに追加｜リテリア ぽんぽんカートは、OS2.0に対応したテーマでのみ使用することが可能です。

## 料金プラン
料金プランは1つで月額7.99ドルです。アプリの中では少し高いです。しかし、トップページやコレクションページで商品を購入できることで、コンバージョン率をあげることができます。
現在、7日間の無料トライアルがあり、開発ストアでは無料でアプリをお試しできます。


無料トライアルは[こちら](https://apps.shopify.com/app-store-example?locale=ja&from=qiita)から

使い方は次のアプリインストールと設定で解説しています。

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

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

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

セクションを各ページに追加する方法については、「ぽんぽんカートの設定方法」に記載しております。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/17b97791-73f8-5282-3973-ff19bca97181.png)

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

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

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

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

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

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

【商品タグをクリックする前】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/630446f9-e70c-5bdd-9a29-66b13c74784c.png)

【商品タグをクリックした後】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/e6cc1606-e6ea-5aab-b413-ab1a141883b2.png)

### モーダル機能

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

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

モーダル内には、商品名、商品価格、商品説明、商品画像、数量ピッカー、カートに追加ボダンが実装されています。
カートに追加ボタンが実装されているため、モーダルから直接、商品をカートに追加することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/7a080cdc-2eb9-33f3-cab0-9955bf9144cc.png)


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

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

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

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

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

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


【カラーセレクター】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/6da8f78d-327c-952e-ce37-4d498b1db219.png)

【イメージセレクター】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/4c143d1e-7775-6664-4a6b-602bf3f0b840.png)

【オプションセレクター】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/02fcc8c4-3f49-dae1-3aed-739a8956924c.png)

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


# アプリの設定方法

アプリストアから「どこでもカートに追加｜リテリア ぽんぽんカート」を検索してストアにアプリを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/3aa4c90d-95b3-0291-5eea-65b726e00cf5.png)

アプリ管理画面に従い、ストアにアプリブロックを導入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/ff56b160-5716-399a-5ba8-c9380ad8a377.png)

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

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

### カートの種類を変更（PonPonCart Collection）

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

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

#### Stickyカート

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/eca89d82-e29a-a8f3-539e-0d8903a70733.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/ffad8008-a417-cb5b-088e-0ac2b9ffb414.png)

**スクロール時**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/b8dfe566-91e4-0570-c02e-15bcb7a218e3.png)


#### Drawerカート

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/31d7f80c-922c-1c66-0513-1e58cf9077ed.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/8df3b1af-dfd1-834b-58c2-abe08bf23821.png)

**カートに追加ボタンを押したとき**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/78399ca6-2c82-2709-ef49-ce94d3ccbd08.png)

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

下記フォームよりコレクションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/609611aa-30c0-2f71-b10e-52fafce22bec.png)

**コレクション選択時**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/13cd254e-e57c-e5ae-a8bf-ccdb5970914c.png)

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

**商品タグ表示**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/9be98451-bbed-8448-599a-2d5eccaa4c6d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/742e9388-fa2a-7b1d-be71-bf03cacbe2e2.png)

**商品タグ非表示**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/90e486a1-295e-de97-655b-55989b267665.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/a50a2bef-74bb-3c07-0200-09589d984215.png)

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

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

**カラーセレクター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/bc8fb6fe-2f11-71e7-6475-a873b1f71007.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/6da8f78d-327c-952e-ce37-4d498b1db219.png)

**イメージセレクター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/51770c05-ea31-05b7-5a8e-d6ac934c86f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/4c143d1e-7775-6664-4a6b-602bf3f0b840.png)

**オプションセレクター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/98d4a431-ba8b-fc34-8679-6546dbcb16e7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/02fcc8c4-3f49-dae1-3aed-739a8956924c.png)

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

**カラーセレクター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/2e9e3a8a-a7bc-0781-7b0c-63eafbe6daf9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/bdd164f6-c6c2-e8c5-0239-007cbd979e2a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/9d5b1277-082e-f2c5-5ad8-6dcc439ed376.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/5c820652-cc8d-70e7-d31b-9600a2747591.png)

**イメージセレクター**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/2e9e3a8a-a7bc-0781-7b0c-63eafbe6daf9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/8fe37a6e-80d5-fc7a-7976-bbab7af42032.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/9d5b1277-082e-f2c5-5ad8-6dcc439ed376.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/d5a2630c-d338-adfb-01db-aa107a712168.png)


### 商品の表示数を変更
『表示数 商品/ページ』で1ページあたりの商品数を設定することができます。
表示数は、1~50個まで選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/3df62dbc-c3c2-f42f-2c95-3e4f86da69ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/a7a5c5dd-2c87-d816-586a-24221aecb721.png)

1ページあたりの表示数よりもコレクションの商品数が多い場合は下記画像のようにページネーションされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/15e3e25c-43e1-e385-d397-230eb11947b2.png)

### メインカラーを変更
『メイン色』でセクションのメインカラーを設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/a527b522-89bd-8fa6-3945-01761cec0923.png)

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

**タグボタン**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/752a1d06-eca9-3fa7-e052-a52c9b615fdc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/f38c4a72-2992-ab1e-c352-9e172903ac6d.png)

**チェックアウトボタン**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/55f26ffa-0df6-5f22-5e0e-dca9c299b8d6.png)


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

**1列**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/68be1f6e-9264-c499-09a8-60b437956572.png)

**5列**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/389dd06c-52d1-0597-8c31-8796fb7f42c3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/28051411-118b-933b-8871-089838028ca3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/31455369-1127-d896-e1dd-e053beec6aad.png)

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

上下余白は、0-30 px、フォントサイズは、1-100 pxの範囲で選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/254b44f6-f277-b9d5-b688-5fae237b90db.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/7c6e22b5-ab03-7af3-d098-941d60991ee2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/02314fb7-d76c-915c-9dbf-16fb80413396.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/76107d68-4bc1-a8db-5e3c-cf8c420904e0.png)

#### 変更可能なテキスト

+ カートに追加
+ 売り切れ
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/d84cd249-e722-0f64-d6ca-9bc0234723af.png)
+ カート
+ 支払いへ進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/563f47a3-e876-1788-f8a4-b95533c31346.png)

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

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

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

### 設定の流れ

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

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

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

## メタフィールドの追加

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

### メタフィールド登録
まず、ストア管理画面を開きます。
ストア管理画面左下の、「設定」をクリックします。
![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/bc7cc234-51e4-9fdd-5994-1287717cde94.png)

サイドバーに「メタフィールド」がありますので、そちらをクリックします。
その後、「バリエーション」の項目をクリックします。
![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/0bfe02a8-e9d0-99b0-da14-5d753524cdb9.png)

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/a20d0eb4-b46b-299d-b65f-26034008ab9d.png)

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

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

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


![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/f12333a7-9169-b5b7-bed1-be6d3103eb6c.png)

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/44af9bac-eb7b-93e2-aa49-0dfd69dcfb66.png)

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

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

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/ad60c1c7-734c-a7a3-2669-d226c94fbfff.png)

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/176835b0-1d0c-4434-d528-fbc167e846a5.png)

## ファイルに画像を追加

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

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/f0a0cc7a-dce2-e4f4-d8f9-7e225a20b2c9.png)

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

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/14f77c73-578d-9952-d8b5-335e672279c2.png)


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

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

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

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/c81e564f-dcc9-b0af-b0a1-c36aa9e04337.png)

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/4912fe76-e2fa-f5cb-11f0-0cb7975dacdb.png)

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/dd0c4ea3-fde5-5019-072a-a9973b51a20c.png)

下記のように登録できれば問題ありません。（※画像のリンクは各自の値を入力してください。）
![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/7ac292e8-f88e-5c60-45e2-84b59cb626c0.png)



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

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/c4192a90-5c4b-a6ed-ba9b-420ff9eda0dc.png)

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

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/ec67f678-7000-bd7e-a81d-747edd62f485.png)


![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/7849c0e1-2678-efc8-542e-4e4ae3c38635.png)

![ScreenClip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341000/ff4b562d-ff9b-afaa-7059-4da2b5e0d470.png)

# まとめ
今回は、どこでもカートに追加｜リテリア ぽんぽんカートについてまとめてみました。
アプリを導入することで、トップページやコレクションページで商品をカートに追加出来るようになります。
無料トライアルは[こちら](https://apps.shopify.com/app-store-example?locale=ja&from=qiita)から

最後までご覧いただき、ありがとうございました。