Shopifyでカスタマイズする方法｜初心者向けに分かりやすく解説

ShopifyとはECサイトの制作や運営を助けるプラットフォームです。ShopifyでECサイトを作る際に、「レイアウトやデザインをカスタマイズしたい」と考える方は多いのではないでしょうか。テーマのカスタマイズ方法を習得すれば、初心者でもオリジナリティのあるECサイトを作成できます。

本記事では、プログラミング未経験者やShopifyを初めて利用する方のために、コード編集なしでできる基本のカスタマイズ方法をご紹介します。トップページや商品ページを編集する方法の他、カスタマイズする際の注意点についても解説していますので、ぜひ参考にしてください。

Shopifyは、ECサイト（オンラインショップ）の作成や運営を補助するためのプラットフォームです。現在、世界中で170万以上の企業やブランドが利用していると言われています。

Shopifyの最大の特徴は、HTMLなどのコード編集スキルがなくても、テーマと呼ばれるデザインテンプレートの設定を行うだけで、簡単にカスタマイズできる点です。フォント・メインカラー・レイアウトなどを変更できます。
 

ECサイトのレイアウト・配色・フォントといった基本設定のカスタマイズは、「テーマ設定画面」で行います。なお、カスタマイズする前には、設定に不備があった場合などに以前の状態に戻せるよう、忘れずにバックアップをとるようにしましょう。

バックアップの取り方については、 「カスタマイズする際の3つの注意点」で解説しています。
 

テーマ設定画面の使い方

テーマ設定画面を表示させるためには、Shopify の管理画面にログインし、「オンラインストア」→「テーマ」→「カスタマイズ」→「テーマ設定」の順にクリックして進みます。

テーマ設定画面では、以下の内容を編集できます。

• レイアウト
• 色
• 文字体裁
• ファビコン（検索タブなどに表示されるアイコン）
• SNS（SNS共有ボタン・SNSアカウントリンクボタン）
• チェックアウト（決済ページ）
• テーマスタイル（デザイナーが設定したスタイル）
   

レイアウトを編集する方法

「レイアウト」では、画面に対する表示形式として、ワイドレイアウトを有効または無効にする設定ができます。ワイドレイアウトを有効にすると、画面表示の横幅が1,030ピクセルから1,340ピクセルに変更されます。ページを横長に利用できるため、画像を大きく強調して見せたい場合に効果的です。

ワイドレイアウトを有効にするためには、「レイアウト」の「ワイドレイアウトを有効にする」にチェックを入れます。
 

配色を編集する方法

テーマ設定画面の「色」をクリックすると、ECサイトの背景・ボタン・テキストの配色を編集できます。「トップバーの背景」「本文の背景」「ボタンとリンク」などから編集する箇所を選択し、カラーピッカーと呼ばれる色見本、または16進数のカラーコードで配色を指定します。
 

フォントを編集する方法

「文字体裁」では、テキストフォント（タイポグラフィ―）を編集できます。

利用できるフォントは、一般的なコンピューターに初期搭載されているシステムフォントの他、カスタムフォントも選択できます。ただし、カスタムフォントの場合、表示環境によってはフォントのダウンロードが必要となり、読み込み速度に影響を及ぼす可能性があるため注意しましょう。

Shopifyで利用可能なフォントの詳細については、Shopify公式サイトで最新情報をご確認ください。
 

ECサイトの顔となるトップページのカスタマイズは、Shopifyの「エディター画面」で行います。カスタマイズできる機能はテーマによって異なりますが、主にコンテンツ（表示する項目）の配置や、それぞれの内容を設定できます。

本章では、エディター画面でトップページをカスタマイズする方法について解説します。
 

エディター画面の使い方

テーマのエディター画面を表示させるためには、Shopify の管理画面にログインし、「オンラインストア」→「テーマ」→「カスタマイズ」の順にクリックします。

エディター画面を開くと、利用中のテーマで表示可能なコンテンツ（セクションとも呼びます）の一覧が表示されます。ここでは、コンテンツの追加や削除、並べ替えがドラッグ＆ドロップで簡単にできるようになっています。
 

エディター画面でコンテンツの配置を編集する方法

エディター画面で、コンテンツの配置を編集します。各コンテンツの右側にある「目のマーク（①）」をクリックすると、コンテンツの追加と削除（表示と非表示）ができます。「右端のドットマーク（②）」をドラッグ＆ドロップで、コンテンツの並べ替えも可能です。

