Shopifyのカスタマイズを解説！おすすめテーマやアプリも紹介

Shopifyのデザインは、テンプレートをカスタマイズするだけで、簡単にデザインを変えられます。コーディングの知識があれば、より理想的なデザインのECサイトを構築可能です。カスタマイズしてみたいと思うものの、カスタマイズ方法や難易度などがわからず悩む方もいらっしゃるでしょう。

この記事では、Shopifyのデザインのカスタマイズ方法や注意点、カスタマイズにおすすめのテーマやアプリを紹介します。Shopifyのデザインのカスタマイズを検討中の方は、ぜひご覧ください。

Shopifyのデザインのカスタマイズ方法は2通り

Shopifyのデザインのカスタマイズ方法は以下の2通りです。

• コード編集せずにカスタマイズする
• コード編集をしてカスタマイズする

HTMLやCSSなどの知識がない場合は、コード編集なしのカスタマイズ方法をチェックしましょう。

コード編集なし

管理画面のテーマエディタを使うと、コードを編集せずにデザインをカスタマイズ可能です。独自のカスタマイズとはいきませんが、レイアウトやテーマカラーなどを変更できます。コード編集が必要ないため、初心者やコード編集が不安な方におすすめです。

コード編集あり

コードを編集するスキルがあると、より細かくデザインをカスタマイズできます。コード編集にはコーディングの知識が必要なため、作業は難しくなるものの、オリジナルのデザインを作れるのが魅力です。

【コード編集なし】Shopifyのデザインテーマのカスタマイズ方法

コード編集せずにShopifyのデザインテーマをカスタマイズする方法は、以下のとおりです。

• テーマを選択する
• テーマエディタを起動する
• テーマやコンテンツを編集する

コーディングの知識がなくても、簡単にテーマデザインをカスタマイズできます。

テーマを選択する

テーマの選択は、Shopifyの管理画面から設定可能です。Shopifyの初期設定では、無料テーマの「Dawn」が設定されています。

1. 管理画面の「オンラインストア」をクリック
2. 「テーマライブラリー」をクリックしてテーマを選択
3. テーマを選び、「テーマライブラリーに追加する」をクリック

2.の「テーマライブラリー」で無料テーマを選ぶ場合は、「無料のテーマを探す」をクリックします。有料テーマを選ぶ場合は、「テーマストアに行く」をクリックし、テーマストアでテーマを選択しましょう。

テーマエディタを起動する

テーマエディタを使うと、管理画面からテーマデザインをカスタマイズ可能です。

管理画面で「テーマライブラリー」→ 「カスタマイズ」の順にクリックすると、テーマエディタが起動します。テーマエディタでは、テーマの基本的な配色やフォントの変更、コンテンツの追加や削除などのカスタマイズが可能です。

テーマやコンテンツを編集する

テーマエディタを使って、テーマやコンテンツの設定・編集をします。

テーマエディタで「セクションを追加」を選択すると、ストアのページレイアウトや外観を決めるブロックをカスタマイズ可能です。

例えば商品セクションでは、商品ページの外観を決められます。動的セクションの追加や配置場所の変更、削除も可能です。さらにテーマ設定では、サイトの配色やフォントなどを変更でき、変更した内容はストア全体に適用されます。

【コード編集あり】Shopifyのデザインテーマのカスタマイズ方法

コード編集をせずにデザインテーマをカスタマイズする方法は、初心者でも簡単な一方で、細かい調整ができないため、実現したいデザインにならない場合があります。そんなときは、コードを編集するとShopifyのデザインテーマを理想の形にカスタマイズ可能です。

HTMLやCSS、Liquidのコーディング技術が必要

コード編集をしてデザインテーマをカスタマイズするためには、HTMLやCSS、Liquidの基本的なコーディングの知識や技術が必要となります。HTMLとCSSは、他のサイトでも使われる標準的なプログラミング言語で、LiquidはShopify独自のテンプレート言語です。HTMLやCSSの基本的な知識があれば、Liquidも充分に理解できるでしょう。

