ECサイト

最終更新日: 2023.02.13

Shopifyのデザインをカスタマイズする方法!コード編集や使い方も解説

Shopifyのデザインをカスタマイズする方法!コード編集や使い方も解説

Shopifyではソースコードをいじらなくても、デザインテンプレートをカスタマイズすることで簡単にデザインを変更できます。本記事ではデザインテーマ・商品ページの編集方法とその手順、そしてカスタマイズしやすいShopifyアプリについて、わかりやすく解説します。プログラミング未経験者やShopify初心者の方はぜひ参考にしてください。

三木 五月

監修者

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。

QUERYY(クエリー)編集部

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)編集部

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

目次

Shopifyのテーマのカスタマイズする方法は2つ

Shopifyのテーマのカスタマイズする方法は2つ

Shopifyのテーマをカスタマイズする方法は2つあります。

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

2つ目は、コード編集をしてカスタマイズする方法です。より凝ったカスタマイズをしたい人はコード編集をしてカスタマイズしましょう。コード編集をするので作業は難しくなりますが、独自のデザインを作り出すことができます

Shopifyでは、Liquidという独自言語が使用されています。Liquidは、HTMLの文中にコードを直接書くことで処理や出力を行います。カスタマイズする際は、このLiquidの基本を理解してから始める必要があることを覚えておきましょう。

【コード編集なし】Shopifyのテーマのカスタマイズ(デザイン設定・編集)

【コード編集なし】Shopifyのテーマのカスタマイズ(デザイン設定・編集)

それでは、初心者の方向けにShopifyのテーマのカスタマイズ方法について説明します。Shopifyでは、テーマを編集することで、自分で構築したストアのコンテンツ、レイアウト、文字体裁、色などをある程度まで、カスタマイズできます。それぞれのテーマにはコードを編集せずに、ストアの見た目と雰囲気が変更できる設定が、あらかじめ用意されているのです。

今回のテーマのカスタマイズでは、htmlやCSSといったコードを編集するのではなく、基本のカスタマイズ方法をご紹介します。今回解説する内容は、ECサイトの構築・運営をShopifyで実現するために、最低限抑えておく必要があります。初心者の方はしっかりと読んでポイントをおさえておきましょう。

まずは基本設定ということで、Shopifyのテーマを管理画面上でコードを編集せずにカスタマイズする方法です。具体的にテーマのカスタマイズは以下の手順で進めていきます。あらかじめ用意されている「テーマを選択」して、それからテーマエディタというツールを使用して、「配色」や「フォントスタイル」などの基本的な設定をします。

テーマの編集・カスタマイズを行う前にしておくこと

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

テーマを複製してバックアップコピーを作成しておく

テーマをカスタマイズする前に、設定を間違えた場合にすぐに元の状態に戻せるように、バックアップコピーを作成しておきましょう。オンラインストアでは、最大で20個のテーマを追加できます。そのため、すでに20個テーマがあり、新たに追加したい場合、既存のテーマを削除します。

管理画面ですでに20個のテーマを追加している場合、1つのテーマを削除し、別のテーマを複製しなければなりません。こちらは管理画面の「テーマページ」より、ストアのテーマを削除できます。

テーマを一度削除してしまうと、完全に削除され、復元できなくなりますので、注意してください。テーマを削除してから、また利用したいときには、再度テーマのダウンロードが必要です。

ちなみに、Shopifyでテーマストアから、テーマを購入すると、購入元のストアにテーマを使用できるライセンスが付与されます。購入したテーマを別のストアで利用する場合、Shopifyのサポートに問い合わせる必要があります。

ライセンスがないテーマについては、サポートの対象外となり、新機能がリリースされたりした場合に、アップデートの対象外となりますので、気をつけましょう。

テーマを複製する手順は以下のとおりです。

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

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

利用可能なサポートレベルを確認しておく

テーマで利用できるサポートレベルを必ず確認しておきましょう。基本的なカスタマイズに関しては、テーマ開発者のサポートを受けられます。ただし、大幅にテーマを変更する場合、テーマのサポートに関する追加リソースリストを確認しておきましょう。

大幅なテーマのカスタマイズに向け、サポートが必要な場合、ShopifyパートナープログラムでShopify Expertという認定パートナー企業が存在し、相談することが可能ですので、検討してみてください。

Shopifyのテーマには、無料テーマ、有料テーマの2種類があります。無料のテーマを使用している場合、サポートチームがサポートチュートリアルを使用することで、軽微な変更に対応可能です。大半のカスタマイズがサポート可能ですが、サポートできないカスタマイズもあります。

