こんにちは。中川瞬(@buppan_system)です。
この記事を読むことで、
- Shopifyのカスタマイズについてわかる
- Shopifyの簡単なカスタマイズの方法がわかる
- Shopifyでコード編集を使ったカスタマイズの方法がわかる
- カスタマイズのするときの注意点がわかる
- Shopifyのおすすめカスタマイズがわかる
この記事を書かせて頂いている私は、現在、輸出・輸入・国内の転売のノウハウをお伝えしています。
時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。
それでは、Shopifyのカスタマイズについて解説をしていきます。
目次
Shopifyのカスタマイズ
拡大を続けるEC市場でも、他を寄せ付けない躍進を続けているECサイト構築プラットフォームがShopifyです。
Shopifyは、個人でも小規模でも簡単にネットショップを開設できるサービス。
インターネットでの手続きだけでネットショップを構築できるプラットフォームです。
今までは、オリジナリティがあるネットショップを開設しようとすれば、デザインやプログラミングの知識が必要でした。
ネットショップを開設するために外部に依頼したり、専門部署を用意しなければならないとなると費用も手間もかかります。
しかし、Shopifyのカスタマイズ機能であれば知識なしでもブランドに合ったネットショップを開設可能です。
Shopifyのカスタマイズについて紹介します。
Shopify カスタマイズでできること
ECサイト構築プラットフォームにはいろいろありますが、Shopifyは設計がシンプルな点が大きな特徴です。
デザインとコンテンツが明確に分かれているため、好みのテーマを選んでカスタマイズ可能です。
具体的には、ロゴ画像の設定や見出しや本文のフォント、フォントサイズをカスタマイズできます。
背景やテキスト、ボタンも色設定できるほか、要素の表示、非表示も管理画面から変えられます。
基本的には、欲しい機能とデザインを見つけて利用すれば、簡単にブランドに合わせたストアを開設可能です。
カスタマイズはお客様に何を伝えたいのか、どのように行動してほしいのかを考えると良いでしょう。
Shopifyカスタマイズ初級編
Shopifyは、コードの編集といった専門知識がなくてもさまざまなカスタマイズが可能です。
初級編として、知識がない人でもどのようなカスタマイズができるのか紹介します。
Shopifyで、カスタマイズのために用意されているテーマは100種類以上あります。
デフォルトは「Debut（デビュー）」というテーマが設定されていますが、ほかにも自社のストアに合うテーマがないか探してみてください。
テーマ
テーマを選ぶときは、まず「テーマライブラリー」から「無料のテーマ」か「Shopifyテーマストア」のどちらかを選びます。
「Shopifyテーマストア」では無料だけでなく有料のテーマも販売されています。
求める機能やデザインに合わせて選んでみましょう。
テーマを選択したら、テーマの「スタイル」を決めてください。
「テーマライブラリーに追加する」をクリックすると「テーマライブラリー」にテーマが追加されます。
同じテーマであってもスタイルによって、お客様が受け取る印象が大きく変わります。
テーマを選んでから下記のさまざまな項目をカスタマイズしてください。
ロゴ画像
自社のイメージを印象付けたい、ストアの世界観を伝えたいという場合には必ずロゴ画像を使うようにしてください。
ロゴ画像は、管理画面の「設定/チェックアウト」を選択してから、「チェックアウトのカスタマイズ」をクリックします。
「テーマエディタ」を開けるようになるので、「ロゴ」セクションで「画像をアップロード」しましょう。
すでにストアがライブラリーにアップロードした画像があれば、その画像を選択します。
このときにロゴの位置とサイズを変更してください。
保存をクリックすれば完成です。
テキストの色・フォント・サイズ
テキストの色やフォント、サイズといった内容は「テーマエディタ」で変更できます。
管理画面から「オンラインストア」を選択して「テーマ」をクリック、「カスタマイズ」を選択します。
「テーマエディタ」を起動して、その中の「セクション」の「テーマ設定」に進みましょう。
「テーマ設定」ではテキストの色やフォント、サイズだけでなく、ウェブサイトのレイアウトも変更が可能です。
テキストの色やサイズはそこまで気にしない事業者もいるかもしれません。
しかし、これらの項目はECサイト全体の雰囲気が変わる重要なポイントです。
自社のブランディングや、表現したい世界観に合わせて適切なものをそれぞれ選択してください。
項目のアレンジ
Shopifyは高いカスタマイズ性が特徴で、もともと多くの項目が用意されています。
そのため、販売形態やストアで扱う商品によって不必要な項目が出てくるかもしれません。
必要ない項目がある場合にも、Shopifyでは項目の削除や追加、さらに編集ができるようになっています。
追加したい場合には管理画面の「メニュー」をクリックしてください。
「メニュー項目の追加」をクリックすると、タイトル名が変更できます。
メニュー名の編集したいときは、同様に管理画面の「メニュー」ページをクリックして、編集するメニューのタイトルをクリックします。
「名前」フィールドでテキストを変更しましょう。
不必要なものを削除するときは、「削除」をクリックしてください。
自動コレクション
ストアを運営するときにあると便利な機能が、ストアで在庫切れになった商品を自動的に非表示にする機能です。
これは「自動コレクション」という機能を使います。
「自動コレクション」は選択条件に一致した商品を自動で読み込みする機能です。
まずは管理画面から「在庫追跡を有効にする」を選択してください。
それから「自動コレクション条件」を変更して、条件を追加します。
追加するのが以下の2つです
・「商品の条件合致」で、すべての条件を選択
・「在庫個数」で、より大きいを選択して0を入力
上記の設定によって在庫切れ商品が発生したときには、在庫個数が0なので自動的に非表示になります。
細かい設定ではありますが、お客様が検索したとき、欲しいものを探しているときに商品情報を見やすいストアにできるように導入してみてください。
Shopifyカスタマイズ上級編
Shopifyは、知識がない人でも簡単にストアに合わせたカスタマイズが可能です。
しかし、より幅広い、細かいカスタマイズがしたいと考える場合には、テーマコードをカスタマイズする方法があります。
どのような方法なのか紹介します。
CSS、HTML、Liquidを使ったコード編集
Shopifyは、テーマコードを編集してストアの細かい編集を加えられます。
テーマを構成しているほとんどのファイルには、Shopifyのテンプレート言語であるLiquidが含まれています。
またテーマファイルには、HTML、CSS、JavaScriptも含まれているのでコード編集について基本的な知識がある人はチャレンジしてみましょう。
基本的なカスタマイズであればテーマの開発者からサポートを受けられます。
テーマを大幅に変更する場合は、テーマのサポートに関する追加リソースのリストからサポートがどこまで受けられるのか確認しておいてください。
コード編集の注意点
「テーマコード」の編集を使うことで、「テーマエディタ」を使ってもカスタマイズできない箇所も編集ができます。
しかし、「テーマエディタ」を使った編集にはプログラミング言語の基本的な知識が不可欠です。
Shopifyのテンプレート言語であるLiquidの知識はもちろんのこと、文字やテキストボックス、サイト内リンクなどWebページを作るうえでの必要なボタンなどの部品を配置するHTMLは欠かせません。
またウェブデザインを変更したり、文字の色を変更するためのCSSの知識も必要です。
プログラミング言語の知識がない状態で編集すると、デザインが崩れたり、サイトの構造自体に影響を及ぼしてしまいます。
知識に自信がない場合には、Webデザインやプログラミングの専門家に依頼するようにしてください。
コード編集時にはバックアップを取ろう
テーマコードの編集は、サイトの構造自体に影響を与えます。
テーマコードを編集する場合には、サイト全体が崩れたときに元通りにできるようにバックアップを取っておいてください。
バックアップは「テーマライブラリー」の「アクション」タブ、「複製」をクリックすれば実施可能です。
もしも編集途中に変更した場合は、変更をせずに破棄すると途中から再スタートもできるので万が一のために覚えておいてください。
Shopifyのコードを編集しよう
コードを編集するときには管理画面の「オンラインストア」から「テーマ」に進みます。
「アクション」タブをクリックすると、「コード編集」という項目があるので「コードエディタ」というファイルにて、コード編集をおこないましょう。
「コードエディタ」では、左側にテーマファイルの詳細のディレクトリ、右サイドにファイルを編集するためのファイル編集スペースが表示されます。
また右下のボタンで「ライト」モードと「ダーク」モードの画面を切り替えられます。
何から手を付けていい変わらない人におすすめShopifyカスタマイズ
Shopifyのストアはデフォルトのものをそのまま使っても十分にクオリティが高いストアを開設可能です。
しかし、少しだけでもアレンジすると自社の雰囲気や世界観、顧客に伝えたいテーマがわかりやすくなります。
この項目では、どこからカスタマイズすればいいのかわからない人におすすめのカスタマイズポイントを紹介します。
商品情報
ストアを構成する重要なパーツのひとつが商品情報です。
お客様が商品画像から受け取る情報は多いため、ストアは商品画像を通じて、商品のクオリティや使用シーンのイメージ等と伝えられます。
もしも商品画像を最低限の商品だけの画像にしている場合には、実際に使っている写真や動画も追加してみてください。
商品だけの状態よりも、よりわかりやすく具体的に商品を使っている自分をイメージしやすくなります。
購入ボタン
購入ボタンのカスタマイズも、購買率に大きく影響します。
たとえばボタンの色や配置されている場所、表示される文言やサイズをアレンジしてみましょう。
購入ボタンが見つからない、わかりにくいと、購入したいと感じた気持ちも減退してしまいます。
サイトのテーマやデザインに合わせてどのようなボタンが適しているのか、検討してみてください。
メタタイトルとメタディスクリプション
メタタイトル・メタディスクリプションは、検索エンジンで検索結果として表示されるタイトルと説明文です。
あまりストアや商品の説明文に手間をかけていないストアも少なくないでしょう。
しかし、お客様の中には検索エンジンでの検索結果からストアや商品にたどり着くケースもたくさんあります。
商品名や説明はできるだけ商品の魅力や使用シーンを伝えるためにも設定することをおすすめします。
何万点も商品があるような場合は、一つ一つ設定するのは大変です。
手間も時間もかかってしまうので、テンプレート等も活用すると良いでしょう。
トラストマーク
トラストマークは、サイトの安全性や商品の信頼性を証明するマークです。
お客様の中には、ECサイトでのお買い物に不安がある人もいるかもしれません。
お客様が安心して買い物できるようにするためには、セキュリティや安全性の証明が必須です。
たとえば、個人情報保護ポリシーに準拠していることを示すPマーク、セキュリティ対策証明のマークといったマークも表示することでお客様が利用しやすくなります。
対応している支払い方法のロゴなど（Amazonペイなど）を見せる方法もあります。
お客様に安心を与えることで、購買につながりやすくなるでしょう。
クロスセル
クロスセルとは、お客様が購入しようとしている商品と別の商品を提案して、購入を検討してもらうことを言います。
また、関連商品を表示してまとめ買いを促すこともできるでしょう。
Shopifyの「Shop The Look」アプリを使えば、簡単にクロスセルの仕組みを導入できます。
より多くの商品を見て欲しい、購入単価を上げたいという場合には有効な施策です。
レビュー機能
商品を購入するときに口コミやレビューを参考にするお客様は多いでしょう。
お店からのプロモーションよりも、実際に購入した人の生の声を参考にする人も少なくありません。
商品のレビューができる機能を用意しておくことで、商品への購買意欲を高めることが可能です。
「Product Reviews」は商品レビューを追加できるアプリです。
さらにShopifyの管理画面から「アプリ管理」をクリックすれば、レビューやレビューフォームをカスタマイズできます。
無料で使えるので試してみてください。
お問い合わせページ
Shopifyのデフォルトのお問い合わせフォームには「名前」「メールアドレス」「電話番号」「メッセージ」が入っています。
必要最低限の項目はすでにありますが、お客様の利便性やストア運営の効率性の面ではカスタマイズも検討してください。
お客様にどのような行動をとってほしいのか、ストアの魅力はどこにあるのかShopifyのカスタマイズを使って伝えてみましょう。
たとえば、自動返信機能やお問い合わせ完了画面を用意するだけでも格段に使いやすくなるはずです。
Shopifyカスタマイズを活用すればオーダーメイドのようなストアも自分で作成できる
ストアに来店したお客様の多くは、ファーストビューでそのストアに滞在するか、離脱するかを決めます。
ストアのデザインや構成にこだわるということは、実店舗のインテリアや掃除と同じで、お客様がストアにいること自体を楽しむために欠かせません。
まずは手軽な部分からカスタマイズにチャレンジしてみましょう。
物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、下の記事ぜひ読んでください。