テーマコードを編集する

HTMLやCSS、Liquidのコーディング知識をもとにShopifyのテーマコードを編集して、デザインテーマのカスタマイズが可能です。テーマエディタを使ったカスタマイズに比べて、より細かくカスタマイズできます。

管理画面から「オンラインストア」→「テーマ」→「アクション」→「コード編集する」をクリックすると、コードエディタが表示されます。コードエディタでは以下のファイルが編集可能です。

高度なコード編集でフルカスタマイズする

高度なコーディングの知識があれば、サイトのフルカスタマイズも可能です。カスタマイズ作業をパソコンのローカル環境で行うと、最も自由にカスタマイズできます。

「Shopify Theme Kit」ツールなどを利用すれば、ローカル環境で作業した後、簡単にShopifyと連携可能です。ローカル環境で作業すると、テーマ全体を設定する以下の2つのファイルも編集可能となるため、ゼロからサイト設計をしてオリジナルのサイトを構築できます。

フルカスタマイズは本格的な開発となるため、専門の開発会社に依頼することも検討すると良いでしょう。

カスタマイズの自由度が高いおすすめのShopifyテーマ

Shopifyのテーマは、テーマによってカスタマイズの自由度が異なります。カスタマイズしやすいおすすめのShopifyテーマをまとめました。

【無料】Dawn

引用：Dawn

Dawnは、Shopifyストアにデフォルトで設定される無料テーマです。サイト内のすべてのページに商品コレクションやスライドショーなどのセクションを追加できます。

また、コンテンツを設定するブロックが細かく分解されていて、ドラッグ&ドロップで簡単にレイアウトを変更可能です。デザインの柔軟性が高いうえ、モバイルファーストに設計されており、処理速度が速い点もカスタマイズにおすすめといえます。

【有料】Prestige

引用：Prestige

Prestigeは、HTMLセクションを追加できる点が大きな特徴で、料金は350ドルです。Shopifyテーマのうち、HTMLセクションを追加できるのはPrestigeのみです。

HTMLセクションにHTMLやCSSを自由に埋め込むと、オリジナルコンテンツを追加できます。HTMLセクションは独立していて、他のセクションに影響を及ぼさないため、自由なカスタマイズが可能です。

【有料】Impulse

引用：Impulse

Impulseの特徴は、デフォルトでさまざまな機能が一通り揃っている点にあります。料金は350ドルで、Impulseに搭載されている代表的な機能は以下のとおりです。

• メガメニュー
• クイック購入
• 製品レビュー
• FAQページ
• 製品のフィルタリングと並べ替え
• お問い合わせフォーム

Impulseには上記の機能がすでに搭載されているため、レイアウトやデザインなどの軽微なカスタマイズのみで多くの機能を利用できます。

Shopify商品ページの編集・カスタマイズ方法

次は、Shopify商品ページの編集・カスタマイズ方法について解説します。

商品画像

商品ページに設定した商品画像は、管理画面からカスタマイズできます。商品画像を編集する方法は以下のとおりです。

1.管理画面で「商品管理」→「すべての商品」の順にクリックする

2.編集する商品を選択する

3.編集画面の「メディア」にある画像をクリック

4.画面左下にあるアイコンで画像を編集

5.編集が完了したら「保存する」をクリックして完了

アイコンで編集できるのは画像トリミングや描画、リサイズです。なお、複数の画像をリサイズする場合にはPhoto ResizeなどのShopifyアプリを利用すると、より簡単にカスタマイズできます。

購入ボタン

購入ボタンのカスタマイズ方法は、コード編集なしとコード編集ありの2通りあります。

コード編集なしで可能なカスタマイズは、以下のとおりです。

• ボタンの配色
• ボタンの文字
• ボタンの形（丸形・四角）