また、ベーシックプラン以上では、無料のデザインサポートを60分間受けることができます。サポートチームへ問い合わせし、概要を説明することで、2〜4営業日以内に対応可能となります。有料のテーマを使用している場合、そのテーマは外部サービスの開発者により作成したものになりますので、何かカスタマイズしたい場合、テーマ開発者へ直接問い合わせます。

テーマカスタマイズにおいて、サポートを受ける場合の手順は以下のとおりです。

  • 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  • 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  • [テーマアクション] をクリックします。
  • [ドキュメントを表示する] または [サポートを受ける] をクリックします。

画像アップロードの規定や要件を確認しておく

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

ストアで画像をアップロードできる場所は以下の2つです。

  • ファイルページに画像をアップロードする
  • テーマエディタで画像をアップロードする

ファイルページに画像をアップロードする時は、管理画面のファイルページから画像をアップロードできます。テーマの編集中にアップロードした画像にアクセスできるので便利です。テーマエディタで画像をアップロードする時は、テーマエディタを使い、画像を追加します。

手順は以下のとおりです。

  • 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  • 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  • テーマエディタツールバーで、画像を追加するセクションをクリックします。画像ピッカーを含むセクションを選択します。
  • [画像を選択する] をクリックして画像を追加します。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
  • 画像をクリックしてテーマ内で画像のプレビューを表示します。使用する画像を見つけたら、[選択] をクリックします。
  • [保存] をクリックします。

画像フォーマットとしては、以下のフォーマットに対応しています。

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

Shopifyでアップロードできる画像ですが、画像サイズとファイルサイズにおいてともに制限があります。具体的には以下の条件を超えると、アップロードできませんので、気をつけましょう。

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

テーマを選択する

それでは管理画面からテーマ選択をするまでの手順について説明します。

まずは、好みのテーマを選択してみましょう。

管理画面から、[オンラインストア] をクリックします。

デフォルトでは「Debut(デビュー)」というテーマが選択されています。

[テーマライブラリー] から、テーマを選択します。

「無料のテーマ」を選ぶと、管理画面上でShopifyの無料テーマを探すことができます。

お気に入りのテーマを選びましょう。

テーマを選んだら、スタイルを決めて「テーマライブラリーに追加する」をクリックします。

「テーマライブラリー」にテーマが追加されます。

「Shopify テーマストア」を選ぶと、別タブが開き、有料/無料のテーマを手に入れることができます。
レビュー数が多い、おすすめのShopifyテーマ、19選 レビュー数が多い、おすすめのShopifyテーマ、19選

テーマ選択のポイント

続いてテーマ選択のポイントについて整理します。Shopifyのテーマを選ぶ際に、ただ漠然と綺麗だからという理由でテーマを選ぶべきではありません。オンラインストアでは、デザインは非常に重要ですので、テーマが売上を左右するといっても過言ではありません。

メインとなる商品とイメージがマッチするテーマを選ぶ

テーマを選定するにあたり、最初に検討するべきポイントとして、メインとなる商品とイメージがマッチするテーマを選ぶということです。扱っている商品やジャンルにより、マッチするテーマというのは変わってきます。メインとなる商品が何で、どの程度販売するのかということを明確にしましょう。

販売する商品とテーマのイメージがマッチしないと、統一性がなくなり、コンセプトもずれていきます。商品の特徴を理解した上で、商品の見せ方やアピールをどのようにするのか、どのようなブランドで売り出すのかを整理してみてください。
ECサイトのコンセプト設計が必要な理由と設計方法・手順を解説 ECサイトのコンセプト設計が必要な理由と設計方法・手順を解説
【Shopify導入事例】ShopifyのおしゃれなECサイト49選 【Shopify導入事例】ShopifyのおしゃれなECサイト49選 第一印象(ファーストビュー)でユーザーの心をつかむために、ECサイトのデザインを工夫するのはとても重要です。ここでは各サイトの個性を巧みに表現し、目を引くデザインに仕上げた49のShopify導入事例をご紹介。各サイトの構成やデザインのポイントを解説します。
扱う商品が複数ある場合には、メインとなる一番販売したい商品を絞りましょう。その商品に力を入れてアピールできるようなテーマとしましょう。

商品を買ってくれるユーザー層とマッチするテーマを選ぶ

