テーマ基盤
37 件のスニペット・リファレンス
セクションスキーマのカスタムブロック定義
セクションの schema ブロック内でカスタムブロックタイプを定義する方法を示すサンプル。@theme と _private というプレフィックスで異なるブロック種別を宣言する。
セクション呼び出しのフォーマット
Liquid の section タグを複数行に記述する際の正しいフォーマット例。タグ名を改行で分割しても正しく認識される書き方を示す。
レイアウトテンプレートの指定
Liquid の `layout` タグを使い、テーマのレイアウトファイルを指定する構文。複数のレイアウト候補と whitespace 制御（ダッシュ記号）の使い方を示す。
Liquid フォーマッター互換のセクション表記
Prettier Liquid プラグインのテストケースで、セクションタグの様々な書式を検証する。異なる間隔・改行・ホワイトスペーストリミングの組み合わせでもセクション名が崩れないことを確認する。
基本的なHTMLレイアウト
Prettier Liquid プラグインのテスト用に作られた最小限の HTML テンプレート。DOCTYPE から body タグまでの基本的なドキュメント構造を示す。
layout タグのフォーマット
Liquid の layout タグの書式をコード品質ツール(Prettier)でフォーマットするテストケース。スペースや改行位置の違いを正規化し、レイアウト名が壊れないことを検証する。
DOCTYPE宣言の構文サンプル
HTML5 と過去の DOCTYPE 宣言パターンを網羅したリファレンス。Prettier による Liquid フォーマッタが複数行 DOCTYPE に対応することを示すテストコード。
DOCTYPE宣言の構文例
HTML5 および従来の HTML / XHTML DOCTYPE 宣言の書き方を示すテストファイル。Prettier Liquid プラグインでのフォーマット対応を確認するためのリファレンス。
条件分岐で動的にHTML要素タグを切り替え
条件によって HTML 要素のタグ名を動的に変更するスニペット。Liquid の assign で変数にタグ名を格納し、`<{{ 変数 }}>` の形で展開することで、柔軟な要素構造を実現する。
条件付きラッパー要素の切り替え
3D モデル対応の有無に応じて、ラッパー要素を `product-media` または `div` に切り替えるスニペット。Liquid の `assign` と条件分岐を組み合わせて、動的にタグ名を変更する。
テーマ全体のHTML骨組み
すべてのページの共通HTML構造を定義するマスターレイアウトファイル。メタタグ、CSS・JavaScript の読み込み、ヘッダーセクション、ページ内容の出力を一元管理する。
content_for タグ（レイアウトへのコンテンツ埋め込み）
layout ファイルに定義したプレースホルダーへ、テンプレートやセクション側から任意のコンテンツを埋め込む Liquid タグ。複数ブロックの内容を指定位置に出力できる。
プライベートブロック呼び出し
content_for タグを使って、プライベート（管理画面非表示）な _static ブロックを別セクション内から呼び出すパターン。ブロックの再利用や複数セクションでの共有データ渡しに活用できる。
セクションのスキーマ定義
Liquid セクションやブロックの設定スキーマを JSON で記述するための基本形式。スキーマタグ内に JSON オブジェクトを配置して、テーマカスタマイザーの UI を定義する。
ネストされたブロック構造のグループ化
子ブロックを親スニペットに渡すラッパーコンポーネント。content_for で子ブロックを抽出し、親に委譲する構造化レイアウト部品。
style タグ内の CSS フォーマット
Liquid の {% style %} タグ内に記述された CSS を自動的にフォーマットするスニペット。printWidth や useTabs などのフォーマット設定に対応し、Liquid 変数を含む CSS でも適切にインデント処理する。
YAML フロントマターの形式整形
Liquid ファイルの先頭にある YAML フロントマター（メタ情報）を Prettier で自動整形するためのテストケース。空の YAML ブロックや複数ブロック、ブロック後のテキストの処理に対応した形式化ルールを示す。
Liquid と JavaScript のインデント整形ルール
Liquid テンプレート内に埋め込まれた JavaScript コードのインデント処理を制御するテストケース。バッククォート有無でフォーマッタの動作を切り替え、コード整形の一貫性を保つ。
Prettier Liquid プラグインの HTML 空要素フォーマット仕様
Prettier Liquid プラグインにおける HTML 空要素（img、meta、link など）の改行・インデント処理の仕様書。親タグやタグ間の余白借用ルールと、htmlWhitespaceSensitivity 設定による動作の違いを示す。
テーマ設定のフォント・色・レイアウトを CSS 変数に展開
Shopify 管理画面のテーマ設定（フォント、色、ページ幅）を CSS カスタムプロパティ（変数）に変換し、`:root` スコープで全体に適用するスニペット。font_face フィルターでウェブフォント読み込みも同時に行う。
テーマ設定のCSS変数化
テーマカスタマイザーで設定されたフォント、色、余白をCSS変数（カスタムプロパティ）に変換し、全ページで再利用可能にする。font_faceフィルターでWebフォントを読み込み、RGB値を分解してカラーレイヤーを柔軟に扱える仕様。
パスワード保護ページのレイアウト
Shopify のパスワード保護機能を有効にしたとき、来訪者が入力する認証ページの HTML 骨組み。ストア共通のメタタグ、スタイル、スクリプトをレンダリングする。
テーマレイアウト（HTML基盤）
Shopify ストアの全ページの HTML 基盤となるレイアウトファイル。言語設定、メタタグ、favicon、CSS/JS バンドルの読み込みをまとめ、ヘッダー・メインコンテンツ・フッターのセクションを統合する。
JavaScriptタグの整形テスト
Prettier Liquid プラグインが複数の `<script>` タグ（外部読み込み、インラインコード、属性の有無）を正しくフォーマットできることを検証するテストファイル。product オブジェクトを JSON で Liquid 側から JavaScript に渡すサンプルを含む。
国・通貨選択モーダル
ストアの利用可能国から顧客が自分の国と通貨を選択するモーダルウィンドウ。Bootstrap の modal コンポーネントで実装し、Shopify の localization オブジェクトから国リストと現在の選択状態を取得する。
スクリプトタグのフォーマット整形
Prettier Liquid プラグインのテストケース。複数の script タグ（外部スクリプト、インラインスクリプト）を統一的にフォーマットし、可読性を高める。
Liquid case タグのフォーマット
Prettier プラグイン向けの case/when/else タグのフォーマットテストファイル。case 式の改行・インデント・括弧配置をコード整形時に正しく処理するための仕様を定義している。
テーマのHTML基礎構造
Shopify ストアのすべてのページの基本となるHTMLレイアウト。ページタイプ、言語、SEOメタタグ、ファビコン、ヘッダー・フッターグループ、カートドロワーなど共通要素を一元管理する。
スクリプトタグ内の言語別整形設定
script タグ内の JavaScript、JSON、TypeScript、Markdown などを言語別に自動整形する Prettier プラグイン設定。Liquid 変数が含まれる場合は再インデントにフォールバックする。
テーマ全体のスタイルとスクリプト読み込み
Shopify のグローバル変数、ベンダーライブラリ（Bootstrap・Swiper）、テーマ固有の CSS・JS をまとめて読み込むスニペット。翻訳文字列も JavaScript オブジェクトとして事前に展開し、フロントエンド側から参照可能にする。
テーマ全体のレイアウト構造
Shopify ストアの全ページ共通レイアウトを定義する theme.liquid。ヘッダー、メインコンテンツ領域、サイドバー（ナビゲーション・検索・カート情報）、フッターを構成し、CSS・JavaScript アセットを読み込む。
CSS カスタムプロパティのテーマ変数
テーマ設定の色、タイポグラフィ、レイアウトをCSS カスタムプロパティ（CSS 変数）に変換し、スタイルシート全体で参照可能にする。フォント、色、ボタンスタイル、ダイアログなどをテーマカスタマイザーから一元管理する。
テーマ全体のレイアウト構造
Shopify ストアの HTML 基盤となるマスターレイアウト。ヘッダー、ナビゲーション、フッター、ショッピングカート表示を含む共通構造を定義する。ページテンプレートはこのレイアウト内に content_for_layout で埋め込まれる。
テーマの基本レイアウト
Shopify ストアの全ページ共通レイアウトを定義する theme.liquid。ヘッダー、ミニカート、メインコンテンツ、サイドナビゲーション、フッターの基本構造を組み立てる。
テーマ基盤レイアウト（Vogue テーマ）
Shopify の古いテーマ例（Vogue）のメインレイアウトファイル。ヘッダー、ナビゲーション、サイドバー、フッターを備えた基本的なテーマ構造を示す。テンプレートごとに異なるコンテンツ領域を条件分岐で出し分ける。
theme.liquid（テーマのメインレイアウト）
すべてのページに共通する HTML ドキュメント構造を定義するメインレイアウトファイル。フォント・カラー・スペーシング・ボタンスタイルなどをテーマ設定から CSS 変数に変換し、グローバルスタイルを一元管理する。
テーマレイアウト
Shopify テーマの基本レイアウトファイル。ヘッダー、サイドバーカテゴリメニュー、メインコンテンツエリア、フッターを備えた HTML 構造と CSS スタイルを定義する。