ネットショップの作り方

Shopifyテーマファイルの構造

更新日:

Shopifyのテーマをカスタマイズするためには、テーマファイルの構造を理解する必要があります。

 

テーマのファイル構成

テーマのファイルは、「テーマ」→現在のテーマ「アクション」→「コードを編集する」を選択すると、ファイル一覧が表示されます。

ディレクトリ構造は以下の通りです。

theme
├Layout
├Templates
├Sections
├Snippets
├Assets
├Config
└Locales

 

フォルダ内にファイルがあります。

Shopifyのテーマファイルの拡張子は「.liquid」で、ShopifyはLiquidというテンプレート言語を使います。

 

ShopifyのLiquidについて

Shopifyをカスタマイズする言語Liquidを徹底解説します

Shopifyをカスタマイズする時に出てくる「Liquid」という言語について解説していきます。 プログラミング経験がないととっつきにくく、ドキュメントも今は英語がほとんどなので、敬遠される方も多いと ...

続きを見る

 

Layout

Layoutディレクトリには、テーマの大枠を決めるファイルが格納されています。

 

theme.liquidには、head、bodyタグ、サイト共通要素であるヘッダー、フッター、ナビゲーション、各ページ個別のレイアウトなどが記述されています。

theme.liquidは、Webサイトのindex.htmlの位置付けだと考えていいでしょう。

 

Templates

Templatesディレクトリには、各ページのテンプレートLiquidファイルが格納されています。

 

ファイルを見ると、以下のページがあることが分かります。

  • 404ページ
  • ブログページ
  • ブログ一覧ページ
  • カートページ
  • 商品一覧ページ(コレクション)
  • 会員ページ
  • 会員有効化ページ
  • 住所一覧ページ
  • 会員ログインページ
  • 注文履歴ページ
  • 会員登録ページ
  • パスワードリセットページ
  • ギフトカードページ
  • TOPページ
  • カテゴリ一覧ページ(コレクションリスト)
  • 検索結果ページ

 

Sections

Sectionディレクトリには、各セクションのLiquidファイルが格納されています。

 

セクションを作成すると、テーマエディタで編集や追加を行うことができます。

たとえば、テーマエディタでヘッダーセクションを表示すると、

  • ロゴの画像
  • ロゴの幅
  • ナビゲーション
  • 告知バー

などが表示されます。

これは、section/header.liquidファイル内のschemaタグで定義されています。

 

Snippets

Snippetsディレクトリには、スニペットのLiquidファイルが格納されています。

 

スニペットとは、セクションより細かいパーツです。

共通的に処理する関数をスニペットに格納します。

 

スニペットは、テーマエディタでは編集することはできません。

 

Assets

Assetsディレクトリには、テーマで利用するCSS、JavaScript、画像、フォントなどが格納されています。

 

Config

Configディレクトリには、テーマ設定に関するファイルが格納されています。

 

settings_schema.json

テーマエディタから変更可能な内容を定義

 

settings_data.json

テーマエディタで設定された値が保存

 

Locales

Localesディレクトリには、言語ごとの翻訳jsonファイルが格納されています。

 

-ネットショップの作り方

Copyright© Growth Shop , 2020 All Rights Reserved.