Shopify には、現在の e コマース プラットフォームの中でも最もデザイン性に優れたテーマがいくつかあります。デザインについて話すとき、Shopify テーマの視覚的な側面だけについて話しているわけではありません。柔軟性、機能性、使いやすさを実現する全体的なアーキテクチャについて話しています。
これらすべての属性は、Shopify テーマ エディターを効果的に使用して、ブランド独自の外観と雰囲気を実現する方法を知ることで実現できます。
この記事では、Shopify 独自のテーマ エディターを紹介し、Shopify テーマを向上させるさまざまな方法を説明します。では、始めましょう。
Shopify テーマエディターとは何ですか?
Shopify テーマ エディターは、オンライン ストアの所有者が直感的なドラッグ アンド ドロップ機能を使用してストアの外観とレイアウトをカスタマイズできる、プラットフォームのユーザー フレンドリーなツールです。つまり、コード編集スキルが不要なため、初心者でも視覚的に魅力的でプロフェッショナルな外観の Shopify ストアを作成できます。
したがって、テーマ エディターの使い方を理解することは、あなたのような Shopify ストア所有者にとって重要なスキルです。これにより、e コマースの旅の初めに Web 開発者や Web デザイナーにお金をかけずに、必要な視覚的な変更を加えることができるようになります。
Shopify のテーマエディターはどこにありますか?
Shopify テーマをカスタマイズする場合、最初に行う必要があるのは、テーマ エディターを開くことです。幸いなことに、Shopify 管理画面は適切に設計されているため、すべてが簡単に見つかります。
Shopify ストア管理画面で、 「オンラインストア」メニューをクリックし、 「テーマ」を選択します。
これにより、インストールされているすべてのテーマを見つけることができるタブが開きます。次に、 「カスタマイズ」をクリックしてテーマ エディターを開きます。
テーマ エディターは次のようになります。
Shopifyテーマを編集する際に覚えておくべきこと
テーマ エディターから Shopify ストアを編集するときに覚えておくべきことがいくつかあります。これらのことは、安全性を念頭に置いてカスタマイズを行うのに役立ち、オンライン ストアで不要なミスを回避できます。
以下にそのいくつかを挙げます。
ライブテーマを直接編集しないでください
上の画像の手順は、ライブの Shopify ストアのテーマを編集する方法を示しています。ただし、カスタマイズ プロセスに安全性の要素を追加するには、ライブのテーマを複製し、その複製コピーで編集を行うことをお勧めします。
プロセスは非常に簡単です。カスタマイズボタンの横にある3 つのドットのボタンをクリックし、ドロップダウン オプションで複製をクリックします。その後、テーマのコピー (No. 3) が自動的に作成されます (ストアのコンテンツによっては、数秒から数分かかる場合があります)。
複製したテーマのセクション内で、 「カスタマイズ」ボタンをクリックすると、Shopify テーマ エディターが開きます。
テーマの複製コピーを編集することで、編集中に Shopify ストアで何も壊れないことを保証できます。テーマをカスタマイズした後、複製テーマ セクションで[公開] をクリックすると、それがストアにプッシュされ、現在のテーマが置き換えられます。
テーマエディタで他のShopifyテーマを無料で試すこともできます
Shopify ストアで使用できるテーマは 1 つだけですが、複数の (最大 20 個) Shopify テーマをインストールして、試用したりカスタマイズしたりすることができます。この試用段階では、まだテーマの料金を支払う必要はありません。有料テーマをライブ ストアに公開することにした場合にのみ、料金を支払う必要があります。
したがって、Shopify テーマ ストアにアクセスして、試してみたいテーマを選択できます。例としてShine テーマを使用しましょう。 [テーマを試す]ボタンをクリックするだけで、テーマ ライブラリにインストールされます。
Shine テーマが Shopify ストアにインストールされ、テーマ エディターで確認できるようになりました。
Shopifyテーマを変更する2つの方法
Shopify ストアをカスタマイズする方法は 2 つあります。
- テーマエディタでオンラインストアを視覚的に編集することで
- テーマコードエディタを使用してShopifyテーマファイルを編集する
2 つの方法を比較して、どちらが自分に最適かを判断しましょう。
テーマエディタの使用
前述のように、Shopify テーマ エディターには、初心者からプロまで、あらゆるタイプのユーザーに対応できるユーザーフレンドリーなインターフェースがあります。
フォント、レイアウト、タイポグラフィ、画像などの視覚的な変更をストアに実装する場合は、テーマ エディターを使用するのが最適です。ほとんどのユース ケースでは、適切なデザイン知識と組み合わせれば、テーマ エディターだけでユニークな外観のストアを作成できます。
さらに、テーマ エディターは Shopify テーマのアーキテクチャを変更するものではないため、より安全に使用できます。そのため、テーマは安定した状態を保ち、機能エラーが発生する可能性はほとんどありません。
ヒント: テーマ コード エディターを使用せずにさらに高度なカスタマイズを行う場合は、PageFly などの Shopify アプリを使用できます。このアプリは使い慣れたインターフェイスを備えていますが、アニメーションやその他の効果など、より高度なデザインが可能です。
この記事の後半では、アプリを使用して Shopify テーマをカスタマイズする方法について詳しく説明します。
テーマコードエディタの使用
一方、Shopify テーマ コード エディターもあります。このタイプのエディターは、Shopify テーマ ファイルと Shopify で使用されるプログラミング言語に精通している経験豊富な Web 開発者やデザイナーに最適です。
テーマ コード エディターは、Shopify テーマの潜在能力を最大限に引き出し、選択したテーマにネイティブではない機能も追加できると想像してください。つまり、コーディング方法を知っていればの話です。
しかし、この方法を採用したい場合、自分で行う必要はありません。Shopify の専門家に協力してもらい、コードを編集してもらい、より安全で効率的なカスタマイズを実現できます。
ご興味があれば、コード エディターを開く方法は次のとおりです。
- Shopifyテーマエディターに移動します
- 画面の右上にある3つのドットのボタンをクリックします
- ドロップダウン機能からコードの編集を選択します。
テーマ コード エディターが開きました。左側のパネルにテーマ ファイルがあります。
Shopifyのテーマエディターの簡単なツアー
Shopify テーマ エディターは複数の部分で構成されており、これらすべてのコンポーネントの機能を理解することは、作業を効率化するために不可欠です。この知識があれば、Shopify ストアにさらに多くのカスタマイズを実装して、目立つブランドをキュレートすることもできます。
テーマエディターのすべての部分を見てみましょう。
01. セクション、テーマ設定、アプリの埋め込み
Shopify テーマ エディターの左端にあるこれら 3 つのボタンにはさまざまな用途があり、いずれもストアのカスタマイズに不可欠です。
セクション
セクション ボタンには、テーマ エディターを開くたびに表示される主要なインターフェイスが含まれています。このボタンを使用すると、特定のページのコンテンツ階層のインタラクティブな概要が表示されます。
さらに、ここではストアのビジュアル レイアウトをカスタマイズできます。Web ページのセクションをドラッグして階層を変更し、編集時にメイン画面で変更内容を確認できます。
テーマ設定
テーマ設定ボタンを使用すると、カラースキーム、タイポグラフィ、アニメーション、ファビコン画像など、ストアのさまざまな要素をカスタマイズするのに役立つツールにアクセスできます。テーマファイルに触れずにストアに高度な変更を加えたい場合は、このメニューからカスタム CSS スニペットを追加することもできます。
また、セクション メニューと同様に、テーマ エディターのメイン画面で変更内容を確認できます。
アプリの埋め込み
一部の Shopify アプリは、オンライン ストアで使用する前に有効化する必要があります。新しくインストールしたアプリを有効化するように求めるプロンプトが表示されたら、アプリ埋め込みメニューに進みます。
アプリの横にあるスイッチを切り替えるだけで、アプリが有効になります。その後、新しくインストールしたアプリを使用できます。
02. メイン画面（またはプレビュー画面）
メイン画面またはプレビュー画面は、テーマ エディターを使用して Shopify ストアをカスタマイズする際の視覚的な参照として機能します。ストアの要素を変更するたびに、この画面に変更が自動的に反映されるため、推測する必要がなくなります。
メイン画面の優れた点は、実際の Shopify ストアと同じようにインタラクティブであることです。メイン画面のメニュー ボタンをクリックすると、そのページが読み込まれます。この細かい機能により、ユーザーはシームレスなカスタマイズ エクスペリエンスを得ることができます。
あるページから別のページに切り替えると、選択したページのコンテンツ階層を反映して「セクション」ボタンの内容も変更されることに注意してください。
03. 設定パネル
ブラウザ画面の右端にある設定パネルは、Shopify テーマ エディターのもう 1 つの主要機能であり、デザイン プロセスを簡素化するのに役立ちます。
このパネルは、テーマ エディターのセクション メニューをナビゲートするときに特に便利です。ページのセクションをクリックすると、対応する設定セットがこのパネルに表示されます。ここで、各セクションの要素を微調整できます。
シングルサイドバーとダブルサイドバーモード
テーマ エディターを使用するときには、設定パネルの位置を変更するシングル サイドバー モードとダブル サイドバー モードの 2 つのオプションがあります。コンピューターの画面サイズによっては、これらのモードが役立つ場合があります。
ダブル サイドバー モードでは、上の画像に示すように、画面の右側に設定パネルが表示されます。これは、大きな画面でのテーマ エディターのデフォルト ビューになります。
ただし、ラップトップなど、小さい画面で Shopify テーマを編集している場合は、シングル サイドバー モードを使用すると、設定パネルがビューから削除されるため、メイン画面をより多く表示できます。
シングル サイドバー モードに入るには、設定パネルがなくなるまでブラウザを拡大するだけです。
そうすると、セクション パネルから設定パネルにアクセスできるようになります。その後、テーマ エディターでセクションをクリックすると、同じ場所に設定パネルが表示されます。
単一のサイドバーを使用すると、小さい画面で編集するときに画面スペースを節約できるだけでなく、プレビュー画面がわずかに拡大され、少し大きく表示できるようになります。
04. ストアフロントセレクター
テーマ エディターの上部中央に、ストアフロントのドロップダウン セレクターがあります。オンライン ストアを始めたばかりの場合は、デフォルト オプションのみが表示されます。したがって、心配する必要はありません。
オンライン ストアに複数のストアフロントがある場合のみ、このボタンをタッチする必要があります。そうすることで、選択したストアフロントのみを編集できます。
05. ページセレクター
ストアフロント セレクターの横には、ページ セレクターがあります。このドロップダウン メニューには、オンライン ストアのページのリストが表示されます。これにより、Shopify ストアでカスタマイズしたいページにすばやくアクセスできます。
06. ページインスペクタ
この小さな矢印アイコンは、ページ インスペクターと呼ばれます。無効にすると、メイン画面はライブ ストアのように動作し、ページ ボタンをクリックすると、他のページにリダイレクトされたり、意図された機能が実行されます。
一方、インスペクターを有効にすると、メイン画面からセクションをクリックして、その設定を簡単に表示できます。
07. 画面モード
インスペクター ボタンの横には、Shopify テーマ エディターの画面モードがあります。テーマ エディターのデフォルトの表示はデスクトップ モードで、コンピューターから見たときの Web サイトの外観が表示されます。
真ん中のボタンはモバイル画面モードです。このボタンをクリックすると、スマートフォンから見たときのウェブサイトの外観が表示されます。
最後に、フルスクリーン モードでは、プレビュー画面がラップトップまたはデスクトップ画面の全幅に拡大されます。
カスタマイズ中にさまざまな画面サイズで Web サイトの外観を確認することは重要です。これにより、適切な比率を取得できるようになります。
特に最近では、スマートフォンが世界の小売トラフィックの 78% を占めています。(出典: statista.com)
したがって、デスクトップ ユーザーとスマートフォン ユーザーの両方に対してオンライン ストアの外観を最適化することが重要です。
08. プレビュー
テーマ エディターのプレビュー ボタンは、上部の 3 つのドット メニューに隠れています。そのボタンをクリックして [表示] を選択すると、別のウィンドウが開き、変更を加えたストアの実際の外観をプレビューできます。
ドロップダウン ボタンに含まれるその他のオプションは次のとおりです。
- コードを編集 - テーマファイルにアクセスする
- デフォルトのテーマコンテンツの編集 - テーマのデフォルトの文言を変更できるコンテンツエディターにアクセスします
- ドキュメントの表示 - 現在のテーマの開発者向けドキュメントにアクセスします
- キーボードショートカット - 編集を高速化するためのキーボードショートカットに関する情報を取得します
- サポートを受ける - テーマ開発者のサポートテーマに素早くアクセス
編集のヒント: オンライン ストアをカスタマイズするときは、必ずプレビュー ウィンドウを開いているようにしてください。Shopify テーマ エディターで変更を加えたら、プレビュー ウィンドウを更新するだけで変更内容を確認できます。
09. 「保存」ボタン
最後に、すべての編集を確定した後にクリックするボタンは「保存」ボタンです。テーマ エディター ウィンドウを閉じる前に必ずこのボタンをクリックしてください。そうしないと、すべての変更が失われます。また、ストアに加えたすべての変更を保存することが確実な場合にのみ、このボタンをクリックしてください。
前述したように、現在のテーマを複製し、複製ファイルでストアを編集することを忘れないでください。そうすれば、編集プロセス中にページ エラーが発生した場合でも、顧客にはページ エラーが表示されません。
これで、Shopify テーマ エディターのツアーは終了です。より詳しいチュートリアルが必要な場合は、Jason Gandy によるこのビデオを視聴することを強くお勧めします。
アプリを使用してShopifyテーマをカスタマイズする方法は?
まだ終わりではありません！
この記事を締めくくる前に、Shopify テーマを編集する別の方法をご紹介します。それは、 PageFlyのような専用のページ ビルダー アプリを使用することです。
PageFly は、ユーザーが使用することで得られる非常に高い柔軟性により、Shopify で最も人気のあるランディング ページ ビルダーです。デザイナーは、PageFly を使用してあらゆる種類のページやさまざまな種類のアニメーションを作成できます。しかも、コードを 1 行も入力する必要はありません。
さらに、PageFly のテーマ エディターは、PageFly 固有の追加機能以外は Shopify のテーマ エディターと同じように動作するため、迷うことはありません。
Shopify テーマの外観を全面的に変更したい場合は、ランディング ページ、ホームページ、製品ページなど、さまざまな使用例に対応する 100 種類以上の事前構築されたページ テンプレートのコレクションからページ テンプレートを選択できます。
結論
Shopify は、機能面だけでなくデザインの柔軟性の面でも、すぐに使える非常に優れた e コマース プラットフォームです。これらすべてを備えながら、オンライン ストアの売上にプラスの影響を与える高速な読み込み時間も維持しています。
Shopify ストアのカスタマイズは強力ですが、WordPress ウェブサイトのカスタマイズほど複雑ではありません。その代わりに、Shopify は、特にテーマ エディターにおいて、プラットフォームを非常に使いやすくすることに多大な労力を費やしてきました。
Shopify テーマ エディターは、オンライン ストアの独自のブランディングを実現したい場合に習得する必要がある、直感的で強力なツールです。この記事で説明されているように、Shopify テーマ エディターのすべてのコンポーネントを習得することで、魅力的なオンライン ストアを作成できるようになります。
テーマ コード エディターに関しては、Shopify のプログラミング スタックを理解していない場合は、編集に使用することはお勧めしません。
代わりに、より高度なカスタマイズを実装したい場合は、より安全な方法を採用し、PageFly のようなページ ビルダーを使用してください。
