[Shopify]購入率が上がった商品ページのカスタマイズ

Shopify商品ページのテンプレートカスタマイズ方法

こんにちは。2021年4月からShopifyでデジタル商品の販売を開始しました!Shopifyは管理画面は結構ややこしいですが、慣れてきたら簡単♪テーマもカスタマイズし易いです。

そこで、カスタマイズして今日は購入率がアップしたお話です。HTMLなどが分からなくてもカスタマイズできる方法をご紹介しています

Shopifyの無料テンプレートをカスタマイズ

ただ、無料テンプレートを使っているのですが、どのテンプレートもスマホ版を使うと商品ページに購入ボタンがトップに表示されているだけで、商品説明を読み進めて、購入したいと思っても、上までスクロールする必要があります。

これは少しユーザーにとっては面倒くさいだろうな。と思い、フッターにカート追加ボタンを固定してスクロールしても追従するようなレイアウトに変更してみました。

Shopify商品ページカスタマイズ

これでユーザーがカートに追加しやすくなったのか、購入率がアップしました

Shopify 商品ページカスタマイズ方法

では、設置するにはどうすれば良いのでしょう?

これはコードを編集する必要があります!

えっ!?プログラミングなんてできない!今更、1からプログラミング勉強する気力ないよ。。。

心配ありません。

コピペで挿入できるように商品ページをコピペするだけでカスタマイズできるパーツテンプレートをご用意しました!こちらで紹介しています。

▼Debut

https://note.com/tech_malin/n/ne23c05cd4989

▼Supply

https://note.com/tech_malin/n/n7cd2459424d8

今のところDebutとSupplyのみですが、今後更新しましたらこちらでもご紹介させていただきますね。

商品ページカスタマイズ用コピペコード設置方法

こちらのNoteは私が掲載している記事です。

いきなり購入はご遠慮していただきたいと思いっています。今、ありがたいことにご購入いただける方が多く、全て対応させていただくのは難しいため、サポートや返金に対応しておりません。

そのため、Noteに記載している手順で設定を進めていただき、サンプルコードを表示できる人のみご利用していただきたい。

まとめ

この機能設置で、少しでもユーザーのストレスを減らせられたら良いなあと思います。

お客さんになった気持ちで、どうすればユーザーフレンドリーなレイアウトにできるのだろう?と、常に考えてこれからもカスタマイズテンプレート作成していきます。

私はこのスキルを身につけて不労所得を得ています

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

HTML/CSSだけで自動収益化 1万円達成

関連記事

Progate(プロゲート)完了したら何したらいい?

Shopifyで複数モーダルを作る方法

[Shopifyアプリ]レビューアプリJudge.meの使い方1

Shopify CLI試してみた

[Shopify]請求書・納品書などの明細書を作成する方法(テンプレート情報有)

[Shopify]Appアンインストール時のワナ