【Shopify】サイトの買い物カゴを必ず通る「購入ボタン」をショップ内に設置する方法
ナカジ(@cp_nakajun)です。
shopifyでECサイトを構築中に出たニーズ。
- トップページに特定商品の購入ボタンをつける
- 登録した商品情報でなくトップページに適した情報・デザイン
- 必ず買い物カゴを通る(表示する)
という条件をみたすニーズがありました。
shopifyには「Buy Button」という機能がありますが
今回のニーズは満たせませんでした。
今回の記事は
このニーズを満たす方法
- 「Buy Button」ではなかった理由
- 買い物カゴを通す必要がある理由
について書こうと思います。
実は僕の知識不足で
テーマの選択やアプリの導入で解決する方法があるかもしれませんので参考までに
なぜ必ず買い物カゴを通す必要があるか
最初に「買い物カゴを通す必要がある理由」について
コレが実は今回のボトルネックでその理由はというと
「配達時間の指定」が出来ることを必ず購入者に見せるには買い物カゴへのページ遷移が必須だったからです。
どういうことか
「配達時間の指定」を出来るようにするアプリの導入は決まってました。
ただ、これを見せることが出来るのが「買い物カゴ」のページです。
サービスを提供するからには購入導線によって差があるのは問題になります。
その理由でCVRに影響はあるかもしれませんが「1-click」で購入する導線も解除しました。
そこで最初は当たり前のように「Buy Button」での実現を考えました。
Buy Buttonではなぜダメか？
「Buy Button」は例えばWordPressなどの外部サイトに購入ボタンをつける機能です。
なので、そのまま決済方法や配送先の入力に遷移します。
ショップ本体の買い物カゴを通らず別導線となったので
せっかくの「配達時間の指定」を購入者に伝えることができなかったのです。
テーマの機能で解決できない？
そもそも、この時間指定の為に「必ず買い物カゴを通す」
そして、わかり易い場所にレイアウトできることを条件にテーマを選びました。
選んだテーマは
「Capital」です。
このテーマはトップページに特定商品を購入ボタン付きで表示することはできるのでですが「商品に登録した情報と同じ内容」なのでトップページで見せる内容としては野暮ったい感じです。
トップページは「顔」になるのでデザインのフレキシビリティーは欲しいところにです。
なので、必須なのは結果「ボタン」だけでした。
以上のことから、先に挙げた方法を採用しました。
ご参考までに！
カートに入れるボタンのソース
参照したサイトは以下です。
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="[product ID" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
shopify内に上記ソースを書いて使います。
これで解決しました。
