Zenn
Open3

Shopify Liquid

koukou

https://shopify-guide.net/shopify-liquid/

Liquidのディレクトリ構成

- Layout
- Templates
- Sections
- Snippets
- Assets
- Config
- Locales

ディレクトリは独立しているわけではなく階層となっており、表示の読み込みは「Layout→Templates→Sections→Snippets」の順となります。

koukou

https://qiita.com/eijiSaito/items/c2ef910bd26ce208a2df

  • Layout
    • [概要] ページ全体の共通構造（ヘッダー、フッター、基本的なHTML構造など）を定義するファイル。layout/theme.liquid が主に使用される。
    • [Next.js/React] Next.jsでいう_app.tsxとかlayout.tsx的な。ページ全体に関わり、共通のヘッダーやフッターなどを提供する。
  • Templates
    • [概要] ページごとの構造を定義するもの。例えば、product.liquid は商品ページ、collection.liquid はコレクションページなどのテンプレート。
    • [Next.js/React] Next.jsのページファイル (pages/index.js や pages/product/[id].js) に対応。
  • Sections
    • [概要] 再利用可能な構造ブロック。section ファイルはページの一部を動的に構成するために使われます。各ページテンプレートから呼び出される。
    • [Next.js/React] Reactコンポーネントに対応。例えば、商品ギャラリーやレビューセクションのような個別の再利用可能なUI部分。
    • [使い方] {% section 'header' %}のように、{% section 'Section名' %}として利用する。利用箇所はLayoutかTemplateの中。Sectionは1ページに1回のみ呼び出し可能らしい。
  • Snippets
    • [概要] 小さなコードブロックを定義したもの。繰り返し使える部分的なテンプレートとして活用。
    • [Next.js/React] 小さなコンポーネント（例えばボタンやラベル）に対応。
    • [使い方] {% render 'product-card' %}のように、{% render 'Snippet名' %}として利用する。利用箇所はSectionの中。また、includeを用いた書き方は現在は非推奨（renderの方がSnippet内での変数のスコープが分離されるため、グローバル変数の衝突を防げる）。Snippetは複数回呼び出し可能。
koukou

LP制作などで新規にページを作る必要があるときどうするか。

画面(テンプレート)を作る

※ここで作った画面(テンプレート)を、次のURL紐付けで選択する。

  • Shopify上のGUIから「新しいテンプレートを追加する」から作る
  • 「テンプレートタイプ」からpageを選んで、ファイル名はよしなに。例えば法人LPを作りたかったら、「page.corporate-lp.json」みたいな形で作ると良さそう。

URLに画面を繋げる

  • 「販売チャネル」→「ページ」から、「ページを追加」ボタンを押して、テンプレートで上で作ったテンプレートを選択することでURLに紐付けることができる。
  • 「検索結果」内の「URLハンドル」という部分でURLの文字列を指定することができる


あとは開発

ここまでできたら後はデザインに沿ってLP組むのを頑張る。