また、商品を買ってくれるユーザー層やターゲットも絞りましょう。そのターゲットとマッチするテーマを選ばなくてはなりません

具体的にはターゲットが若年層であれば、機能を充実させ、多くの商品から自分好みの商品を選べるようにするとよいでしょう。逆に年齢層が高ければ、デザインはシンプルにして、機能を最小限にとどめ、商品を迷うことなく選べるようにします。

機能要望・要件を叶えられるテーマを選ぶ(ソート機能・カラム・カート表示など)

当然見た目は重要ですが、オンラインストアの機能面もこだわりましょう。選択したテーマであなたが必要とする機能が盛り込まれているかを確認してください。具体的には、商品を特定の条件で絞り込むソート機能、商品を適切な量で陳列させるカラム表示、商品をカートに追加すると画面が横にスライドするカート表示機能などがあれば、購入するまでをサポートできます。

シンプルなテーマをなるべく意識して選ぶ(汎用性が高い)

凝ったデザインのテーマでは、すぐに欲しい商品を見つけられず、最終的に諦めて離脱してしまう方も多いです。そのため、なるべくテーマはシンプルで迷わないデザインにすると良いです。

ポイントとしては、メインとなる商品が見つけやすいか、最低限の情報でシンプルにまとめられているか、商品の特徴をわかりやすく伝えられるか、写真が見やすいかなどを意識してください。
レビュー数が多い、おすすめのShopifyテーマ、19選 レビュー数が多い、おすすめのShopifyテーマ、19選
【Shopify導入事例】ShopifyのおしゃれなECサイト49選 【Shopify導入事例】ShopifyのおしゃれなECサイト49選 第一印象(ファーストビュー)でユーザーの心をつかむために、ECサイトのデザインを工夫するのはとても重要です。ここでは各サイトの個性を巧みに表現し、目を引くデザインに仕上げた49のShopify導入事例をご紹介。各サイトの構成やデザインのポイントを解説します。

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

テーマエディタを使って、配色やフォントなどの基本的な設定をしていきましょう。

以下の手順でテーマエディタを起動します。

  • [テーマライブラリー] から、 [カスタマイズ] を選択します。
  • 「テーマエディタ」が起動しますので「カスタマイズ」をクリックします。
  • 「テーマエディタ」が起動しました。

オンラインストアの基本的な見た目と雰囲気を定義するテーマを選択すると、独自のブランドに合わせてテーマをカスタマイズできます。テーマエディタを使用することで、管理画面からテーマのコンテンツおよび設定をカスタマイズできます。

テーマエディタには、コンテンツの追加と削除、および設定の変更に使用できるテーマプレビューとサイドバーまたは編集メニューが含まれています。

テーマやコンテンツの追加・設定・編集する

以下の手順でテーマやコンテンツの設定・編集ができます。

  • 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  • 編集するテーマを見つけて、[カスタマイズする] をクリックします。

ページのタイプにより、テーマセクションは異なります。最初にテーマエディターを開くと、ホームページのセクションが表示されます。他のページのセクションにアクセスするには、ページ上部のドロップダウンメニューからページのタイプを選択します。

テーマエディタを使用して、テーマセクションを選択して編集することで、ストアに表示されるコンテンツを編集することができます。一般的なテーマ設定を使用して、ストアの見た目と雰囲気、および機能を変更することもできます。

テーマコンテンツはセクションを使用して作成されています。セクションとは、オンラインストアのさまざまなページのレイアウトと外観を決定するカスタマイズ可能なコンテンツブロックのことです。セクションには静的、動的の2種類があります。

静的セクションとは、オンラインストアの所定のロケーションに表示されるセクションです。これらのセクションを削除または再配置することはできません。静的セクションには、商品ページやコレクションページなどのページ上で、ヘッダー、フッター、ナビゲーションセクション、またはコンテンツセクションが含まれる場合があります。

たとえば、商品セクションでは、オンラインストアの各商品ページの外観を決定します。

動的セクションはオプションセクションで、ホームページのレイアウトをカスタマイズするために使用することができます。各テーマには、選択する動的セクションの固有のセットがあります。ストアのホームページで、動的セクションを追加、再配置、また削除してページレイアウトを作成することができます。ホームページには最大25個の動的セクションを追加できます。

また、テーマ設定を使用することで、オンラインストアの文字体裁、色、SNSのリンク、およびチェックアウト設定を変更することができます。テーマセクションによっては、そのセクションに関連するテーマ設定を調整することもできます。セクション内のテーマ設定に加えた変更は、オンラインストア全体に適用されます。