管理画面の「Buy Button」 をクリックして、編集したい商品データを選択すると変更できます。一方で、ボタンを押したときの挙動を変更したり、リッチテキストを利用したりする場合は、コード編集が必要です。

タイトルタグ・メタディスクリプション

タイトルタグとメタディスクリプションは、SEO対策の重要な要素です。

タイトルタグとメタディスクリプションの編集方法は、以下のとおりです。

• 管理画面で「オンラインストア」→「各種設定」をクリック
• 「タイトルとメタディスクリプション」→「ホームページタイトル」をクリック
• 表示させたいタイトルを入力
• 「ホームページのメタディスクリプション」にホームページの説明文を入力
• 「保存する」をクリックして完了

メタディスクリプションは、スマートフォンとパソコンで表示される文字数が異なり、スマートフォンは80文字程度、パソコンは120文字程度となっています。そのため、メタディスクリプションは80～120文字を目安に入力すると良いでしょう。

レビュー

商品レビューは、商品への信頼度を高め、ユーザーの購入ハードルを下げる重要な要素です。レビュー機能のあるテーマを使用している場合、管理画面のテーマエディタから商品ページに表示させられます。レビュー機能がないテーマを使用している場合は、レビューアプリの利用を検討しましょう。

問い合せページ

問い合せページに入力項目やプルダウンなどを追加するためには、Shopify独自のテンプレート言語であるLiquidを使って、コード編集をする必要があります。

1. 管理画面の「オンラインストア」→「テーマ」→「コードの編集」をクリック
2. 「Templates」→「page.contact.liquid」を選択し、コードをコピー
3. 「新しいtemplateを追加する」をクリック
4. 「目的」で「page」を選択し、「名前」は任意の名前を入力
5. Liquidファイルが生成されたら、先ほどコピーしたコードを張り付け

より簡単に問い合せページをカスタマイズしたい場合は「Improved Contact Form」などのShopifyアプリの導入も検討しましょう。

クロスセルの仕組みの導入

クロスセルとは、商品購入を検討中のユーザーに、別の商品をすすめて購入に誘導する販売手法を指します。例えば「○○円以上の購入で送料無料」は、よく見られるクロスセルの手法です。商品ページでその商品の関連商品を表示させると、効率よく売上アップに繋がります。

クロスセルの仕組みは、Shopifyアプリストアからアプリをインストールすると導入可能です。例えばShopifyアプリの「Propel Upsell & Cross‑sell」を追加すると、ある商品を購入したユーザーに向けて別の商品をポップアップ表示できます。

Shopifyはアプリでもカスタマイズ可能！おすすめアプリ10選

本章では、カスタマイズにおすすめのShopifyアプリを紹介します。Shopifyでは、必要な機能をアプリで追加すると、さまざまなカスタマイズが可能です。

アプリはShopifyアプリストアで検索できます。アプリは手軽に追加できる反面、インストールしすぎるとファイルの読み込みに時間がかかり、サイト表示の速度が落ちてで離脱に繋がります。そのため、厳選してアプリを追加するようにしましょう。

定期購買

引用：定期購買

定期購買は、商品の定期購入に必要な機能が網羅的に揃えられたアプリです。定期購入のスキップや解約、再開、配達日の変更など、ユーザーのさまざまな要望へ対応可能です。

会員ランク機能や初回割引設定、送料無料設定など、売上アップにつながる機能も多数搭載されています。サポートにはECのプロフェッショナルが揃っており、日本人がサポートする点も安心です。

どこポイ

引用：どこポイ

どこポイは、ECサイトにポイント機能を搭載できるアプリです。ユーザーごとにポイントが付与され、貯まったポイントを購入時に利用できます。

会員登録やキャンペーンなどの商品購入時以外のポイント付与や、ポイント付与率の変更も可能です。サポート機能が充実しており、導入時だけでなく導入後も、ポイント活用の方法やカスタマイズなどについてメールやチャットで相談できます。

配送日時指定.amp

