Shopifyテーマのカスタマイズを徹底解剖！初心者でもできるコード編集

Shopifyテーマのカスタマイズとは、ECサイトのデザインや機能を自社ブランドに合わせて調整・変更することです。

Shopifyテーマカスタマイズの基本概要

Shopifyは、ECサイト（オンラインショップ）の作成や運営を補助するためのプラットフォームです。現在、世界中で170万以上の企業やブランドが利用していると言われています。 Shopifyの最大の特徴は、HTMLなどのコード編集スキルがなくても、テーマと呼ばれるデザインテンプレートの設定を行うだけで、簡単にカスタマイズできる点です。フォント・メインカラー・レイアウトなどを変更できます。

コード編集なしでのカスタマイズ方法

1つ目はコード編集をせずにデザインの設定や編集をする方法。カスタマイズは難しいと思っていて手が出せなかった人は、ぜひ挑戦してみてください。 凝ったカスタマイズをすることはできませんが、レイアウトやカラーの変更などをすることができます。難しいコード編集は必要ないので、初心者の方やコード編集が苦手・不安な人におすすめの方法です。

コード編集によるカスタマイズ方法

2つ目は、コード編集をしてカスタマイズする方法です。より凝ったカスタマイズをしたい人はコード編集をしてカスタマイズしましょう。コード編集をするので作業は難しくなりますが、独自のデザインを作り出すことができます。 Shopifyでは、Liquidという独自言語が使用されています。Liquidは、HTMLの文中にコードを直接書くことで処理や出力を行います。カスタマイズする際は、このLiquidの基本を理解してから始める必要があることを覚えておきましょう。

カスタマイズ前の準備作業

まず、テーマを編集する前に、事前に準備しておくことは３点あります。

テーマのバックアップ作成

テーマをカスタマイズする前に、設定を間違えた場合にすぐに元の状態に戻せるように、バックアップコピーを作成しておきましょう。 オンラインストアでは、最大で20個のテーマを追加できます。そのため、すでに20個テーマがあり、新たに追加したい場合、既存のテーマを削除します。 テーマを一度削除してしまうと、完全に削除され、復元できなくなりますので、注意してください。 テーマを複製する手順は以下のとおりです。

• 管理画面から [オンラインストア] > [テーマ] の順に移動します。
• 複製するテーマで、[アクション] >[複製] をクリックします。

複製したテーマはテーマページに表示され、「複製したテーマ名のコピー」という名前になります。

サポートレベルの確認

テーマで利用できるサポートレベルを必ず確認しておきましょう。基本的なカスタマイズに関しては、テーマ開発者のサポートを受けられます。ただし、大幅にテーマを変更する場合、テーマのサポートに関する追加リソースリストを確認しておきましょう。 大幅なテーマのカスタマイズに向け、サポートが必要な場合、ShopifyパートナープログラムでShopify Expertという認定パートナー企業が存在し、相談することが可能ですので、検討してみてください。 無料のテーマを使用している場合、サポートチームがサポートチュートリアルを使用することで、軽微な変更に対応可能です。また、ベーシックプラン以上では、無料のデザインサポートを60分間受けることができます。

画像アップロード規定の確認

オンラインストアでは、会社のロゴ、商品画像、バナーなど様々な種類の画像が利用可能です。画像は利用場所により、そのサイズやフォーマットが最適化されるので、ご注意ください。 画像フォーマットとしては、以下のフォーマットに対応しています。

• JPEGまたはJPG
• プログレッシブJPEG
• PNG
• GIF

画像アップロードには制限があり、以下の条件を超えるとアップロードできません。

• 20メガピクセル
• 20メガバイト

テーマ設定画面の活用方法

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

編集可能な項目

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

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

レイアウトの調整

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

配色とフォントの設定

テーマ設定画面の「色」をクリックすると、ECサイトの背景・ボタン・テキストの配色を編集できます。「トップバーの背景」「本文の背景」「ボタンとリンク」などから編集する箇所を選択し、カラーピッカーと呼ばれる色見本、または16進数のカラーコードで配色を指定します。 「文字体裁」では、テキストフォント（タイポグラフィ―）を編集できます。ただし、カスタムフォントの場合、表示環境によってはフォントのダウンロードが必要となり、読み込み速度に影響を及ぼす可能性があるため注意しましょう。

トップページカスタマイズの実践

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

商品名の最適化

商品名は顧客の目を引くようにするのがポイントです。GoogleやYahoo！などの検索エンジンで検索されたときに表示されやすくように心掛けましょう。商品名とブランド名をセットで入れるなど、SEO対策するのがおすすめです。 詳細なSEO対策については、SEO対策やり方入門で包括的な知識を学ぶことができます。

商品画像の最適化

ECサイトでは実際に商品を手に取ることができないので、商品画像がとても重要です。写真は角度を変えるなどして複数枚掲載し、アップ画像なども掲載しましょう。 実際に商品を使用している写真を掲載すると、顧客はイメージをつかみやすくなります。Shopifyでは、画像ファイルはJPEGまたはJPG、プログレッシブJPEG、PNG、GIFのフォーマットのみをサポートしています。

商品説明とキャッチコピー

商品画像で顧客の心を掴み、商品説明でしっかり特徴を伝えるのがポイントです。サイズや色など、商品の詳細なスペックを掲載し、商品を購入することによって得られるメリットなどを記載しましょう。 ただし、商品説明が長すぎると離脱に繋がってしまいます。商品説明は簡潔にポイントを押させて紹介するのがおすすめです。

