Shopifyで制作したECサイトの開発・カスタマイズに困っていませんか？
「自社のECサイトをカスタマイズにはプログラミングスキルが必須」と思っている人も多いのではないでしょうか。
しかし、Shopifyでは、HTMLやCSSなどのコード編集不要でカスタマイズができるため、初心者でも簡単にブランドイメージに合わせたECサイトを作ることができます。
ECサイトは、「かっこいいサイト＝売れる」のではありません。ブランドイメージを出していくことも大切ですが、「見やすさ」を追求していくのも重要です。ユーザーの導線を考え、直感的にわかるサイトは、ユーザーも定着しやすいサイトとなります。
ブランドイメージだけでなく「見やすさ」も意識してカスタマイズするようにしましょう。
DMMチャットブーストではShopifyに関する記事もございますので、ぜひご覧ください。
Shopifyのテーマをカスタマイズする方法は2つ
Shopifyのテーマをカスタマイズする方法①コード編集をせずにデザインの設定や編集をする方法
レイアウトやカラーなどの変更が可能です。複雑なコード編集は必要ないため、テーマカスタマイズ初心者やコード編集が苦手な人におすすめの方法です。
Shopifyのテーマをカスタマイズする方法②コード編集をしてカスタマイズする方法
コード編集をするため、コード編集がない場合より複雑ですが独自のデザインを作ることができます。
Shopifyでは、Liquidという独自言語が使用されており、HTMLの中にコードを直接書くことができます。
【コード編集無し】Shopifyをカスタマイズする6つの手順
Shopifyは、豊富なデザインテーマと自由度の高いカスタマイズができるものとして多くの人から注目されています。
Webサイトに関する知識がなくても「カスタマイズしやすい」「カスタマイズがわかりやすい」ため、初心者でも自社のブランドイメージに合うECサイトを作ることができます。
初心者でも簡単にコード不要でカスタマイズできる項目を見ていきましょう。
動画で分かりやすく解説していますので、動画でShopifyのカスタマイズ方法を知りたい人はご覧ください。
Shopifyをカスタマイズする手順1｜デザインテーマテンプレートを選ぶ
Shopifyでは、ブランドイメージに合うよう様々なデザインテーマを利用することができます。
このテーマとは、自社のECデザインをカスタマイズするテンプレートのことで、ECサイトのカスタマイズをするためには、はじめにこのデザインテーマを選ぶようにします。
デザインテーマは無料・有料の両方が利用でき、その種類は100種類以上取り揃えています。自社のイメージに合うものを選ぶことができるでしょう。
デザインテーマは、Shopifyの管理画面から「オンラインストア」→「テーマ」→「テーマライブラリー」で選択し追加することが可能です。
既存のテーマでブランドイメージに合うものがなければ「Shopifyテーマストア」から無料・有料問わず、多くのテーマを購入することができます。
テーマが決まったら、「テーマエディタ」で細かいカスタマイズをしていきます。
「テーマエディタ」でカスタマイズする際も一部コード不要です。初心者でも簡単にカスタマイズできるため、自社のブランドイメージにより近づけることができるでしょう。
引用：Shopify管理画面
Shopifyをカスタマイズする手順2｜ロゴ画像の設定
Shopifyでは、自社のロゴ画像をECサイトに簡単に入れることができます。ロゴは、自社のブランディング、他社との差別化のために非常に有効です。もし、ロゴがある場合には、必ずECサイトには入れるようにしましょう。
ロゴ画像を入れるときも、「テーマエディタ」から操作を開始します。
「テーマエディタ」の「ヘッダー」→「ロゴ」セクションから、「画像をアップロード」してサイトへ画像を追加します。
すでに、ロゴ画像をライブラリーにアップしていた場合には、「ライブラリーから選択」でもロゴを追加可能です。
ロゴ画像は表示位置だけでなく、サイズも変更できるため、全体のバランスを見ながら調整して設定しましょう。
Shopifyをカスタマイズする手順3｜カラーの変更
Shopifyの「テーマエディタ」では、テキスト・見出し・背景・ヘッダー・フリッターのカラーを変更することができます。
カラーは、ECサイトのイメージを定着させるのにも重要な役割を果たします。自社のイメージカラーがあるなら、そのカラーに合わせるように設定するようにしましょう。
引用：Shopify管理画面
「テーマエディタ」の「セクション」の中の「テーマ設定」→「色」から、カラーを変更することができます。
引用：Shopify管理画面
そのほか、ボタンのカラー・タグのカラーも変更することが可能です。このカラーの変更は、選択するテーマによって変更できるものとできないものがあるため、事前に確認してからテーマを選ぶようにしましょう。
Shopifyをカスタマイズする手順5｜テキストの変更
Shopifyの「テーマエディタ」から、テキストのサイズとフォントなどを変更することができます。テキストのフォント１つを持っても、ECサイトのイメージがガラリと変わります。自社のイメージに合う適切なフォントを選んで選ぶようにしましょう。
引用：Shopify管理画面
テキストの変更は、カラーの変更と同じく「テーマエディタ」の「セクション」の中の「テーマ設定」→「文字体裁」から、設定していきます。
引用：Shopify管理画面
また、写真の位置と一緒にテキストの表示位置などレイアウトもECサイトには非常に重要。ユーザーの導線に沿ってレイアウトも変えていくことで、ユーザーにとっても「見やすい」と評価されるECサイトとなります。
そのレイアウトの変更も「テーマエディタ」→「レイアウト」から行います。操作も手軽に簡単にできるため、初心者でも操作しやすいでしょう。
引用：Shopify管理画面
Shopifyをカスタマイズする手順6｜既存要素の非表示
自社の販売スタイルによっては、Shopifyのデザインテーマのなかに設定されているメニュー項目が不要であるケースもあります。このような既存の要素を表示、非表示を自由にカスタマイズすることが可能です。
表示と非常時のカスタマイズは、「管理画面」の「オンラインストア」→「メニュー」から設定していきます。
引用：Shopify管理画面
「メニューを追加する」からメニューの追加、「フッターメニュー」などメニュー名をクリックすると編集・削除が自由にできるため、ユーザーが見やすいページになるようにカスタマイズしましょう。さらに、メニューの名前の設定から、項目のタイトル名を変更することもできます。
既存要素の表示、非表示、タイトル名の変更も自由にできるため、「テーマエディタ」の編集と合わせてカスタマイズしていくことで、理想とするECサイトも簡単に作り上げることができるでしょう。
Shopifyをコードを使ってカスタマイズする方法
Shopifyではコード不要でも充分自由なカスタマイズが可能ですが、より自社のオリジナリティ溢れるECページにしていくために、コードを用いたカスタマイズも可能です。
コードで編集では、以下の点に注意するようにしましょう。
コード編集時の注意点①｜CSSとHTMLで編集
Shopifyでは、主にCSSとHTMLを用いてコード編集を行っていきます。
また、ShopifyではLiquidという独自のテンプレート言語の知識も必要となるので、初心者は少しハードルが高く感じるかもしれません。
しかしこのCSSとHTML、Liquidを使ってより高度なカスタマイズができるようになるのです。
CSSとHTMLを使って編集する目的として大きく２つあります。
- デザインテーマを微調整する
- デザインテーマを大幅に変更する
既存のデザインテーマはある程度、コード不要でカスタマイズすることができますが、少し微調整をしたいというケースもあるでしょう。
そのときは、「管理画面」の「テーマ」→「アクション」→「コードを編集する」を使って編集をすることができます。
引用：Shopify管理画面
また、既存のテーマを大きく変更したい場合にも、CSSとHTMLでのコード編集が必要となります。
その場合は、まずテーマをローカル環境にダウンロードして「コードエディタ」で編集を行いましょう。
Shopifyのテーマでは、フォルダの構成も決まっており、編集可能なフォルダも限定されています。コード編集が可能なフォルダは以下の通りです。
| Layout | サイト全体に関わるHTMLが格納 |
| Templates | トップページや商品ページなどに関わるLiquidが格納 |
| Sections | ヘッダー、フッターなどのセクションパーツに関わるLiquidが格納 |
| Snippets | Sectionsよりさらに細かいパーツに関わるLiquidが格納 |
| Assets | CSSやJavaScriptが格納 |
| Config | テーマ全体のJavaScriptが格納 |
| Locales | 各言語に関するJavaScriptが格納 |
専門的な知識が必要になるので、CSSとHTMLを使ってオリジナルページを作りたい場合は、外注して専門会社に発注するという方法もあります。
コード編集時の注意点②｜バックアップは必須
「テーマコード」を使ったカスタマイズは、1つのコードを誤ることで全てがスムーズに連動しなくなるという可能性があり、サイト全体が崩れてしまうというリスクも否定できません。
そのため、「テーマコード」で編集を行う場合には、必ずバックアップを取っておくようにしましょう。バックアップを取っておけば、万が一の場合にも、元の状態にすぐに修正することができます。
引用：Shopify管理画面
バックアップは、「テーマ」の「アクション」から「複製」を選び、簡単に取っておくことができるので、忘れずに行うように注意してください。
Shopifyのプラグイン（アプリ）でさらにカスタマイズ
これまで、Shopifyのデザインに関するカスタマイズ方法をご紹介してきました。
しかし、デザインだけでは、ECサイトの最適化が難しい。
そんなときはプラグインでカスタマイズを行いましょう。
Shopifyの専用アプリを使えば、機能面も自由自在にカスタマイズができるのです。Shopifyの専用アプリは約3,000以上あると言われていましたが、今回はそのなかでもECショップに欠かせないアプリを4つご紹介します。
| アプリ名 | 主な機能 |
| Advanced Registration | 顧客管理 |
| Product Filter & Search | 商品検索 |
| Shop The Look | カート表示 |
| Infinite Options | 追加オプション |
顧客管理は「Advanced Registration」
ECサイトを運営していくにあたり、「顧客の管理をしたい」「既存顧客にのみメールを送りたい」などの必要性も出てくるかと思います。
そんなときに使えるアプリが「Advanced Registration」。
会員登録フォームを追加できるだけでなく、登録した顧客情報を一元管理することができます。
顧客の購入履歴を調べたり、顧客情報を即座に検索できたり管理機能もついているため、既存顧客のフォローアップなどにも販促に役立てることができる優れものです。
もちろん、「Advanced Registration」は登録フォームのデザインも自社のブランドイメージに合わせカスタマイズできるので、ブランドイメージも損なう心配もありません。
【Advanced Registrationの主な機能】
- 登録フォームの追加とカスタマイズ
- 自社に必要な登録項目をカスタマイズ
- 顧客情報の一元管理
- 承認したユーザーのみアクセス制限をする
商品検索は「Product Filter & Search」
ECショップの商品数が増えてくると、顧客が探したい商品を見つけにくくなっている場合があります。
Shopifyにもデフォルトで検索機能がついていますが、それでは不十分という場合には、アプリの拡張機能を活用してみましょう。
「Product Filter & Search」を利用すると、shopifyの検索機能を充実させることができます。
商品タイプの検索だけでなく、色やサイズ、価格や評価などで細かく絞り込み検索が可能になります。
ユーザーもすぐに商品検索ができるようになるため、ページ離脱を防ぎ、売上につなげることも可能です。
【Product Filter & Searchの主な機能】
- カテゴリの絞り込み検索
- 複数タグの絞り込み検索
- 検索言語の翻訳
- 全文検索（ユーザーが購入したい商品名の表示）
- 曖昧な用語の一元化（ライトブルー→ブルーに分類など）
- 人気のある商品の提案
- 1秒未満で検索商品の表示
カート表示は「Shop The Look」
自社のECショップの売り上げを促進するために、クロスセル・アップセル、ブランド訴求を行いたいと持っているEC担当者も少なくないのではないでしょうか。
「Shop The Look」は、カートに入れた商品に関連した商品を表示させることができるアプリです。
関連商品は、ポップアップで商品が表示されるため、目にもつきやすく、ユーザーを商品ページに誘導でき、複数商品が購入できるように促すことができます。
表示スピードも早く、ストレスを感じることもありません。さらに、関連商品の表示はデザイン性に優れているため、ブランドイメージを保ったまま販促を行うことができます。
【Shop The Lookの主な機能】
- 商品ページ、ポップアップに関連商品の表示
- ポップアップ表示のカスタマイズ
- テキスト、ボタンの色のカスタマイズ
- 顧客のクリック行動の追跡
追加オプションは「Infinite Options」
Shopifyでは、商品オプションにデフォルトで3つまで設定することができます。
しかし、このデフォルト3つの制限に縛られず、オプションが追加できる機能が「Infinite Options」です。
商品オプションをどんどん追加できるため、バリエーション以外にもカスタマイズしていくことができ、商品の提供もスムーズに行えます。
例えば、商品にネームを入れるサービスを提供しているのであれば、この「Infinite Options」が大いに役立つでしょう。
【Infinite Optionsの主な機能】
- 入力フォーマット、ドロップダウンメニュー、チェックボックス、ラジオボタンなどの設定
- 必須項目に設定
- ドロップダウン、チェックボックスの複数回答可能
- 数値の最大値と最小値の設定
DMMチャットブーストではShopifyアプリに関する記事もございますので、ぜひご覧ください。
Shopifyのカスタマイズのコツ
Shopifyはコード不要でデザイン・機能を簡単にカスタマイズすることができることがわかりました。
カスタマイズも自由自在であるため、色々試してみたくなりますが、カスタマイズも自己満足で終わらせてはいけません。
ここでは、売上UPを目指すためのECサイトを作るためのコツを5つご紹介します。
ぜひ、自社サイトのカスタマイズに役立ててみてください。
- 見やすいページを意識する
- 顧客の動線を意識する
- レスポンシブデザインにする
- ECサイトのトレンドを知る
Shopifyのカスタマイズのコツ1｜見やすいページを意識する
はじめにもご紹介しましたが、「かっこいいサイト＝売れるサイト」ではありません。
もちろん他社と差別化をはかりたい、ブランドイメージをより訴求したい、ECサイトのデザインも独特に仕上げたいという思いがあるかと思います。
しかし、ECサイトを訪れたユーザーに取って、購入ボタンがわかりづらい、商品画面が見づらいとなってしまうと、サイトから離脱するという結果を招いてしまう可能性もあります。
ECサイトに訪れたユーザーは、商品を見にきています。あくまで、商品が主役なのです。
それを意識しすぎるあまり、商品を輝かせようと情報を詰め込みすぎても「見にくいECサイト」となるため、提供する情報量も意識して調整しなくてはなりません。
例えば、ユーザーは商品を見るときは、画面をスクロールしながら商品を見ていきます。スクロールしていく状態でも一目で情報が入るように写真に合わせ、テキスト量も調整してく必要があります。
このように、ユーザーの行動を想像しながらカスタマイズすると、ユーザーに取って「見やすいサイト」を作ることが可能になります。
Shopifyのカスタマイズのコツ2｜顧客の動線を意識する
売上に直結しているECサイトは、顧客の動線を意識したレイアウトになっています。ECサイトを訪れたユーザーがどのようなページをめぐっているか、もしくは目的の商品まで迷うことなくたどり着けているかを分析し、それをECサイトに反映することで、より売上に直接つながるような動線を組むことができるようになるのです。
顧客の動線を設定していくには、まず動線の始点と終点を設定します。
例えば、始点は流入の多いTOPページに設定し、終点は申し込みページに設定するとしましょう。
そのページに辿り着くまでに、どのようなページを訪れるかが大体予想できると思います。商品ページまでの動線をどのように誘導していくかを考えることで、販促につながるECサイトを作り上げることができるのです。
顧客の行動を意識しながらレイアウトの配置も考えるようにしましょう。
Shopifyのカスタマイズのコツ3｜レスポンシブデザインにする
レスポンシブデザインとは、ユーザーの閲覧している画面サイズに合わせ、レイアウトを最適化していくデザインのことを言います。
PCの大きい画面と、スマホの小さな画面どちらで見ても違和感なく、見やすいページが表示されることが期待されるデザインです。
日本では8割以上の人がスマホを保有していると言われており、インターネットの利用はスマホが中心になってきています。
ネットショッピングも同様です。PC画面で見るよりスマホで商品を見て購入するという人が年代問わず、増加している傾向にあります。
ユーザーニーズを考えるとレスポンシブデザインは今や必須事項となっているのです。
仮にレスポンシブデザインになっていなかったとしても、スマホで画面の表示はされますが、PCのレイアウトに合わせた表示となっているため、文字も見づらく、情報が正しくユーザーに届かない危険性があり、離脱されることになります。
デザインテーマを選択する際に、レスポンシブデザインに対応してるかを確認してカスタマイズをはじめるようにしましょう。
Shopifyのカスタマイズのコツ4｜ECサイトのトレンドを知る
ユーザーのニーズに沿ったトレンドを知るのも、売上UPのカスタマイズを実施してくためには非常に有効です。ECサイトのトレンドを見ていきましょう。
動画
最近では、ECサイトに動画を入れている企業も増えてきました。
テキストよりも素早く情報伝達ができるため訴求効果が高く、商品イメージも掴みやすので商品詳細や店舗情報などにも動画が活用されています。
クロスセル
クロスセルとは、商品の購入を検討しているユーザーに対し、別の商品を提案していくことでさらなる購買に繋げていく手法のことを言います。
Shopifyでもプラグインでクロスセル機能を追加することが可能です。
チャット機能
引用：ヤマト運輸公式LINEアカウント
ユーザーから問い合わせ、自動接客など、ユーザーとコミュニケーションを取っていくためチャットボットを導入する企業も増えてきています。
顧客満足度が向上するだけでなく、直接販促につながるようなチャット機能を搭載することもできるようになります。
SEO対策
オーガニック検索から集客を促進するためにはSEO対策が必須です。
これは、ECサイトでも言えることで、広告やSNSでのプロモーション以外にも集客ができる手法として、取り入れられています。キーワード選定が成功の鍵を握ります。
DMMチャットブーストではShopifyテーマのアップデートに関する記事もございますので、ぜひご覧ください。
Shopifyのデザインテーマテンプレートをカスタマイズして売上UPを目指そう！
ECサイトの最適化は、分析と改善を繰り返すことで実現することができます。
Shopifyは初心者でも自由にカスタマイズができる環境であるため、より最適なECサイトを作りやすくなると言えるでしょう。
ECサイトの最適化は、デザインカスタマイズ以外にも機能の拡張が重要です。
プラグインで機能も拡張していくことで、顧客満足度が向上。ECサイトとしての価値を上げていくことができます。
トレンドでもわかるように、今のECサイトではチャット機能の導入が最も顧客満足度を上げていくために重要な機能です。
チャット機能を提供している会社は多くありますが、なかでもShopifyを運営してくには、カスタマイズ性に優れたDMMチャットブーストforECがおすすめ。自社のニーズに合わせたチャット機能を導入することができます。
このようなカスタマイズ機能を活用して、売上UPを目指しましょう！
DMMチャットブーストではShopifyアプリに関する記事もございますので、ぜひご覧ください。