引用：配送日時指定.amp

配送日時指定.ampは、配送日時を指定する機能に特化したアプリです。デフォルトでヤマト運輸、佐川急便、日本郵便、福山運輸、西濃運輸に対応しています。発送完了メールに追跡番号を記載できるため、ユーザーが商品の配送状況を問い合わせ可能です。

置き配にも対応しており、不在が多いユーザーの購入ハードルを下げられます。他のアプリに比べ、管理画面がシンプルにデザインされており、簡単に設定可能です。

Matrixify

引用：Matrixify

Matrixifyは、データのインポート・エクスポートに特化したアプリです。 Shopifyのデフォルト機能では、CSVでのデータインポートとエクスポートにのみ対応しています。Matrixifyをインストールすることで、エクセルやGoogleスプレッドシートに対応可能です。

定期的に指定場所へデータをアップロードする機能もあり、データ管理を効率良く行えます。商品データを一括インポートする場合や、他のECサイトから商品データや顧客データを移行する場合などにもおすすめです。

Back In Stock: Restock Alerts

引用：Back In Stock: Restock Alerts

Back In Stock: Restock Alertsは、在庫切れとなった商品の再入荷をメールでユーザーに知らせるアプリです。Shopifyのデフォルト機能では、メルマガ配信のためのメールアドレス取得はできるものの、商品ページからのメールアドレス取得はできません。Back In Stockをインストールすると、在庫切れとなった商品のページに、再入荷通知受け取りフォームを自動表示させ、メールアドレスを取得できるようになります。

Wishlist Plus

引用：Wishlist Plus

Wishlist Plusは、ユーザーへお気に入り登録を促すアプリです。会員登録なしでお気に入りリストを作成できるため、初めてサイトを訪問したユーザーのサイト再訪にもつながります。

お気に入り登録された商品の在庫数や値下げ、クーポンなどさまざまな通知が可能です。また、メールアプリとの連携も可能で、例えばBack In Stockと連携すれば、在庫切れ商品をお気に入り登録しているユーザーへ再入荷を通知できます。

Quick Order Printer

引用：Quick Order Printer

Quick Order Printerは、商品ラベルや請求書、商品と同梱する明細書などを印刷できるアプリです。配送業者に提供するCSVデータのダウンロード機能も搭載されています。

複数のテンプレートが用意されており、デフォルトで会社ロゴや社名を挿入するなどのオリジナルの印刷設定も可能です。ユーザー自身が領収書を印刷したり、PDFで保存したりできるため、メールに領収書のダウンロードURLを添付して領収書を送ることもできます。

Judge.me Product Review

引用：Judge.me Product Review

Judge.me Product Reviewsは、商品レビューを搭載できるアプリです。商品詳細ページへレビューのウィジェットを設置したり、商品一覧ページで星評価を表示させたりできます。

レビュー数も表示されるため、ユーザーは一目で商品の評価がわかり、購入するときの参考にできます。ユーザーにメールを送信してレビューを依頼できるため、より多くのレビューを集めることにも役立つでしょう。

Page Speed Booster

引用：Page Speed Booster

Page Speed Boosterは、ページを読み込むスピードを改善して離脱率を下げることに役立つアプリです。ユーザーが次にどのような行動を取るのかを予想し、次にユーザーが訪れそうなページのコンテンツなどを先に読み込みます。コンテンツを読み込む時間を削減できるため、ユーザーのストレスを軽減でき、サイトの離脱率を下げられます。

Ship&co

引用：Ship&co

Ship&coは、送り状発行システムを搭載した配送管理アプリです。商品の受注情報を出荷待ちデータへリアルタイムで自動反映するため、受注データのCSVファイル出力が必要ありません。

例えばユーザーが配送先を変更した場合、リアルタイムでデータが反映され、入力ミスによる誤配や遅配を防ぐことが可能です。また、商品の送り状と請求書を一括発行できるため、繁忙期や出荷量が多い場合でも配送業務にかかる時間を削減できます。