購入ボタンの設計

購入ボタンはデザインや配置が重要になってきます。Shopifyでは、サイズ、フォント、色などを細かくカスタマイズすることが可能です。 ボタンを押したときのアクションも指定できるので、こだわってみましょう。配置位置もカスタマイズでき、最適なタイミングで購入ボタンを表示できます。

上級者向けコード編集方法

既存のテーマでは満足できない、どうしてもやりたいことが実現できない、オリジナルのデザインを使いたいというときなどは、コード編集を使用したカスタマイズがおすすめです。

コード編集の基本手順

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

CSS・HTMLの記述

テーマのCSSを編集したい場合は、Assetsフォルダ内に新しいCSSファイルを追加して記述します。「Assets」をクリックして「新しいassetを追加する」を選択します。 HTMLの記述方法は、コード編集からではなく商品ページやブログ記事を追加して行います。HTMLの記述方法がわからなくても、WordPressのエディターのように直感的に見出しや箇条書きなどを追加できます。

編集可能なフォルダ構成

Shopifyでコード編集できる主要フォルダは以下の通りです。

• Layout：サイト全体に関わるHTML要素
• Templates：個別ページごとのファイル
• Sections：カスタマイズ管理画面のセクションパーツ
• Snippets：細かいパーツを記載したLiquidファイル
• Assets：JavaScriptやCSSを収納
• Config：テーマ全体に関係するJavaScript
• Locales：各言語に関係するJavaScript

商品ページのカスタマイズ戦略

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

メインビジュアルの最適化

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

商品レビューの活用

商品のレビューを追加することで、商品の購入率があがります。商品レビューがあれば、使っているところを具体的にイメージしやすく、信憑性も高くなり、安心して購入できるからです。 レビューを表示するだけではなく、フォームのカスタマイズやレビューをCSVでインポート・エクスポートもできます。

SEO設定の重要性

商品名や商品説明の設定と関連しますが、Shopifyの商品編集画面では、SEO対策のための設定が可能です。具体的には検索エンジンの検索結果で、タイトルと説明文として表示される、meta titleとmeta descriptionです。 現代のデジタルマーケティングでは、LLMO対策完全ガイドも重要な要素となっており、LLM（大規模言語モデル）最適化も併せて検討する価値があります。

テーマ選びの成功法則

機能要件の確認

テーマによって、デザインに合わせて機能性が制限されているケースがあります。自社ECサイト運営にあたって、実施したいマーケティング手法に合わせたサイト構築ができるかどうかを確認しておきましょう。

ターゲット層の考慮

販売するターゲットに合わせて、使用するテーマを決めることも重要です。若者から高齢者まで幅広い年代をターゲットに商品を販売する場合、消費者の見やすさや扱いやすさが重要になってきます。 特に高齢者をターゲットにする場合には、なるべくシンプルなデザインを選ぶ方が良いでしょう。

日本語対応の重要性

Shopifyは全世界で使われているECプラットフォームです。日本語を含めた複数言語に対応するテーマもあります。 日本語対応のテーマなら、テーマ言語を変更するだけで日本語での表示が可能です。できるだけ手間をかけたくない方や、とにかく早くサイトオープンしたい方は、日本語対応のテーマを選ぶほうがスムーズに進められるでしょう。

おすすめShopifyテーマ紹介

無料テーマ

Minimal

Minimalはモバイル対応のレスポンシブデザインで、商品紹介を得意としたテーマです。 商品をキレイに整理して表示でき、複数の商品画像がある場合もスライド機能ですっきりと見せられます。商品の詳細まで見せられる機能が揃っています。

Dawn

Dawnはモバイルファーストで柔軟性の高いデザインが可能なテーマです。 画像や商品だけでなく、動画など様々なセクションを追加することで柔軟にページが作れるようになっています。

有料テーマ

Impulse

豊富な商品を魅力的に見せることのできるデザインに優れたテーマ。検索機能とプロモーション機能に優れており、ECサイト内で積極的なプロモーション施策を行いたい方に向いています。

Icon

Iconは高解像度画像を活用して、商品の詳細やイメージを表現でき、視覚的な効果を最大限活かせるテーマです。

カスタマイズ時の重要な注意点

バックアップの必須性

テーマを編集する前には、必ずデータのバックアップをとりましょう。テーマの設定で不備があった場合などに、以前の状態に戻せるようにするためです。 管理画面の「オンラインストア」→「テーマ」をクリックし、テーマを選択して「アクション」→「複製」の順に進むと、CSVファイルでバックアップが作成できます。

サポート体制の確認

Shopifyでは、テーマによってサポートレベルが異なります。そのため、テーマのカスタマイズを行う前に、利用できるサポートを確認しておくことをおすすめします。 外部の開発者から提供されている有料テーマは、Shopifyのサポートが受けられないため、必要に応じてShopifyエキスパート（Shopify公認のEC制作会社）へ相談しても良いでしょう。

画像規格の遵守

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

外注時の判断基準と費用目安

Shopifyのカスタマイズは、ECサイト開発会社に外注することもできます。リプレイス案件を請け負った実績がある制作会社を選ぶと良いでしょう。

費用の目安

Shopifyを活用したECサイト運営に関しては、生成AIおすすめ17選で紹介されている最新のAIツールも効率化に役立ちます。また、チーム全体のスキル向上を図りたい場合は、生成AI研修のカリキュラム設計も参考になるでしょう。

よくある質問