このとき、ヘッダーとフッターは固定表示のため、表示場所の移動や削除はできないことになっています。編集が完了したら、画面右上の「保存」をクリックしましょう。
 

エディター画面でヘッダーを編集する方法

トップページの上部に表示される「ヘッダー」を編集します。ここでは、ストアのロゴの設定と、メインメニューへナビゲートするためのメニューバーを設定していきます。

ロゴの設定は、エディター画面の「ヘッダー」からロゴデータのアップロードを行い、ロゴサイズ・レイアウト調整・告知バーの表示・非表示を設定します。設定が完了したら、保存をしておきましょう。

ヘッダーのメニューバーの設定は、「オンラインストア」→「メニュー」→「メインメニュー」のページで行います。「ホーム」「ブログ」「おすすめ商品」といった項目から、ヘッダーに表示させたいメニューを追加します。各項目の左側の「ドットマーク」をドラッグ＆ドロップすると、並べ替えも可能です。
 

エディター画面でコレクションページを編集する方法

コレクションページとは、商品をカテゴリ別にグループ化したページです。メンズ・レディース・子供用などのカテゴリ分別や、新商品・おすすめなどの特集を紹介するのに便利なコンテンツです。

エディター画面で「コレクション」を追加し、編集を行います。コレクションのタイトルとなる「見出し」「表示するアイテム」「表示する商品数」「販売元・セール・売り切れ」を、それぞれ設定します。設定完了後、保存をしましょう。
 

Shopifyのトップページをカスタマイズした例をご紹介します。こちらは、無料テーマ「Debut」を使用した例です。（参照元：ライトスタイル）

ヘッダー部分に、ロゴとヘッダーメニューを設定し、ホーム・家具のカテゴリ・ブログページ・お問い合わせページへナビゲーションしています。

人気の商品やコレクションの他、スライドショーや動画など動きのあるコンテンツを盛り込み、ユーザーに興味・関心を持ってもらえるような工夫がされています。

選ぶテーマによって、基本のレイアウトや表示できるコンテンツが異なるため、カスタマイズする際には、テーマ選びも重要なポイントになります。Shopifyのテーマ選びについての詳しい内容は、下記の記事を参考にしてください。

次に、商品ページをカスタマイズしていきます。商品ページは、ユーザーに商品の価値を伝え、訴求するためのページです。画像・商品説明・商品レビュー・カートボタンなど、直接購入の意思決定につながる要素が多いため、詳細まで設定しましょう。

商品ページの編集画面は、管理画面にログイン後、「商品管理」で商品を選択すると表示できます。Shopifyの商品ページはテーマによってデザインが異なるため、理想のデザインに近いテーマを選ぶと、カスタマイズの手間が少なくなります。
 

メインビジュアル

メインビジュアルとなる商品画像は、商品の印象を決める重要な要素の一つです。ユーザーがイメージしやすいよう、角度を変えて撮影した画像や、イメージモデルが実際に使用・着用している写真などを用意し、アップロードしましょう。

画像アップロードの際の注意点は、「画像アップロードに関する規定・要件」の章で解説しています。
 

キャッチコピー

商品説明のキャッチコピーには、ユーザーの目を引き、興味を持ってもらえるような短いフレーズを入力しましょう。商品の特徴やメリットを書き並べるよりも、購入するとどのようなベネフィットが得られるかを簡潔に記したほうが、読み手に伝わりやすくなります。

例えば、スポーツシューズのキャッチコピーの場合、「メッシュ素材で通気性が良く軽い」と特徴を並べるより、「長時間履いても疲れない」とユーザー目線のベネフィットを伝えたほうが、明確にイメージできるでしょう。

キャッチコピーを考える際のヒントとして、Shopifyの無料コピー生成ツールも便利ですので、活用してみましょう。
 

商品説明

「説明」の欄に、商品の色・素材・サイズ・使用方法などの詳細を入力します。その他に、商品のこだわりポイントや他社との違いなどを表記するのもおすすめです。

Shopifyの商品ページで価格・在庫状況・配送方法の設定をすると、価格での絞り込み検索やストックカウンターに反映されるため、正確に入力するようにしましょう。
 

商品レビュー

選択したテーマに商品レビュー機能がある場合は、設定を行います。Shopifyの管理画面から、レビューの公開・非公開の設定や、返信・削除などの管理ができます。