Shopifyのデザインをカスタマイズするときの注意点

次に、Shopifyのデザインをカスタマイズするときの注意点をまとめました。

バックアップコピーを作成する

カスタマイズを行う前には、必ずバックアップを取りましょう。誤って編集してしまった場合でも、バックアップがあれば元の状態に戻せます。

バックアップの作成方法は以下のとおりです。

1. 管理画面の「オンラインストア」→「テーマ」をクリック
2. 該当のテーマを選択して「アクション」→「複製」を選択
3. CSVファイルでバックアップデータが作成される

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

利用できるサポートレベルを確認する

テーマの種類や、テーマが無料か有料かによって利用できるサポートが異なるため、必ず事前に確認しましょう。Shopifyの無料テーマを使用している場合、Shopifyの無料サポートを利用可能です。

契約プランがベーシックプラン以上であれば、最大60分まで無料サポートを受けられます。無料サポートが60分に到達し、さらにサポートが必要な場合は、Shopify Expertによる有料サポートを利用可能です。有料テーマの場合は、開発者によりサポートレベルが異なります。利用しているテーマのサポートドキュメントを確認するか、開発者に問い合わせてみましょう。

画像をアップロードするときの規定や要件を確認する

Shopifyでアップロード可能な画像は、ファイル形式とファイルサイズに制限があります。以下の条件に該当しない画像はアップロードできないため、事前に確認しましょう。

Shopifyのデザインのカスタマイズ例

Shopifyのデザインを実際にカスタマイズした例を紹介します。

モデラート株式会社

引用：SOÉJU

モデラート株式会社は、女性向けのパーソナルスタイリングサービスからファッションブランド、さらにビューティーブランドへと展開を続けている企業です。オリジナルブランドのSOÉJUのECサイトをShopifyで構築しました。

カラー展開のある商品について、カラーのサムネイルを選択すると写真が切り替わったり、カラーチップがグルーピングされたりするよう、カスタマイズを行いました。また、決済ページのカスタマイズによりユーザーの離脱を防ぐことに成功しています。

サントリーホールディングス株式会社

引用：RR COFFEE

サントリーホールディングス株式会社は、オンラインとオフラインの良さを融合した新しいビジネスモデルの確立に力を入れています。RR COFFEE事業は、特殊な焙煎方法「うなぎロースト」で焙煎した珈琲豆を、焙煎機を載せたキッチンカーとオンラインで販売するEC事業です。

個人情報の取り扱いなど各種法令の遵守や、会社として定めたセキュリティや品質の基準に沿ったサイト設計とするため、必要なカスタマイズを実施しました。

まとめ

Shopifyのデザインのカスタマイズ方法は、コード編集の有無によって異なります。また、Shopifyアプリをインストールして、必要な機能の追加も可能です。自社のECサイトの改善すべき箇所や必要な機能をふまえて、カスタマイズ方法を選択しましょう。

カスタマイズの範囲や必要な機能によって、カスタマイズの方法は異なります。コード編集の有無によるカスタマイズ方法の違いやShopifyアプリの特徴を理解し、最適なカスタマイズ方法を選択しましょう。自社によるカスタマイズが難しいときは、必要に応じてShopifyパートナーに相談し、理想のECサイト運営を実現しましょう。

Shopifyのデザインのカスタマイズはフルバランスにお任せください

Shopifyのデザインのカスタマイズは、カスタマイズの内容や範囲によってはコード編集が必要になるため、自社でのカスタマイズが難しい場合もあるでしょう。「カスタマイズしたいが自社で対応できない」と悩んでいる方は、お気軽にフルバランスにご相談ください。

フルバランスは、Shopify公式認定パートナーとして、数々の企業のShopify導入を支援してきました。あなたのECサイトに最適なカスタマイズを提案することはもちろん、Shopifyの導入から運用までワンストップで支援させていただきます。