【コード編集あり】Shopifyのテーマコードをカスタマイズ

【コード編集あり】Shopifyのテーマコードをカスタマイズ

これまでは、コード編集なしのテーマ編集について説明してきました。しかし、テーマを使って運用していると、どうしても既存のテーマでは満足できない、どうしてもやりたいことが実現できない、オリジナルのデザインを使いたい、CSSを調整したい、独自の処理をしたいといった要望がでてくると思います。

このように、さらに細かくテーマをカスタマイズするために、管理画面でテーマコードを編集することもできます。特に、HTML、CSS、Liquidについて理解していれば、さらに細かいカスタマイズが可能になります。コードの一部だけを限定的に修正する場合は、テーマコードの編集が便利です。

また、テーマを一部ではなく、大幅に変更したい場合は、テーマをダウンロードして、ローカル上でコードエディタを使って編集することもできます。本格的にテーマを改修したり、ページを丸ごとカスタマイズするのであれば、こちらの方法が適しています。アップロードもまとめてできるので、効率的にテーマを編集できます。

Shopifyのテーマではフォルダ・ファイル名が固定となっています。また、フォルダ構造も決まっており、ファイルやページは連動しているため、それぞれの役割を理解すれば、修正箇所がわかります。

ただし、テーマコードを編集していくには、HTML、CSS、Liquidの知識が必要になります。どうしてもカスタマイズしたいことがあるのに、プロでもないし、言語の知識もないし、全然わからないという方もご安心ください。ぜひ、Shopify認定パートナーのニュートラルワークスにご相談ください。

テーマを複製し、バックアップをとる

それでは、テーマをカスタマイズしていきましょう。テーマコードを編集する場合、テーマの複製をしてバックアップを取ります。これは必要に応じて、コードを編集した後に、いつでも初期の状態へ戻れるようにするためです。

  • ホームで「テーマをカスタマイズする」をクリックする
  • 編集したいテーマの「アクション」をクリックする
  • 「複製する」をクリックする

これにより、途中で「元に戻したい」という状態になったとしても、変更を破棄して途中から再スタートできるようになります。

テーマコードを編集する

Shopifyの管理画面はわかりやすく、必要な機能をアドオンとして追加する設計であり、シンプルでありながら、カスタマイズ性の高いプラットフォームです。

それでは、以下の手順で実際にテーマコードを編集してみましょう。

  • 管理画面から [オンラインストア] > [テーマ] の順に移動
  • [アクション] > [コードを編集] をクリック
  • 「コードエディタ」にてファイルを編集する
  • 編集したいディレクトリ配下の対象ファイルを選択し、編集する

コード編集をする際に注意するポイントは以下の3点です。

CSSの調整をする際に、クラス名などが適用される要素を横断的に検索できる機能があり非常に便利です。この機能により、効率的にコーディングができます。

CSSファイルの中に2バイト文字を記述することができません。そのため、日本語のフォント名も1バイト文字で指定しなければなりません。

Shopifyのテーマをゼロから開発するには時間がかかりますが、好みのテーマをカスタマイズしていくことで、時間短縮をはかれます。デザインを確認するには、Shopify上でテーマを適用したものを見るのが効率的です。

Shopifyの商品ページの設定・編集・カスタマイズをする

Shopifyの商品ページの設定・編集・カスタマイズをする

ここからは、Shopifyの商品ページで重要となる設定項目について見ていきます。今までご紹介したサイト全体のテーマカスタマイズも重要ですが、ユーザーが商品を購入する際に必ず見られる商品ページのカスタマイズです。商品ページは購買に直接繋がる重要なページとなりますので、そのカスタマイズ方法を習得し、満足いくページを作りましょう。

商品ページのカスタマイズでは以下7つの項目をおさえてください。

  • 商品名を設定する
  • 商品画像を設定する
  • 商品説明を設定する
  • 購入ボタンを設置・設定する
  • SEOの設定をする(タイトル・ディスクリプションタグ)
  • 商品レビューを追加する
  • クロスセルの仕組みを導入する

商品名を設定する

販売する商品名を設定しましょう。ここでは消費者の目を引く、キャッチコピーを考えることが重要になります。さらに、GoogleやYahoo!検索で上位表示するためのSEO対策として、商品名とブランド名もセットで記載しましょう。商品名ではh1タグを設定しておくとさらによくなります。
売れる商品説明、コピーの書き方のコツ。ユーザーに響く、魅力的な商品PR方法 売れる商品説明、コピーの書き方のコツ。ユーザーに響く、魅力的な商品PR方法 ECサイト、モールで販売している商品説明、コピーにはこだわっていますか?商品説明、コピーを変えるだけで売り上げは必ず変わります。売れる商品説明、コピーの書き方、コツをご紹介します。

