🛍️ 商品表示中級
商品バリアントのラジオボタン
商品の色・サイズなどのバリアントを選択するラジオボタンを描画するスニペット。在庫の有無で disabled 属性を切り替え、選択済みバリアントに checked を付ける。
用途
商品詳細ページで複数のバリアントをラジオボタン形式で表示し、ユーザーが選択したバリアントをフォームに送信するとき。
設置場所
sections/main-product.liquid または product テンプレート内のバリアント選択エリアに貼り付け。`variant` ループの中で `{% render 'variant-radio', variant: variant, product: product %}` のように呼び出す。
注意点
バリアントが在庫切れの場合、disabled 属性が自動で付与される(`unless variant.available` の判定)。ラジオボタン自体は display:none ではなく opacity:0 で隠す設計なので、カスタムスタイル(label のチェックマーク表示など)を CSS で実装する際は peer セレクタの対応を確認する。product.selected_variant が nil のとき誰も checked にならないので、デフォルト選択が必要な場合は初回ロードで JavaScript で checked を設定する。
コード
23 行 / liquidIt should maintain at most 1 newline between attributes, and none at the end
<label class="block relative">
<input
class="absolute inset-0 opacity-0 pointer-events-none peer"
type="radio"
name="id"
id="variant-{{ variant.id }}"
value="{{ variant.id }}"
required
{% unless variant.available %}
disabled
{% endunless %}
{% if product.selected_variant == variant %}
checked
{% endif %}
>
</label>
出典・ライセンス
- Repository:
- https://github.com/Shopify/theme-tools
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。
関連項目
🛍️ 商品表示上級
商品ブロック内のLiquid実行
セクションブロック内で管理画面から入力した Liquid コードを直接実行し、パディング設定で上下の余白を制御するスニペット。テーマカスタマイザーでコード記述が可能。
📁 ks-bootshop·MIT·8 行
🛍️ 商品表示初級
商品ページの見出し
商品詳細ページの商品名を h1 見出しで表示するブロック。テーマカスタマイザーから見出しサイズと上下の余白(padding)を調整できる。
📁 ks-bootshop·MIT·8 行
🛍️ 商品表示中級
商品レビューバッジの表示
Loox と JudgeMe 両方のレビュー集約アプリに対応したレーティングバッジを商品ページに埋め込む。メタフィールドから平均評価とレビュー数を取得し、各アプリの UI コンポーネントを描画する。
📁 ks-bootshop·MIT·9 行
🛍️ 商品表示中級
定期販売プランのデータ属性を動的に生成
商品の定期販売プラン(Selling Plans)をループで取得し、data 属性として HTML に埋め込むスニペット。JavaScript で定期販売オプションを制御するためのデータ基盤として機能する。
📁 theme-tools·MIT·10 行
🛍️ 商品表示初級
商品ページの区切り線
商品詳細ページで、セクション間に区切り線を挿入するブロック。パディング、高さ、背景色、透明度をカスタマイズできる。
📁 ks-bootshop·MIT·15 行
🛍️ 商品表示初級
商品画像のプリロード出力
商品オブジェクトから image_tag フィルターを使い、preload 属性付きで画像を出力するスニペット。複数商品のループ内でも使える基本的なパターン。
📁 theme-tools·MIT·16 行