商品表示
20 件のスニペット・リファレンス
商品ブロック内のLiquid実行
セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。
商品ページの見出し
商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。
商品レビューバッジの表示
Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。
定期販売プランのデータ属性を動的に生成
商品の定期販売プラン（Selling Plans）をループで取得し、data 属性として HTML に埋め込むスニペット。JavaScript で定期販売オプションを制御するためのデータ基盤として機能する。
商品ページの区切り線
商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。
商品画像のプリロード出力
商品オブジェクトから image_tag フィルターを使い、preload 属性付きで画像を出力するスニペット。複数商品のループ内でも使える基本的なパターン。
商品バリアント選択ラジオボタン
商品詳細ページでバリアントを選択するラジオボタンをラベルでラップしたHTML。在庫がないバリアントは disabled 属性を付与し、現在選択中のバリアントは checked 状態にする。
商品ページの説明文
商品詳細ページにカスタムテキストと商品説明を組み合わせて表示するブロック。タイトル・説明文のフォントサイズや上下余白を管理画面から調整できる。
商品バリアントのラジオボタン
商品の色・サイズなどのバリアントを選択するラジオボタンを描画するスニペット。在庫の有無で disabled 属性を切り替え、選択済みバリアントに checked を付ける。
商品画像をプリロード表示
商品ループ内で featured_image を image_tag と image_url フィルタで段階的に出力するスニペット。preload オプションで画像の読み込み優先度を上げ、Liquid フォーマッタの正しいインデント処理を示す。
商品カードの価格表示
商品カード向けの価格表示スニペット。セール時は比較価格（定価）に打消し線、現在価格を強調表示する。通常時は現在価格のみ表示する。
商品カードの追加・バリアント選択フォーム
商品カード内で「カートに追加」ボタンを表示するスニペット。単一バリアントの商品は直接購入可能で、複数バリアント商品はドロップダウンで選択してから追加する。
商品カード
コレクションページや商品リストで使う商品カード。商品画像、タイトル、評価、価格、SALE・売切バッジを表示し、オプションで「カートに追加」ボタンも表示できる。
商品オプションのボタン・ドロップダウン表示
商品バリアント選択フォームを、ボタンスタイルまたはドロップダウンスタイルで出力するスニペット。テーマ設定で表示方式を切り替えられ、パディング（上下）もカスタマイズ可能。
商品ページの信頼アイコン
商品ページに信頼度を示すアイコン（配送無料、返品保証、セキュア決済など）を複数並べて表示するブロック。最大4個までのアイコンとテキストペアを管理画面から設定できる。
商品バリアントの価格表示
選択中のバリアントの現在価格・比較価格（定価）・割引率を表示するブロック。セール状態では打ち消し線で定価を示し、割引額または割引率をバッジで表示する。在庫なしのバリアントは「売切」バッジを出す。
商品詳細ページの開閉パネル
商品詳細ページに開閉可能なアコーディオンパネルを追加するセクションブロック。タイトル、アイコン、説明文を設定でき、固定テキスト・ページコンテンツ・商品説明から内容を選べる。
商品ページのカートボタン
商品詳細ページ用のカートボタンコンポーネント。数量調整フィールド、カートに追加ボタン、Apple Pay などの動的決済ボタン、今すぐ購入ボタンを条件付きで表示する。
商品ギャラリーのSwiper実装
Swiper ライブラリを使用した商品メディアギャラリー。メイン画像をスライドで表示し、サムネイルで操作できる。画像とビデオの両方に対応。
おすすめ商品のスライダー表示
商品をスライダー形式で表示するセクション。コレクションか個別選択、または商品ページでは Shopify の AI アルゴリズムによるおすすめ商品を自動表示する。