「ShopifyでECサイトを作ったけれど、もう少しデザインにこだわりたい」
「Shopifyのテーマを使いやすく、より売れやすくしたい」
「Shopifyの商品ページをより充実させたい」
本記事はこのようなお悩みをもつ方のための記事です。そこでShopifyのカスタマイズについて、下記のようなポイントで解説をしていきます。
【この記事のポイント】
- Shopifyの「デザイン」のカスタマイズ方法がわかる
- Shopifyの「商品ページ」のカスタマイズ方法がわかる
- Shopifyのカスタマイズ・編集に役立つ「5つのプラグイン」をご紹介
【基本編】Shopifyのデザインのカスタマイズ・編集方法
まずはShopifyのカスタマイズの「基本編」をお伝えします。「テーマ選び」や「レイアウト」「配色」「フォントスタイル」などの編集方法についてお伝えします。
（次セクションが応用編となります）
1. 好みのテーマを選択する
まずは好みのテーマを選択するところから始めましょう。
1-1. 管理画面から、[オンラインストア] をクリック
デフォルトでは「Debut（デビュー）」というテーマが選択されています。
1-2. [テーマライブラリー] から、テーマを選択します
「無料のテーマ」を選ぶと、管理画面上でShopifyの無料テーマを探すことができます。
お気に入りのテーマを選びましょう。
テーマを選んだら、スタイルを決めて「テーマライブラリーに追加する」をクリックします。
すると「テーマライブラリー」にテーマが追加されます。
なお、「Shopify テーマストア」を選ぶと、別タブが開きます。有料/無料のテーマを手に入れることができます。
2. 管理画面からテーマエディタを起動する
テーマエディタを起動し、配色やフォントなど、基本的な設定をしましょう。
2-1. [テーマライブラリー] から、 [カスタマイズ] を選択します
すると、「テーマエディタ」が起動しますので「カスタマイズ」をクリック。
「テーマエディタ」が起動しました。
3. コンテンツの追加や設定を行う
テーマエディタを起動したら「セクション」「テーマ設定」タブでカスタマイズしたい箇所を選択し、作業を進めましょう。
「ウェブサイトのレイアウト」「配色」「フォントスタイル」などを変更できます。
テーマのカスタマイズにより、あなたのECサイトの独自性を出すことができます。
【応用編】Shopifyのテーマコードをカスタマイズする方法
続いて、Shopifyカスタマイズの応用編です。テーマコードをカスタマイズする方法をお伝えします。
（前提）HTML、CSS、Liquidの知識が必要
前セクションの基本編でお伝えした「テーマエディタ」を使用することで、カスタマイズが可能です。しかしテーマエディタを使用しても、変更したい箇所の設定ができない場合は「テーマコード」を編集することで、より細かな変更を加えることができます。
でも「テーマコード」を編集する場合には、HTML、CSSに加え、Liquidと呼ばれるShopifyのテンプレート言語の知識が必要です。知識がある場合のみ、テーマコードを編集しましょう。
知識がなく、編集を加えたい場合には「Shopify Expert」に依頼をしてください。
依頼のお問い合わせ1. テーマの複製をしてバックアップを取る
「テーマコード」編集する場合、まずテーマの複製をしてパックアップを取りましょう。必要に応じて、変更を破棄して、再度開始できるようにするためです。
複製するテーマで、[アクション] > [複製] をクリックします。
2. テーマコードを編集する
2-1. 管理画面から [オンラインストア] > [テーマ] の順に移動
2-2. [アクション] > [コードを編集] をクリック
2-3. 「コードエディタ」にてファイルを編集する
「コードエディタ」では、左サイドにテーマファイルのディレクトリ。右サイドにファイルを編集するためのスペースが表示されます。
「コードエディタ」がフルスクリーンに展開されている間は、ページの右下にあるボタンで「ダーク」モードが使用できます。
Shopifyの商品ページでカスタマイズする際のポイント
このセクションでは、Shopifyの商品ページで必要な要素や、重要なポイントなどを整理してお伝えします。
1. 商品画像（メインビジュアル）
もっとも重要なパーツの一つが商品画像です。ただの商品画像だけではなく、実際にその商品を使用している画像も見せられるとベター。
たとえば、アパレルのECサイトの商品ページであれば、実際にその服を来ている人の写真を入れるなど。
多くの訪問者はファーストビューの段階で、そのページに滞在するか離脱するかを決めます。商品詳細ページは、その商品のLPのようなもの。
ファーストビューで勝負は決すると思って、より高品質な画像を用意しましょう。
2. 商品名（キャッチコピー）
1の商品画像と同様に大事なパーツが商品名（キャッチコピー）です。商品名だけではなく、ブランド名も一緒に記載をしておくとベター。
ユーザーが検索エンジンで検索をするときに「ブランド名 商品名」と打ち込むことが多いためです。
このようなことを考えて、SEO効果を高めるために、商品名にはH1タグを設置しておくこともオススメします。
3. 商品説明
次に重要なのが商品説明です。商品説明のポイントは「リスト」と「ベネフィット」です。
リストを使うことで、パッとその商品の特徴が掴めます。
また、単なる商品説明ではなくベネフィット（その商品を手に入れることで得られるユーザーの価値・未来）を伝えることで、商品説明の魅力が増します。
4. 購入ボタン
CTA（コール・トゥ・アクション）ボタンも、ページのコンバージョン率を大きく左右する要素です。
検討すべきCTAボタンの要素
- ボタンの色
- 配置場所
- 文言
- サイズ
一様にこれが正解といえるわけではないので、サイトのテーマやユーザーの好みに合わせてテストしてみる必要があります。
5. メタタイトルとメタディスクリプション
メタタイトル・メタディスクリプションは、検索エンジンでの検索結果に表れるタイトルと説明文です。先ほども商品名のところで触れましたが、SEO対策をすることで商品詳細ページへの直接のアクセスを見込めます。
ECサイトでは、商品のメタタイトルとメタディスクリプションが同一の設定になっていることも多いですが、しっかりと設定すべきポイントの一つです。
何万点もの商品を扱っているECサイトでは、設定が大変かと思いますが、テンプレートなどを用意しつつ効率よく設定しましょう。
6. 商品のレビュー
商品のレビューを用意することで、商品の購入率（コンバージョン率）を高められます。
Shopifyでは商品レビューを入れるためのアプリもありますので、ぜひアプリの導入を検討しましょう。
7. トラストマーク
サイトの安全性や商品の信頼性などを証明するトラストマークも、ECサイトに表示させたいものの一つです。
たとえば、個人情報保護ポリシーに準拠していることを示すPマークや、セキュリティ対策証明のマークなど。
対応している支払い方法のロゴなど（Amazonペイなど）を見せることも有効。ユーザーに安心を与えることで、コンバージョン率を高めます。
8. クロスセルの仕組み
クロスセルの仕組みを入れることも、商品ページに欲しい要素の一つです。ECで売上を上げるために、クロスセルすることで一人当たりの購入単価を上げられます。
のちほどご紹介しますが、「Shop The Look」というアプリを使うことで簡単にクロスセルの仕組みを導入できます。
Shopifyのカスタマイズ・編集に役立つアプリ5選
本セクションでは、Shopifyのカスタマイズ・編集に役立つプラグインを5つご紹介します。
デザインビルダー：Shogun Landing Page Builder
Shogun Landing Page Builder（以下、Shogun）は、Shopify上のランディングページや商品ページ、ブログ、コレクションページを簡単にデザインできるアプリです。コーディングなしのドラッグアンドドロップでカスタマイズできます。
Shogunはテンプレートも豊富で、レスポンシブ対応もしています。また、どんなテーマでもカスタマイズできるので、他アプリとの相性の心配は不要です。
アプリ概要
- アプリ名称 : Shogun Landing Page Builder
- 料金 : 月額$39.00（10日間の無料試用期間あり）
- 対応言語 : 英語
画像拡大・ズーム：All In One Product Zoom
All In One Product Zoomは、詳細部分を確認できるよう、製品ビューに画像ズーム機能を追加するためのアプリです。
下記の3つのズームタイプから選択可能。
- ウィンドウズーム
- インナーズーム
- レンズズーム
「ウィンドウズーム」では、商品画像の横に拡大された画像が拡大表示されます。
「インナーズーム」では、商品画像にカーソルを合わせると、合わせた個所が拡大されます。
「レンズズーム」では、虫眼鏡のように画像を拡大して見ることができます。（正方形、円形のレンズタイプを選択可能）
さらに、下記の設定も簡単にカスタマイズ可能です。
- ズームレベル
- ズーム位置
- ズームサイズ
- 色
アプリ概要
- アプリ名称 : All In One Product Zoom
- 料金 : 月額$1.90（3日間の無料試用期間あり）
- 対応言語 : 英語
現地通貨での価格表示：BEST Currency Converter
BEST Currency Converterは、ユーザーにあった通貨表示に変更するための「多通貨変換アプリ」です。
アプリの特徴は下記の通り。
- ボタンを押すだけで160以上の通貨を追加
- 価格は、ユーザーの所在地に基づいて自動的に変換
- 見やすい換算価格表示が可能（小数点以下の削除など）
- 必要に応じて、通貨コンバーターを非表示にし、バックグラウンドでのみ実行できる（有料版のみ）
無料版の場合は、下記の機能のみが使用可能です。
- 5つの通貨変換設定が可能
- 3つの通貨変換のデザインテンプレート
- 無料テクニカルサポート有
アプリ概要
- アプリ名称 : BEST Currency Converter
- 料金 : 月額$9.95（無料プランあり）
- 対応言語 : 英語
商品検索・フィルター設定：Product Filter & Search
Product Filter & Searchは、ユーザーの商品検索をサポートするアプリです。最大で100万個の商品を検索でき、新商品もリアルタイムで表示されます。
ワンクリックインストールで、簡単に起動・実行できます。またニーズに合わせてカスタマイズも可能です。
下記のフィルタリング検索ができます。
- コレクション
- 仕入先
- 製品タイプ
- 色
- サイズ
- レート
- タグ
- 値段
- 評価
- セール状況
- 在庫状況
アプリ概要
- アプリ名称 : Product Filter & Search
- 料金 : 月額$19.00（14日間の無料試用期間あり・追加料金が適用される場合があります）
- 対応言語 : 英語
関連商品の詳細＆カート表示：Shop The Look
Shop The Lookは、ECサイトに「SHOP THE LOOK」ボタンを追加し、関連商品をすべて確認、カートへ誘導が可能となるアプリです。
たとえばこのアプリを使用することで、アパレルECの場合、ユーザーはモデルが製品写真で着用しているすべてのアイテムをカートに追加できます。個々の製品ページにアクセスする必要がなく、スムーズへカートへ誘導できます。
1枚の写真から複数の商品のアピールができ、アップセル・クロスセルが期待できるようになります。
アプリ概要
- アプリ名称 : Shop The Look
- 料金 : 月額$19.99（21日間の無料試用期間あり）
- 対応言語 : 英語
【2019年最新版】Shopify Experts認定企業オススメのアプリ12選（一覧あり）
【まとめ】Shopifyで魅力的なECサイトを作るために
本記事では、Shopifyのカスタマイズについて詳しく知りたい方向けに、情報をご提供してきました。
本記事の要点をまとめると、下記の通りです。
- Shopifyでは、管理画面からカスタマイズが可能
- そしてShopifyはプラグインが豊富。アプリ「Shogun」などを使うことで容易に編集が可能に
- しかし細かな調整などは、HTML等の知識が必要
- 売れるECサイトを構築するためには、専門の事業者に頼むのがベター
今回ご紹介したShopifyのカスタマイズに関する情報によって、より魅力的なECサイトを作り上げましょう。
※この記事は2019年12月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。
