Shopifyでコレクションページで直接カートに追加できるアプリ(1クリックでカートに追加出来るアプリ)を解説

Shopifyのストアでコレクションページにある商品を購入する場合、商品ページに移動してから「カートに追加する」ボタンを押して、商品をカートに追加するという手順を踏むことになります。

今回の記事は、以下の記事を参考にしています。

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

1. コレクションページで商品を選ぶ
image.png

2. 商品ページに移動してから「カートに追加する」ボタンをクリックする
image.png

3. カートに追加される
image.png

トップページにある商品を選択した場合も同様に、「商品ページに移動してからカートに追加するボタンを押して、商品をカートに追加する」という手順を踏みます。

このように、コレクションページ・トップページとも、デフォルトではカートに追加するまでにいったん商品ページに移動する手間がかかります。ユーザー側から見ればやや面倒ですよね。

この手間を解消し、コレクションページから直接、商品をカートに追加できるようにすれば、かご落ちが減る・一度に購入する商品数が増えるなどコンバージョン率アップも見込めることでしょう。

そこで今回は、コレクションページやトップページで直接カートに商品を追加する方法について解説していきたいと思います。

コレクションページやトップページで直接カートに商品を追加する方法

コレクションページやトップページで直接カートに商品を追加する方法には以下の2種類があります。

  • コーディングでカート追加ボタンを設置する
  • アプリを導入する

コーディングで構築するにはLiquidの知識が必要になります。知識ゼロの状態からでは、ややハードルが高いと言えるでしょう。

一方、アプリを導入する場合、コーディングの知識は不要です。ノーコードで操作できるため、誰もが簡単に必要な機能を導入できます。

今回は、後者の「アプリを導入する」方法について詳しく解説していきたいと思います。

使用するアプリは以下の通りです。

コレクションページから1クリックでカートに追加出来るアプリ

このアプリには以下のような特徴があります。

  • ノーコードで使える
  • コレクションページで直接、商品をカートに追加できる
  • カートの種類や商品表示数、列数、言語、テキストなど柔軟なカスタマイズが可能
  • Online Store 2.0に完全対応しており、既存のテーマやアプリとの干渉の心配がない

月額料金は7.99ドルで、現時点では7日間の無料体験があります。

コレクションページから1クリックでカートに追加出来るアプリのインストール方法

アプリのインストール方法や具体的なカスタマイズ方法について見ていきましょう。

ストアの管理画面でアプリをクリックし、アプリと販売チャネルの設定をクリックします。
image.png

ストアをカスタマイズをクリックします。
image.png

検索ボックスにコレクションページから1クリックでカートに追加出来るアプリと入力してEnterキーを押します。
image.png

該当のアプリをクリックします。ここでは最上段の左側に表示されています。
image.png

アプリを追加するをクリックし、アプリをインストールをクリックします。
image.png
image.png

ここまででアプリのインストールは完了です。

次にアプリの設定をしていきます。テーマに反映の項目で、アプリをインストールするテーマを選択し、有効化をクリックしましょう。

ここではStudio(公開中のテーマ)を選択しています。
image.png

アプリを有効化しましたのポップアップがでれば完了です。
image.png

次に、有効化の隣にあるプレビューをクリックしましょう。
image.png

ストアが表示されるので、事前に作成しておいたコレクションページを選択します。

ここでは売れ筋ランキングを選択していきます。
image.png
image.png

コレクションページが表示され、画面左側の項目にPonPonCart Collectionのアプリが追加されているのが確認できます。
image.png

試しに商品の下にあるカートに追加ボタンをクリックすると、以下のように直接カートに商品が追加されるようになっているのがわかります。
image.png

アプリのカスタマイズ方法

まずストアのコレクションページを表示して、それぞれカスタマイズしていきましょう。
image.png

カートの種類を変更

このアプリはカートの種類をドロワーカートスティッキーカートの2種類から選べます。

デフォルトではドロワーカートになっています。
image.png

ドロワーカートは、以下のように商品の下にあるカートに追加ボタンをクリックするとカートがでてくる仕組みです。
image.png

画面右側の「ドロワーカート」のチェックボックスを空欄にするとスティッキーカートになります。
image.png

スティッキーカートは、以下のように常にカートが表示されており、画面をスクロールしても常時カートが表示され続ける仕組みです。
image.png
image.png

トップページで商品を直接カートに追加できるようにする

トップページにアプリを適用する場合は、まずトップページを下の方までスクロールします。
image.png

画面右側にあるセクションを追加をクリックし、でてくる画面を下の方にスクロールすると、PonPonCart Sectionのアプリがでてくるのでクリックします。
image.png
image.png
image.png

以下のようにアプリが追加されます。
image.png

ここで画面右側に移動し、コレクションを選択をクリックします。表示したいコレクションを選んだら選択をクリックしましょう。ここでは売れ筋ランキングを選択しています。
image.png
image.png

以下のように、トップページにコレクションが追加され、商品を直接カートに入れられるようになりました。
image.png

その他の機能

その他の詳細設定について簡単に解説します。

これらの詳細設定は、すべて画面右側の項目で実施できます。
image.png

商品タグの表示・非表示

商品タグ(「#グラス」「#マグカップ」など)を商品の下に表示させ、商品タグをクリックすると同じカテゴリーの商品一覧を表示できる機能です。
image.png

商品タグの表示・非表示は、画面右側のチェックボックスで選べます。
image.png

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

バリエーションピッカーは、例えば色違いの商品がある場合、以下のように商品を色・画像・ドロップダウンで選択できるようにする機能です。
image.png

1. 色の表示
image.png

2. 画像の表示
image.png

3. ドロップダウンの表示
image.png

バリエーションピッカーについては、以下のようにピッカーの種類のほか、形や色、表示数を選択可能です。
image.png

パソコン・スマホの表示

表示する列数や余白、フォントの大きさなどをパソコン・スマホのそれぞれで設定できます。

テキストの編集

以下の項目について、表示するテキストを編集できます。
image.png

まとめ

ここまでで、コレクションページやトップページで直接カートに商品を追加できるアプリについての解説は終わりです。

使用したアプリは以下の通りです。
コレクションページから1クリックでカートに追加出来るアプリ

ここまでお読みいただき、ありがとうございました。

おすすめ記事