Shopifyストアのカスタマイズを進めていくと、どうしてもテーマの標準機能だけでは物足りなくなり、「コードを編集」という領域に足を踏み入れる時が来ます。黒い画面に並ぶ無数のファイル名…一見すると難しそうですが、どこに何があるかという「地図」さえあれば、目的地にたどり着くのは難しくありません。この記事では、コードエディタの安全な開き方と、目的のファイルを見つけるための基本的な探し方を解説します。
コードエディタの開き方【3ステップ】
まずは、Shopifyのコードが保管されている「コードエディタ」への入り方です。たった3つのステップで、誰でも簡単に開くことができます。
①オンラインストア > テーマへ
Shopifyの管理画面にログインしたら、左側のメニューから**「オンラインストア」をクリックし、次に表示される「テーマ」**を選択します。
②「コードを編集」を選択
現在公開しているテーマ、または編集したいテーマの横にある**「…」（3点リーダー）のアイコンをクリックします。ドロップダウンメニューが表示されるので、その中から「コードを編集」**を選んでください。
③コードエディタが開く
「コードを編集」をクリックすると、新しい画面が開き、左側にフォルダとファイルのリスト、右側にコードが表示されるエディタ画面に移動します。これで準備は完了です。
重要ポイント： 編集する前には、必ず「…」メニューから**「複製する」**を選び、テーマのバックアップを作成しておきましょう。
画面の見方と基本構造
コードエディタは、左側の**「ファイル検索・一覧」と、右側の「コード表示エリア」**の2つの領域に分かれています。左側でファイルを選ぶと、その中身が右側に表示される、というシンプルな構造です。ファイルはいくつかのフォルダに整理されて格納されています。
左側：ファイルのディレクトリ
パソコンのフォルダと同じように、関連するファイルが各フォルダにまとめられています。最初はたくさんのフォルダがあって戸惑うかもしれませんが、主に使うのは数種類だけです。
右側：選択したファイルの中身
左側でファイル名をクリックすると、そのファイルに書かれているコード（LiquidやCSSなど）がここに表示されます。実際にコードを書き換えたり、追加したりするのはこのエリアです。
目的のファイルの探し方
では、具体的に「ヘッダーのロゴサイズを変えたい」「商品ページに文章を追加したい」といった目的がある場合、どのファイルを探せば良いのでしょうか。
最強の味方「検索バー」
最も簡単で確実な方法は、左上にある検索バーを使うことです。例えば、フッターを編集したいなら「footer」、商品関連なら「product」と入力するだけで、関連するファイルが一覧表示されます。まずはこの検索機能を頼りにしましょう。
主なフォルダの役割
検索しても見つからない場合や、構造を理解したい場合は、以下の主要なフォルダの役割を知っておくと便利です。
sectionsフォルダ：ストアを構成する「部品」が入っています。ヘッダー（header.liquid）、フッター（footer.liquid）、商品ページのメイン部分（main-product.liquidなど）といった、再利用可能なパーツのコードはほとんどここにあります。templatesフォルダ：ページの「設計図」が入っています。例えば、product.jsonは、「商品ページには、このsectionsの部品をこの順番で配置してください」という指示を記述しています。assetsフォルダ：サイトのデザイン（CSS）や動き（JavaScript）、画像ファイルなどが格納されています。サイト全体の文字色やフォントサイズを変更したい場合は、base.cssやstyle.cssといった名前のCSSファイルを探します。
まとめ
Shopifyのコードエディタは、構造さえ理解すれば決して怖い場所ではありません。まずはテーマを複製して安全な環境を確保し、今回紹介した「検索バー」と主要なフォルダの役割をヒントに、ファイルを探す練習をしてみてください。「このファイルは何をしているんだろう？」と中身を覗いてみるだけでも、ストアの裏側への理解が深まり、カスタマイズの第一歩に繋がります。
コメント