商品レビュー機能が付いていない場合でも、Product Reviewsという無料アプリをインストールすれば利用可能です。
 

トラストバッジ（トラストマーク）

トラストバッジ（トラストマーク）とは、国際基準に基づき、ECサイトの信頼性と安心性を認証した第三者認証マークです。トラストバッジを獲得することで、他社との差異化が図れます。

現時点でトラストバッジを利用できる無料テーマはないため、利用する際はトラストバッジ機能がある有料テーマを選択するか、Trust Badge Masterなどの有料アプリをインストールすると良いでしょう。
 

購入ボタン（CVボタン）

購入ボタン（CVボタン）のデザインや配置は、商品購入のアクションを促すための重要な要素です。Shopifyの管理画面で販売チャネルを追加することで、購入ボタンを作成できます。

購入ボタンは配置・サイズ・フォント・色をカスタマイズできますが、一部HTMLコードを編集する必要があります。詳しい編集方法については、Shopify公式サイトをご確認ください。
 

SEOの設定

作成したECサイトの検索エンジン最適化の向上のため、SEO対策をします。商品ページで、SEO対策のためのメタタイトル、メタディスクリプション（ページの概要）、altタグ（代替テキスト）設定ができます。

メタタイトルとメタディスクリプションは、検索エンジンに表示され、altタグは画像が表示されないときに代わりに表示されます。
 

この他に、アプリを使ってカスタマイズすることも可能です。Shopify公式アプリとサードパーティアプリ（第三者機関が制作したアプリ）があります。

例えば、Product Filter & Searchは、フィルター（絞り込み）機能を導入できるアプリです。BEST Currency Converteという、通貨換算機能を搭載するためのアプリもあります。

Shopifyテーマのコードを編集することで、より詳細なカスタマイズができます。テーマコードを変更するには、HTML・CSS・Liquidなどのプログラミングの知識が必要です。

編集する際には、「カスタマイズする際の3つの注意点」をご確認ください。
 

テーマコードの編集

テーマコードの編集は、管理画面の「オンラインストア」→「テーマ」→「アクション」→「コードを編集」の順にクリックします。ファイルを編集するためには、編集したいフォルダの階層下にある対象ファイルを選択し、編集完了後に保存します。
 

Shopifyテーマをカスタマイズする際の、3つの注意点をご紹介します。
 

1. バックアップをとる

テーマを編集する前には、必ずデータのバックアップをとりましょう。テーマの設定で不備があった場合などに、以前の状態に戻せるようにするためです。

管理画面の「オンラインストア」→「テーマ」をクリックし、テーマを選択して「アクション」→「複製」の順に進むと、CSVファイルでバックアップが作成できます。
 

2. 利用できるサポートの確認

Shopifyでは、テーマによってサポートレベルが異なります。そのため、テーマのカスタマイズを行う前に、利用できるサポートを確認しておくことをおすすめします。

無料テーマがOS2.0対応の場合、Shopifyサポートからテーマに関する簡単なサポートが受けられます。Shopifyの有料プラン（ベーシックプラン以上）に加入していれば、無料テーマに関するデザインサポートを最大60分まで利用できます。

外部の開発者から提供されている有料テーマは、Shopifyのサポートが受けられないため、必要に応じてShopifyエキスパート（Shopify公認のEC制作会社）へ相談しても良いでしょう。
 

3. 画像アップロードに関する規定・要件

カスタマイズのための画像ファイルをアップロードする前に、アップロード可能なファイル形式とファイルサイズを確認しておきましょう。アップロード可能なファイル形式は以下のとおりです。

• JPEGまたはプログレッシブJPEG（.jpeg）
• JPG（.jpg）
• PNG（.png）
• GIF（.gif）

画像のファイルサイズは20MBまでとなっており、画素数は最大4,472×4,472ピクセル（20メガピクセル）までです。また、Shopifyで推奨されている商品画像（正方形）の解像度は、2,048×2,048ピクセルです。
 

ここまで、Shopifyテーマのカスタマイズ方法について解説してきました。Shopifyでは、コード編集の知識がなくても、管理画面で設定を行うことでオリジナリティのあるECサイトを作成できます。

ストアの顔となるトップページや、商品購入に直接影響を与える商品ページなどをカスタマイズして、魅力的なECサイトを構築しましょう。テーマをカスタマイズする際には、バックアップやサポートの確認 などを忘れずに行ってください。