Shopifyでコレクションページで直接カートに追加できるアプリ（1クリックでカートに追加出来るアプリ）を解説
Shopifyでコレクションページで直接カートに追加できるアプリ（1クリックでカートに追加出来るアプリ）を解説
Shopifyのストアでコレクションページにある商品を購入する場合、商品ページに移動してから「カートに追加する」ボタンを押して、商品をカートに追加するという手順を踏むことになります。
今回の記事は、以下の記事を参考にしています。
【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説
1. コレクションページで商品を選ぶ
2. 商品ページに移動してから「カートに追加する」ボタンをクリックする
3. カートに追加される
トップページにある商品を選択した場合も同様に、「商品ページに移動してからカートに追加するボタンを押して、商品をカートに追加する」という手順を踏みます。
このように、コレクションページ・トップページとも、デフォルトではカートに追加するまでにいったん商品ページに移動する手間がかかります。ユーザー側から見ればやや面倒ですよね。
この手間を解消し、コレクションページから直接、商品をカートに追加できるようにすれば、かご落ちが減る・一度に購入する商品数が増えるなどコンバージョン率アップも見込めることでしょう。
そこで今回は、コレクションページやトップページで直接カートに商品を追加する方法について解説していきたいと思います。
コレクションページやトップページで直接カートに商品を追加する方法
コレクションページやトップページで直接カートに商品を追加する方法には以下の2種類があります。
- コーディングでカート追加ボタンを設置する
- アプリを導入する
コーディングで構築するにはLiquidの知識が必要になります。知識ゼロの状態からでは、ややハードルが高いと言えるでしょう。
一方、アプリを導入する場合、コーディングの知識は不要です。ノーコードで操作できるため、誰もが簡単に必要な機能を導入できます。
今回は、後者の「アプリを導入する」方法について詳しく解説していきたいと思います。
使用するアプリは以下の通りです。
このアプリには以下のような特徴があります。
- ノーコードで使える
- コレクションページで直接、商品をカートに追加できる
- カートの種類や商品表示数、列数、言語、テキストなど柔軟なカスタマイズが可能
- Online Store 2.0に完全対応しており、既存のテーマやアプリとの干渉の心配がない
月額料金は7.99ドルで、現時点では7日間の無料体験があります。
コレクションページから1クリックでカートに追加出来るアプリのインストール方法
アプリのインストール方法や具体的なカスタマイズ方法について見ていきましょう。
ストアの管理画面でアプリをクリックし、アプリと販売チャネルの設定をクリックします。
ストアをカスタマイズをクリックします。
検索ボックスにコレクションページから1クリックでカートに追加出来るアプリと入力してEnterキーを押します。
該当のアプリをクリックします。ここでは最上段の左側に表示されています。
アプリを追加するをクリックし、アプリをインストールをクリックします。
ここまででアプリのインストールは完了です。
次にアプリの設定をしていきます。テーマに反映の項目で、アプリをインストールするテーマを選択し、有効化をクリックしましょう。
ここではStudio（公開中のテーマ）を選択しています。
アプリを有効化しましたのポップアップがでれば完了です。
次に、有効化の隣にあるプレビューをクリックしましょう。
ストアが表示されるので、事前に作成しておいたコレクションページを選択します。
ここでは売れ筋ランキングを選択していきます。
コレクションページが表示され、画面左側の項目にPonPonCart Collectionのアプリが追加されているのが確認できます。
試しに商品の下にあるカートに追加ボタンをクリックすると、以下のように直接カートに商品が追加されるようになっているのがわかります。
アプリのカスタマイズ方法
まずストアのコレクションページを表示して、それぞれカスタマイズしていきましょう。
カートの種類を変更
このアプリはカートの種類をドロワーカートとスティッキーカートの2種類から選べます。
デフォルトではドロワーカートになっています。
ドロワーカートは、以下のように商品の下にあるカートに追加ボタンをクリックするとカートがでてくる仕組みです。
画面右側の「ドロワーカート」のチェックボックスを空欄にするとスティッキーカートになります。
スティッキーカートは、以下のように常にカートが表示されており、画面をスクロールしても常時カートが表示され続ける仕組みです。
トップページで商品を直接カートに追加できるようにする
トップページにアプリを適用する場合は、まずトップページを下の方までスクロールします。
画面右側にあるセクションを追加をクリックし、でてくる画面を下の方にスクロールすると、PonPonCart Sectionのアプリがでてくるのでクリックします。
以下のようにアプリが追加されます。
ここで画面右側に移動し、コレクションを選択をクリックします。表示したいコレクションを選んだら選択をクリックしましょう。ここでは売れ筋ランキングを選択しています。
以下のように、トップページにコレクションが追加され、商品を直接カートに入れられるようになりました。
その他の機能
その他の詳細設定について簡単に解説します。
これらの詳細設定は、すべて画面右側の項目で実施できます。
商品タグの表示・非表示
商品タグ（「#グラス」「#マグカップ」など）を商品の下に表示させ、商品タグをクリックすると同じカテゴリーの商品一覧を表示できる機能です。
商品タグの表示・非表示は、画面右側のチェックボックスで選べます。
バリエーションピッカーの種類を選択
バリエーションピッカーは、例えば色違いの商品がある場合、以下のように商品を色・画像・ドロップダウンで選択できるようにする機能です。
1. 色の表示
2. 画像の表示
3. ドロップダウンの表示
バリエーションピッカーについては、以下のようにピッカーの種類のほか、形や色、表示数を選択可能です。
パソコン・スマホの表示
表示する列数や余白、フォントの大きさなどをパソコン・スマホのそれぞれで設定できます。
テキストの編集
以下の項目について、表示するテキストを編集できます。
まとめ
ここまでで、コレクションページやトップページで直接カートに商品を追加できるアプリについての解説は終わりです。
使用したアプリは以下の通りです。
コレクションページから1クリックでカートに追加出来るアプリ
ここまでお読みいただき、ありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