商品画像を設定する

オンラインショップでは実際に商品を手に取ることができないので、商品画像は非常に重要です。

ただの商品画像ではなく、利用者の視点で、その商品を使用した画像も複数枚あると、より使用した際のイメージがわき、購入に近づきます。最初のイメージにより、その商品について詳しく見ていくかどうかも決めるため、品質の高い画像をそろえて、なるべく離脱させないようにさせましょう。

商品説明を設定する

商品画像も重要ですが、商品の特徴を説明する商品説明も気をつけるポイントです。まずは、要点をまとめて、商品の特徴が一言で伝わるように記載してください。そのあとで、商品の詳細について、背景、想いなどを続けましょう。さらに、商品を購入したことで得られる価値をイメージできる文章であれば、さらに魅力的になるでしょう。

また、商品説明の文章が長くなると、離脱する可能性が高くなるので、あくまでも読み手の負担にならないように簡潔にまとめてください。

購入ボタンを設置・設定する

Shopifyでは購入ボタンのカスタマイズが可能になっています。購入ボタンのデザイン、配置についても、購買へつながるかどうかの重要なポイントです。実際のカスタマイズ内容としては、ボタンの設置位置、サイズ、フォントなどがあり、さらにボタンを押した際のアクションまでも指定できるのです。

他のECサイトを参考にして、実際にユーザーが閲覧する際の行動をイメージしながら、最も購買意欲が高くなるタイミングで購入できるように、最適なボタンを配置しましょう。
Shopifyのカゴ落ち(カート放棄)対策を解説!例文も紹介 Shopifyのカゴ落ち(カート放棄)対策を解説!例文も紹介

SEOの設定をする(タイトル・ディスクリプションタグ)

商品名や商品説明の設定と関連しますが、Shopifyの商品編集画面では、SEO対策のための設定が可能です。具体的には検索エンジンの検索結果で、タイトルと説明文として表示される、meta titleとmeta descriptionです。

一般的なWebサイトを作成する時と同じように、商品のタイトルや説明文で検索キーワードを狙い、思わずクリックしてしまうような文章にすれば、SEOの効果をさらに高めることができるのです。

商品レビューを追加する

商品のレビューを追加することで、商品の購入率があがります。商品レビューがあれば、使っているところを具体的にイメージしやすく、信憑性も高くなり、安心して購入できるからです。

商品のレビューを商品ページに表示するためのアプリもアプリストアにあり、無料で利用可能です。レビューを表示するだけではなく、フォームのカスタマイズやレビューをCSVでインポート・エクスポートもできます。レビューは数が多ければ多いほど、様々な観点でレビューされることになり、新しくその商品を購入を検討する方にとっては、使用イメージがわきます。

ECサイトで、商品レビューは非常に重要な役割があり、商品レビューを追加することで、全体の売上をも左右します。すでにECサイトをお持ちの方はレビュー結果をShopifyへ移行することも可能です。積極的に商品のレビューを取り入れましょう。

クロスセルの仕組みを導入する

アップセルとは、商品の購入を検討しているユーザーに対して、より高額なモデルに乗り換えてもらうように、顧客単価を向上させる販売手法です。

それに対して、クロスセルとは、商品の購入を検討しているユーザーに対して、別の商品もセットや単体で購入してもらうように誘導する販売手法です。その商品の関連商品を提示させることで、効率よく販売促進が狙え、売上の向上へ繋がります。ECサイトのクロスセルの具体例としては、「○○円以上の購入で送料無料!」といった方法などがあります。

このクロスセルの仕組みを導入できるというのも一つの重要なポイントです。こちらの機能についても、アプリストアからアプリを導入することで、簡単に商品ページにクロスセルを取り入れることができます。オンラインストアでクロスセルを意識的に活用すれば、購入機会を自然に増やし、顧客単価を効率よくあげることができます。

Shopifyの設定・編集・カスタマイズに使えるアプリ

Shopifyの設定・編集・カスタマイズに使えるアプリ

Shopifyでカスタマイズできるのは、これまで説明してきた、テーマだけではありません。

