目次
Shopifyは、簡単にECサイトを構築できるだけでなく、デザイン性やカスタマイズ性が高い点も魅力のひとつです。
少ないステップで作ったショップの土台を、より理想的なショップに作りこんでいくことができます。
「デザインにこだわりたい」「商品ページをカスタマイズして、より売れやすくしたい」そんな方々のために、Shopifyのカスタマイズ方法を画像付きで解説します。
記事を読めば、Shopifyで作ったECサイトをより魅力的にする方法がわかります。
Shopifyのテーマのカスタマイズ方法
テーマとは、Shopifyのストアを構築するテンプレートのことです。
Shopifyではテーマによって、ショップの「顔」となるデザインを、自分好みにアレンジすることができます。
テーマ選びやカスタマイズの方法を解説します。
テーマを選択しよう！
- 管理画面から「オンラインストア」→「テーマ」を選択します。
画面をスクロールし、「テーマライブラリー」へ。「無料テーマを探す」をクリックします。
表示されたテーマから好きなものをクリック。
好きなスタイルを選択し、「テーマライブラリーに追加する」をクリックします。
なお、「テーマライブラリー」でShopify テーマストアを選択した場合は、別タブでテーマストアが開き、有料/無料のテーマを選択できます。
テーマエディタを起動してみよう！
テーマエディタとは、テーマの配色やフォントなどあらゆるカスタマイズを行うための操作画面です。
「テーマライブラリー」で「カスタマイズ」をクリックします。
テーマエディタが起動しました。
コンテンツ追加・設定を行おう！
エディタ左側のメニューから「ヘッダー」、「サイドバー」などを選択し、セクションごとにコンテンツの追加や設定を行います。
【「ヘッダー」の例】
エディタで「テーマ設定」を選択すると、テーマの色やフォントの設定ができます。
テーマコードをカスタマイズしてみよう
HTML、CSS、Liquidと呼ばれるShopifyのテンプレート言語の知識があれば、テーマコードを編集し、より細かなカスタマイズが可能です。
テーマのバックアップをとる
「テーマコード」編集前に必ずバックアップを取ります。
「現在のテーマ」→「アクション」→「複製する」を選択します。
テーマコードを編集する
「現在のテーマ」→「アクション」→「コードを編集する」を選択します。
コードエディタが表示されました。
左側からファイルを選択すると、右側のスペースでファイルを編集できます。
Shopifyの商品ページのカスタマイズ方法
商品ページは購買につながる重要な部分です。
カスタマイズするには、まず管理画面の「ホーム」、または「商品管理」の「すべての商品」から、「商品を追加する」をクリックして商品編集画面を開きます。
メインビジュアル（商品画像）
商品を手にできないECサイトでは、商品画像は特に重要です。
高画質な画像を複数枚、実際に商品を使用している画像も含めて用意します。
「メディア」の「ファイルを追加する」をクリック。
または、ファイルをドロップします。
商品名
商品名はキャッチコピーと考え、印象に残ることを意識します。
また、SEO効果を高めるため、ブランド名も一緒に記載し、H1タグを設置します。
商品編集画面の「タイトル」に、商品名を入力します。
商品説明
商品の特徴と、購入することで得られる価値や未来（ベネフィット）を簡潔にまとめるのがポイントです。
商品編集画面の「説明」に、商品説明を入力します。
入力の際、メニューボタンで適宜書式の設定や色変更を行います。
購入ボタン
購入ボタンで重要な要素は、色、配置場所、文言、サイズです。
初心者ならコードを書かずにボタン作成できる「Buy Button」アプリが便利です。
管理画面上で「販売チャネル」横の「+」をクリック。
「購入ボタン」横の「+」をクリック。
ボタンが作成できます。
メタタイトルとメタディスクリプション
メタタイトル・メタディスクリプションとは、検索エンジンでの検索結果で表示されるタイトルと説明文です。
商品編集画面で「ウェブサイトのSEOを編集する」をクリック。
タイトルと説明文を入力します。
商品のレビュー
「Product Reviews」アプリを追加することで、商品ページにレビュー機能を追加できます。
商品レビューは、ECサイトで商品を選ぶ際に参考にするユーザーが多く、商品の購入率とストアの信頼度につながります。
導入を検討しましょう。
トラストマーク
トラストマークとは、サイトや商品の安全性・信頼性を証明するマークで、例えば個人情報の保護体制に関するPマークなどがあります。
ユーザーがECサイトを信頼できると判断する材料にもなるため、積極的に表示させましょう。
クロスセル
クロスセルとは、他の商品を併せて購入してもらうことで、一人あたりの購入単価の向上が見込めます。
関連商品の情報を表示させるのに役立つ「Shop The Look」アプリを追加して、商品ページにクロスセルの仕組みを導入しましょう。
Shopifyのお問い合わせページのカスタマイズ方法
ユーザーとの貴重な接点になるお問い合わせページは必ず設置しましょう。
Shopifyでお問い合わせページを使うために必要な手順を解説します。
お問い合わせページを作成する
管理画面で「オンラインストア」→「ページ」を選択し、「ページを追加」をクリックします。
ページ編集画面で、「タイトル」に「お問い合わせ」と入力します。「コンテンツ」は空欄でも可。
あれば、問い合わせ時の注意事項などを入力します。
「テンプレート」で「page.contact」を選択し、保存します。
お問い合わせページをメニューに追加
作成したページをストア上で表示させるための操作を行います。
管理画面で「オンラインストア」→「メニュー」から、「フッターメニュー」または「メインメニュー」を選択。
「メニュー項目を追加」をクリック。
「名」に「お問い合わせ」と入力。
「リンク」欄で「ページ」を選択し、「お問い合わせ」を選択、「追加」します。
お問い合わせフォームの受信先を設定する
フォームからの問い合わせを受けるメールアドレスを設定します。
管理画面の「設定」→「一般設定」をクリック。
「アカウントのメールアドレス」欄に、フォームからの問い合わせを受信するメールアドレスを入力します。
スパムやreCAPTCHA機能の設定も
スパムとは迷惑メールのことです。
Shopifyでは、標準で怪しいメールの冒頭には「スパム」とついてメールが送られてきます。
また、「私はロボットではありません」に代表される悪質なアクセスからWebサイトを守る機能「reCAPTCHA（リキャプチャ）」もデフォルトでオンの設定になっています。
Shopifyのカスタマイズは外注できる？費用感も！
Shopifyのカスタマイズは、ECサイト開発会社に外注することも可能です。
Shopifyの特性を知っている会社に提案してもらいながら、本格的なサイトを制作できます。
費用は、オリジナルデザインでカスタマイズされたECサイト制作の場合100～300万円ほど、大規模なサイトの企画の場合300～1,500万円以上が相場です。
株式会社これからでは、Shopify制作代理店として、お客様毎に最適なサイト構築を支援しています。
Shopifyを活用した構築ならお任せください。
まとめ
Shopifyは、テーマや商品ページを好みや目的にあわせてカスタマイズでき、お問い合わせページの設置も簡単です。
カスタマイズは、ECサイト開発会社に外注することもできます。
Shopifyの設定を完了したあとは、集客も必要になってきます。
ネットショップ集客ツールAdSISTなら、Shopifyに登録済みの商品を自動的に抽出し、商品カタログ広告の作成が可能で効率的かつ簡単に広告配信できます。
Shopifyのカスタマイズとあわせて、ぜひ導入を検討してみてください。
