Shopifyには、現在のeコマースプラットフォームの中で最もデザイン性の高いテーマがある。デザインについて語るとき、私たちはShopifyテーマの視覚的な側面だけを指しているのではありません。柔軟で、機能的で、使っていて楽しくなるような全体的なアーキテクチャーについて話しているのです。
これらの属性はすべて、Shopifyテーマエディターの効果的な使い方を知ることで、あなたのブランド独自のルック＆フィールを実現することができる。
この記事では、Shopify独自のテーマエディタをご紹介し、Shopifyのテーマをより良くするための様々な方法をお教えします。それでは始めましょう。
Shopifyテーマエディターとは？
Shopifyテーマエディタは、オンラインストアのオーナーが直感的なドラッグ＆ドロップ機能を使ってストアの外観やレイアウトをカスタマイズできる、プラットフォームのユーザーフレンドリーなツールである。つまり、コード編集のスキルが必要ないため、初心者でも視覚的に魅力的でプロフェッショナルなShopifyストアを作ることができる。
このように、テーマエディタの使い方を理解することは、あなたのようなShopifyストアオーナーにとって非常に重要なスキルである。
Shopifyのテーマエディターはどこにある？
Shopifyのテーマをカスタマイズしたい場合、最初にしなければならないことはテーマエディタを開くことだ。幸いなことに、Shopifyの管理画面は適切にデザインされているので、すべてを簡単に見つけることができる。
Shopifyストアの管理画面で、オンラインストアメニューを クリックし、テーマを 選択します。
インストールされているすべてのテーマが表示されるタブが開きます。次に、テーマエディターを開くことができるようにカスタマイズを クリックします。
テーマエディターはこんな感じ：
Shopifyテーマを編集する際の注意点
テーマエディターからShopifyストアを編集する際に覚えておかなければならないことがいくつかあります。これらのことは、あなたのオンラインストアで不必要なミスを避けることができるように、安全性を念頭に置いてカスタマイズを行うのに役立ちます。
そのいくつかを紹介しよう：
ライブテーマを直接編集しないでください
上の画像の手順は、Shopifyストアテーマを編集する方法を示しています。しかし、カスタマイズの安全性を高めるために、ライブテーマを複製し、その複製を編集することをお勧めします。
やり方はいたって簡単。カスタマイズ]ボタンの横にある三点 ボタンをクリックし、ドロップダウンオプションの[複製] をクリックします。その後、テーマのコピー（No.3）が自動的に作成されます（ストアの内容によっては数秒から数分かかります）。
複製テーマのセクションで、カスタマイズ ボタンをクリックすると、Shopifyテーマエディターが開きます。
テーマの複製を編集することで、編集中にShopifyストアが壊れることはありません。テーマをカスタマイズした後、複製テーマのセクションでPublishを クリックします。
テーマエディターで他のShopifyテーマも無料で試すことができる。
Shopifyストアで使用できるテーマは1つだけですが、Shopifyのテーマを複数（最大20個）インストールすることができるので、それらを試してカスタマイズすることができます。このトライアル段階では、まだテーマの代金を支払う必要はありません。有料テーマをライブストアに公開する場合のみ、料金を支払う必要があります。
このように、Shopifyのテーマストアに行き、試してみたいテーマを選ぶことができる。ここでは シャインのテーマを例にしてみましょう。テーマを試すボタンをクリックするだけで、テーマライブラリにインストールされます。
ShopifyストアにShineテーマがインストールされました。
Shopifyテーマを修正する2つの方法
Shopifyストアをカスタマイズするには2つの方法がある：
- テーマエディターでオンラインストアを視覚的に編集することで
- テーマコードエディターを使用してShopifyのテーマファイルを編集することによって
この2つの方法を比較し、どちらが自分に適しているかを考えてみよう。
テーマエディターの使用
前述のように、Shopifyのテーマエディタは、初心者から専門家まで、あらゆるタイプのユーザーに対応できるユーザーフレンドリーなインターフェイスを持っています。
フォント、レイアウト、タイポグラフィ、イメージなどのビジュアル的な変更をストアに実装したい場合は、テーマエディタを使用するのがベストです。ほとんどの場合、テーマエディターと適切なデザイン知識を組み合わせれば、ユニークな外観のストアを作成するのに十分です。
さらに、テーマエディタは、Shopifyテーマのアーキテクチャを変更しないため、より安全に使用することができます。そのため、テーマは安定したままであり、機能エラーの可能性はほとんどありません。
ヒント：テーマコードエディタを使わずにもっと高度なカスタマイズをしたい場合は、PageFlyのようなShopifyアプリを使うことができる。このアプリは使い慣れたインターフェイスだが、アニメーションやその他のエフェクトなど、より高度なデザインが可能だ。
この記事の後半では、アプリを使ってShopifyのテーマをカスタマイズする方法を紹介する。
テーマコードエディタを使う
一方、Shopifyテーマコードエディタもあります。このタイプのエディタは、ShopifyのテーマファイルやShopifyで使用されているプログラミング言語に精通している経験豊富なウェブ開発者やデザイナーが使用するのがベストです。
テーマコードエディタは、Shopifyテーマの可能性を最大限に引き出し、選択したテーマのネイティブではない機能を追加することもできる。あなたがコードの書き方を知っていればの話ですが。
しかし、この道を進みたいのであれば、自分でやる必要はない。Shopifyの専門家 Shopifyエキスパートの専門家の助けを借りることができます。
念のため、コード・エディタの開き方を説明しよう：
- Shopifyテーマエディターに移動する
- 画面右上の3点 ボタンをクリックします。
- ドロップダウン機能からコードの編集を選択します。
これでテーマ・コード・エディターが開きました。左側のパネルにはテーマファイルがあります。
Shopifyの テーマエディターの クイックツアー
Shopifyのテーマエディタはいくつかのパーツで構成されており、これらのコンポーネントの機能を知ることは、より効率的に作業するために非常に重要です。この知識があれば、より多くのカスタマイズをShopifyストアに実装することができるようになり、際立ったブランドを作り上げることができるようになります。
テーマエディターのすべての部分を見てみましょう。
01.セクション、テーマ設定、アプリの埋め込み
Shopifyテーマエディターの一番左にあるこれら3つのボタンは、様々な用途で使用することができます。
セクション
セクションボタンはテーマエディタを開くたびに表示される主要なインターフェイスです。このボタンは特定のページのコンテンツ階層をインタラクティブに表示します。
さらに、ここではストアのビジュアルレイアウトをカスタマイズすることができます。ウェブページのセクションをドラッグして階層を変更することができ、編集を行うと同時にメイン画面で変更を確認することができます。
テーマ設定
テーマ設定ボタンをクリックすると、配色、タイポグラフィ、アニメーション、ファビコン画像など、ストアの様々な要素をカスタマイズするためのツールにアクセスできます。また、カスタムCSSスニペットをこのメニューから追加することもできます。
また、セクションメニューのように、テーマエディターのメイン画面で変更を確認することができます。
アプリの埋め込み
Shopifyアプリの中には、オンラインストアで使用する前にアクティベーションが必要なものがあります。新しくインストールしたアプリをアクティベートするプロンプトが表示されたら、App embedsメニューに進みます。
アプリの横にあるスイッチを切り替えるだけで、アプリが有効になる。その後、新しくインストールしたアプリを使用することができます。
02.メイン画面（またはプレビュー画面）
メイン画面またはプレビュー画面は、テーマエディタを使ってShopifyストアをカスタマイズする際のビジュアルリファレンスとして機能します。ストアの要素を変更するたびに、変更が自動的にこのスクリーンに反映されるため、推測を排除することができます。
メイン画面の良いところは、Shopifyストアのようにインタラクティブなところです。そのため、メイン画面のメニューボタンをクリックすると、そのページが読み込まれます。この細かな機能により、ユーザーはシームレスなカスタマイズを体験することができる。
あるページから別のページに切り替えた場合、選択したページのコンテンツ階層を反映するため、「セクション」ボタンの内容も変更されることに注意してください。
03.設定パネル
ブラウザ画面の一番右側にある設定パネルは、Shopifyテーマエディターのもう一つの大きな特徴で、より簡単なデザインプロセスに貢献している。
このパネルはテーマエディターのセクションメニューをナビゲートするときに特に便利です。ページのセクションをクリックするたびに、対応する一連の設定がこのパネルに表示されます。ここで、各セクションの要素を微調整することができます。
シングルサイドバーとダブルサイドバーモード
テーマエディターを使用する際、2つのオプションがあります。シングルサイドバーモードとダブルサイドバーモードです。お使いのコンピュータの画面サイズに応じて、これらは便利です。
ダブルサイドバーモードは、上の画像のように、画面の右側に設定パネルを表示します。大きな画面では、これがテーマエディタのデフォルトビューになります。
しかし、Shopifyのテーマを小さな画面で編集している場合、例えばラップトップを使っている場合、シングルサイドバーモードでは、設定パネルが視界から取り除かれるため、メイン画面をより多く見ることができます。
シングル・サイドバー・モードに入るには、設定パネルがなくなるまでブラウザを拡大するだけです。
そうすると、セクションパネルから設定パネルにアクセスできるようになります。その後、テーマエディターでセクションをクリックすると、同じ場所に設定パネルが表示されます。
シングルサイドバーは、小さな画面で編集しているときに画面スペースを節約するだけでなく、プレビュー画面を少し大きくしてくれるので、少し大きく見ることができます。
04.ストアフロントセレクター
テーマエディターの上部中央に、ストアフロント用のドロップダウンセレクタがあります。オンラインストアを始めたばかりであれば、デフォルトオプションしかありません。したがって、心配する必要はありません。
あなたのオンラインストアに複数のストアフロントがある場合、このボタンをタッチするだけです。その際、選択したストアフロントのみを編集することになります。
05.ページセレクター
ストアフロントセレクターの横に、ページセレクターがあります。このドロップダウンメニューは、オンラインストアのページのリストを表示します。これにより、Shopifyストアでカスタマイズしたいページに素早くアクセスできます。
06.ページ検査官
この小さな矢印のアイコンはページインスペクタと呼ばれています。非アクティブにすると、メイン画面はライブストアのように動作し、ページボタンをクリックすると、他のページにリダイレクトされたり、意図した機能を実行したりします。
一方、「インスペクター」を有効にすると、メイン画面からセクションをクリックして、その設定を簡単に見ることができる。
07.スクリーンモード
インスペクタボタンの横には、Shopifyテーマエディタのスクリーンモードがあります。テーマエディタのデフォルトビューはデスクトップモードで、コンピュータから見たときのウェブサイトの外観を表示します。
真ん中のボタンはモバイル画面モードです。このボタンをクリックすると、スマートフォンから見たときのウェブサイトの外観が表示されます。
最後に、フルスクリーンモードは、プレビュー画面をラップトップまたはデスクトップ画面の幅いっぱいに拡大します。
さまざまな画面サイズでウェブサイトの外観をチェックすることは、カスタマイズの際に重要です。
特に現在では、世界の小売トラフィックの78％をスマートフォンが占めている。（出典：statista.com）
したがって、デスクトップとスマートフォンの両方のユーザーに対してオンラインストアの外観を最適化することが重要です。
08.プレビュー
テーマエディターのプレビューボタンは上部の3つのドットメニューに隠れています。このボタンをクリックし、[表示]を 選択して別ウィンドウを開くと、変更内容を含むストアのライブ表示をプレビューすることができます。
ドロップダウンボタンに含まれるその他のオプションは以下の通り：
- コードを編集する - テーマファイルにアクセスする
- デフォルトテーマ内容の編集 - コンテンツエディターにアクセスし、テーマのデフォルト文言を変更することができます。
- ドキュメントを見る - 現在のテーマの開発者向けドキュメントにアクセスできます。
- キーボードショートカット - 編集を高速化するためのキーボードショートカットに関する情報を得ることができます。
- サポートを受ける - テーマ開発者のサポートテーマに素早くアクセスできる。
編集のヒント：オンラインストアをカスタマイズしているときは、常にプレビューウィンドウを開いておきましょう。Shopifyのテーマエディターで変更を加えると、プレビューウィンドウをリフレッシュするだけで、変更を確認することができます。
09.「保存」ボタン
最後に、すべての編集を確定した後にクリックするのが「保存」ボタンです。テーマエディターウィンドウを閉じる前にこのボタンをクリックしてください。そうしないと、すべての変更が失われてしまいます。また、このボタンをクリックするのは、ストアに加えたすべての変更を保存したいと確信したときだけにしてください。
先に述べたように、現在のテーマを複製し、複製ファイル上でストアを編集することを忘れないでください。編集中にページエラーが発生しても、顧客には表示されません。
以上で、Shopifyテーマエディターの説明は終わりです。より詳しいチュートリアルをご覧になりたい方は、Jason Gandyによるこのビデオをぜひご覧ください。
アプリを使ってShopifyのテーマをカスタマイズするには ？
まだ終わっていない！
この記事をまとめる前に、Shopifyテーマを編集するもう一つの方法を紹介したい。それは PageFly.
PageFlyはShopifyで最も人気のあるランディングページビルダーである。デザイナーはPageFlyを使ってあらゆる種類のページを作成することができ、様々な種類のアニメーションも作成することができます。
さらに、PageFlyのテーマエディターは、Shopifyのテーマエディターと同じように使えるので、迷うことはありません。
Shopifyテーマの外観を一新したい場合は、ランディングページ、トップページ、商品ページなど、様々な用途に対応した100以上のページテンプレートからお選びいただけます。
結論
Shopifyは、機能面だけでなく、デザインの柔軟性においても、非常に優れたeコマースプラットフォームです。機能面だけでなく、デザインの柔軟性という点でも優れている。
Shopifyのストアのカスタマイズは、WordPressのウェブサイトのカスタマイズほど複雑ではありません。その代わり、Shopifyはそのプラットフォームを非常に使いやすくするために多くの努力を費やしてきた。
Shopifyテーマエディタは、オンラインストアのユニークなブランディングを実現したいのであれば、マスターしておくべき直感的で強力なツールです。この記事で説明するように、Shopifyテーマエディターのすべてのコンポーネントを使いこなすことで、魅力的なオンラインストアを作成することができるでしょう。
テーマコードエディターに関しては、Shopifyのプログラミングスタックを理解していない限り、編集に使用することはお勧めしません。
その代わり、より高度なカスタマイズを行いたいのであれば、PageFlyのようなページビルダーを使う方が安全だ。
ShopifyテーマエディターFAQ
Shopifyのテーマエディタに行くには、Shopifyの管理画面に行き >オンラインストアをクリック >テーマを選択 >カスタマイズをクリックします。これでShopifyテーマエディターが起動します。しかし、Shopifyテーマをカスタマイズする際には、ライブストアへの不要なエラーを避けるために、ライブテーマを複製し、複製を編集することを強くお勧めします。
Shopifyの管理画面に行き、オンラインストアをクリック >テーマを選択 > カスタマイズボタンの横にある3つの点のボタンをクリックします。数秒待つと複製が作成されます。その後、テーマライブラリまでスクロールダウンし、複製したテーマのカスタマイズボタンをクリックします。変更後、この複製テーマを公開し、現在のテーマを置き換えることができます。
そうです。すべてのShopifyテーマはカスタマイズ可能です。
テーマエディタとは、ウェブ開発者やウェブサイトオーナーがウェブサイトをカスタマイズするためのツールです。eコマーススペースでは、テーマエディタは、商人がユニークなブランディングデザインを作成するだけでなく、コンバージョン率を高めるためにストアの魅力と機能性を向上させるためにオンラインストアをカスタマイズすることを可能にするフロントエンド開発ツールです。
