すべてのスニペット
640 件
ホームページのカテゴリグリッド
メタオブジェクトで管理されたカテゴリ階層をホームページに表示するセクション。カテゴリ名の区切り文字（>）以降の部分を抽出し、サムネイル付きグリッドレイアウトで描画する。
カテゴリ階層の複数列グリッド表示
コレクション配下のカテゴリ一覧を複数列グリッドで表示するセクション。ブロック単位でカテゴリ画像、タイトル、説明、子カテゴリリンクを管理し、ホバー時に画像プリロードして遷移を高速化する。
固定ページのテンプレート
Shopify 管理画面で作成した固定ページ（利用規約、プライバシーポリシーなど）を表示するテンプレート。ページタイトルと本文コンテンツを描画する。
404エラーページ
ページが見つからないときに表示する404エラーテンプレート。訪問者に対して「ファイルが見つかりません」というメッセージを中央配置で伝える。
コレクションページの商品一覧表示
コレクション内の商品を表形式で一覧表示するテンプレート。商品画像、ブランド名、タイトル、価格、説明文を20件ごとにページネーションで表示する。
テーマレイアウト
Shopify テーマの基本レイアウトファイル。ヘッダー、サイドバーカテゴリメニュー、メインコンテンツエリア、フッターを備えた HTML 構造と CSS スタイルを定義する。
検索結果ページの商品一覧
検索結果を24件ずつページネーションで表示し、各商品をサムネイル・タイトル付きで一覧化する。最も深いカテゴリ階層へのリンクを自動抽出して、カテゴリページ内の商品アンカーに遷移させる。
コレクション商品のバリアント付き一覧表
コレクション内の全商品をバリアント単位の表形式で表示し、各行から直接カートに追加できるセクション。商品画像、説明、SKU、オプション、価格を一覧化して、B2B 向け注文フローや大量購入シーンに対応する。
カートページテンプレート
カートの商品一覧を表示し、数量変更・商品削除・チェックアウトに対応するカートページ。商品画像、バリアント情報、金額をカード形式で表示し、レスポンシブ対応で PC とモバイルの両環境で動作する。
商品ブロック内のLiquid実行
セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。
商品ページの区切り線
商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。
ナビゲーションバーのロゴ
ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。
決済方法アイコン
ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。
商品ページの見出し
商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。
商品ページの説明文
商品詳細ページにカスタムテキストと商品説明を組み合わせて表示するブロック。タイトル・説明文のフォントサイズや上下余白を管理画面から調整できる。
商品バッジの色付けメタフィールド表示
メタフィールドのテキストと色情報を読み込んで、商品カード上にカスタムバッジを表示するスニペット。メタフィールド値は「テキスト|カラーコード」形式で、テーマ設定で namespace.key を指定する。
セクション共通ヘッダー（タイトル・説明文）
セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。
商品レビューバッジの表示
Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。
商品カードの価格表示
商品カード向けの価格表示スニペット。セール時は比較価格（定価）に打消し線、現在価格を強調表示する。通常時は現在価格のみ表示する。
カートドロワー
ページ右側からスライドインするオフキャンバスカートドロワー。商品一覧、メモ機能、フッター情報を1つのコンテナで管理し、アップセル機能にも対応する。
カート注文備考欄
カートページに注文時の備考を記入できるテキストエリアを開閉形式で表示する。テーマ設定で有効化するとカート内容がある場合のみ表示され、JavaScript で自動保存機能に対応する。
フッターのリッチテキストとメニュー
フッターセクション用のブロック型スニペット。リッチテキスト、ボタン、メニューを条件付きで描画する。block.settings で取得したテキスト・URL・メニューハンドルを組み合わせて柔軟なフッター構成を実現する。
コレクションカード
コレクション一覧に表示するカード型コンポーネント。コレクション画像、タイトル、商品数を条件付きで出力する。セクション設定でタイトル位置、フォントサイズ、画像比率をカスタマイズ可能。
デスクトップナビゲーションメニュー
Bootstrap のドロップダウン機能を使ったデスクトップ向けのグローバルナビゲーション。メインメニューのリンクリストをループし、サブメニュー有無に応じてドロップダウン表示を切り替える。
商品カードの追加・バリアント選択フォーム
商品カード内で「カートに追加」ボタンを表示するスニペット。単一バリアントの商品は直接購入可能で、複数バリアント商品はドロップダウンで選択してから追加する。
カートフッターの割引・小計・チェックアウト
カートドロワーの下部に割引適用状況、小計、チェックアウトボタンを表示するスニペット。適用割引があれば金額と共に一覧表示し、セール価格と定価の二重表示にも対応する。
ブログ記事カード
ブログ一覧ページで使う記事カード。記事の画像、タイトル、タグ、作成日時、抜粋を表示し、セクション設定で各要素の表示・非表示を制御できる。
ページネーション
複数ページに分割されたコレクションや検索結果に対して、前後ページへのリンクとページ番号を表示するナビゲーション。Bootstrap のページネーションクラスを使用し、アクセシビリティに対応している。
ページのOGP・Twitterカードメタタグ
ページタイトル、説明、画像、URL などから Open Graph Protocol と Twitter Card のメタタグを自動生成する。商品ページでは価格情報も追加される。
デスクトップヘッダーのアイコンメニュー
ヘッダー右側に言語選択、顧客アカウント、検索、カートのアイコンをレイアウトするスニペット。各機能の有効化設定に応じて条件付きで表示される。
商品ページの信頼アイコン
商品ページに信頼度を示すアイコン（配送無料、返品保証、セキュア決済など）を複数並べて表示するブロック。最大4個までのアイコンとテキストペアを管理画面から設定できる。
商品バリアントの価格表示
選択中のバリアントの現在価格・比較価格（定価）・割引率を表示するブロック。セール状態では打ち消し線で定価を示し、割引額または割引率をバッジで表示する。在庫なしのバリアントは「売切」バッジを出す。
商品オプションのボタン・ドロップダウン表示
商品バリアント選択フォームを、ボタンスタイルまたはドロップダウンスタイルで出力するスニペット。テーマ設定で表示方式を切り替えられ、パディング（上下）もカスタマイズ可能。
商品カード
コレクションページや商品リストで使う商品カード。商品画像、タイトル、評価、価格、SALE・売切バッジを表示し、オプションで「カートに追加」ボタンも表示できる。
国・通貨選択モーダル
ストアの利用可能国から顧客が自分の国と通貨を選択するモーダルウィンドウ。Bootstrap の modal コンポーネントで実装し、Shopify の localization オブジェクトから国リストと現在の選択状態を取得する。
商品詳細ページの開閉パネル
商品詳細ページに開閉可能なアコーディオンパネルを追加するセクションブロック。タイトル、アイコン、説明文を設定でき、固定テキスト・ページコンテンツ・商品説明から内容を選べる。
商品ページのカートボタン
商品詳細ページ用のカートボタンコンポーネント。数量調整フィールド、カートに追加ボタン、Apple Pay などの動的決済ボタン、今すぐ購入ボタンを条件付きで表示する。
画像の縦横比と遅延読み込み
Shopify の image_url フィルターを活用して、画像をアスペクト比・サイズ・遅延読み込みオプション付きで出力するスニペット。Retina 対応（2倍解像度）への自動スケーリングにも対応。
コレクションページのフィルター・ソート操作パネル
コレクションページ上部に商品数表示、フィルターボタン、ソートドロップダウンを配置するユーティリティコンポーネント。アクティブなフィルター数をボタンに表示し、Bootstrap のオフキャンバス・ドロップダウンで UI を構成する。
商品ギャラリーのSwiper実装
Swiper ライブラリを使用した商品メディアギャラリー。メイン画像をスライドで表示し、サムネイルで操作できる。画像とビデオの両方に対応。
サイドバー検索モーダル
画面右側からスライドインする検索パネル。商品・コレクション・ブログ記事・ページを対象とした予測検索（オートコンプリート）に対応し、管理画面の設定で検索対象を切り替えられる。
テーマ全体のスタイルとスクリプト読み込み
Shopify のグローバル変数、ベンダーライブラリ（Bootstrap・Swiper）、テーマ固有の CSS・JS をまとめて読み込むスニペット。翻訳文字列も JavaScript オブジェクトとして事前に展開し、フロントエンド側から参照可能にする。
オフキャンバスメニュー
画面下部からスライドインするモバイル対応メニュー。メインメニュー、サブメニュー（アコーディオン形式）、ソーシャルアイコン、言語・国設定切替に対応している。
カート内の商品一覧
カートに入っている商品を行ごとに表示し、数量変更・削除・割引情報の表示に対応するスニペット。カートが空のときは空カートメッセージを表示する。
SVGアイコン表示
iconsvg.xyz ベースの SVG アイコンを Liquid で条件分岐により動的に表示するスニペット。サイズ・線幅・CSS クラスをパラメータで指定でき、カート・メニュー・検索・矢印など 30 種類以上のアイコンに対応する。
コレクションページのフィルタパネル
コレクションページで真偽値・リスト・価格帯のフィルタを、オフキャンバス（サイドスライダー）パネルとして表示するスニペット。チェックボックスと価格入力フィールドで絞り込み条件を選択でき、該当件数を併記する。
Organization・WebSite・Product・Article構造化データ
ストア全体と個別ページ（商品・記事）の構造化データを schema.org 形式の JSON-LD で出力するスニペット。Organization タイプでショップ情報とソーシャルリンク、WebSite タイプでサイト検索、Product タイプで商品情報（価格・在庫・SKU・GS1 バーコード）、Article タイプでブログ記事メタデータを Google 検索のリッチリザルト表示に対応させる。
ソーシャルメディアアイコンリンク
Facebook、Instagram、X、TikTok など複数のソーシャルメディアプラットフォームへのリンクをアイコン付きで表示するスニペット。テーマ設定から各プラットフォームの URL を読み込み、条件付きで出力する。
カートドロワー
Shopify の Bundled Section Rendering に対応したカートドロワーセクション。カート更新時に動的にフェッチされ、AJAX で自動的に再レンダリングされる。
カート件数バッジ
カート内の商品件数を表示するバッジを、Shopify の Bundled section rendering 機能で動的に更新する。カート更新時に AJAX で再レンダリングされ、常に最新の件数を表示。