Shopifyにはテーマ以外にもアプリという、拡張機能が充実しています。Shopifyが選ばれる理由の一つとして、この拡張性の高さもあります。Apple storeやGoogle playと似ていて、Shopifyで必要な機能を、アプリとしてインストールすることで、オンラインストアを自分好みにカスタマイズできるのです。

Shopifyではこの機能の拡張性を支えているのが、「Shopify app store」になります。オンラインストアでダウンロードできるアプリの数は数千種類以上あります。Shopifyはクラウド型のプラットフォームですので、毎日新しいアプリが更新されています。

例えば、よりきめ細かい検索やオプション入力をカスタマイズする機能など、自分がショップによっては「これ欲しい!」と思える、かゆいところに手が届くアプリも多数あります。

以下の記事でもおすすめのアプリを紹介しているので、是非ご覧ください。
Shopifyアプリ(プラグイン)おすすめ14選!探し方も解説 Shopifyアプリ(プラグイン)おすすめ14選!探し方も解説 Shopify導入のメリットの1つに豊富なアプリがあります。ただ、アプリの数が多すぎてどれを選べばいいかわからない、英語圏で作られたアプリが多い…そんな悩みをお持ちの方に厳選した14アプリを紹介します。

ShopifyのSEO対策とは?SEO対策アプリも紹介 ShopifyのSEO対策とは?SEO対策アプリも紹介 世界No.1のECプラットフォーム「Shopify」はSEOに強いことも人気の理由です。Shopify導入後にどのようなSEO対策を取ればいいのか、SEO対策に導入したいおすすめプラグインをご紹介します。
アプリは数クリックでインストールができ、インストールすると、すぐに使えるものも多く、設定も簡単になっています。もし、アプリストアに自分の欲しい機能がない場合は、オーダーメイドのカスタムアプリを作ることもできます。

ただし、アプリを多くインストールすると、ファイルの読み込みに時間がかかることになり、結果的にサイト表示のスピートが落ちてしまい、離脱にも繋がります。アプリは厳選してインストールし、不要なアプリは削除しておくようにしましょう。さらにまだ英語のアプリが標準となっているため、アプリによっては、操作画面で日本語ではなく英語表示になることもあります。

Shopifyのオンラインストアを作る上で、アプリの拡張性は欠かせません。

アプリは様々な機能を手軽に追加できますが、アプリとテーマの相性が悪く不具合が発生することもあります。オンラインショップをなるべくシンプルに、使いやすくするためにも、最低限必要な機能だけを取り入れるようにしてください。また、導入してリリースする前に、アプリの仕様を調査し、オンラインショップで運用して問題ないかをじっくり検討しましょう。
Shopifyアプリ(プラグイン)おすすめ14選!探し方も解説 Shopifyアプリ(プラグイン)おすすめ14選!探し方も解説 Shopify導入のメリットの1つに豊富なアプリがあります。ただ、アプリの数が多すぎてどれを選べばいいかわからない、英語圏で作られたアプリが多い…そんな悩みをお持ちの方に厳選した14アプリを紹介します。

また、Shopifyテーマの設定・変更方法やデザインの編集方法を他にも参考にしたい方は、トランスコスモスのこちらの記事もご参考にしてみてください。

Shopifyカスタマイズのまとめ

Shopifyカスタマイズのまとめ

いかがでしたでしょうか。Shopifyのカスタマイズのポイントについて理解いただけたでしょうか。Shopifyでは、管理画面上からテーマの設定・編集など簡単にカスタマイズできます。テーマをカスタマイズする際は、HTMLやCSSといったコード編集なしでもカスタマイズできる部分は多いです。さらにコード編集をすれば、更に自由度の高いカスタマイズが可能になります。

オンラインストアのテーマが確定したら、商品ページを作り込みます。商品ページは最重要ページとなるため、設定・編集などのカスタマイズ方法と手順は整理して理解しておきましょう。そして、商品ページをさらに充実させるために、拡張機能であるアプリがあります。アプリを使うことで、より細かいカスタマイズを行うことができるようになります。

ShopifyでECサイトを構築したい、カスタマイズしたい、更に売上を伸ばしたい、という方はニュートラルワークスまでお問い合わせください。

なお、株式会社For A-careerさん運営のNoCode DBでは「Shopifyテーマのカスタマイズ・コード編集を初心者向けに解説!」という記事で、初心者向けにコードの編集方法を解説していますので参考にしてみてください。

監修者紹介

三木 五月

三木 五月

代表取締役社長

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。