🛍️ 商品表示初級
商品バリアント選択ラジオボタン
商品詳細ページでバリアントを選択するラジオボタンをラベルでラップしたHTML。在庫がないバリアントは disabled 属性を付与し、現在選択中のバリアントは checked 状態にする。
用途
商品ページで色・サイズなどのバリアント選択フォームを構築するとき。ラジオボタンを視覚的に隠し、カスタム UI でスタイリングする際に用いる。
設置場所
snippets/product-variant-selector.liquid などに配置し、sections/main-product.liquid 内の form 要素内で、バリアントをループ処理しながら `{% render 'product-variant-selector', variant: variant, product: product %}` で呼び出す。
注意点
radio ボタンの value に variant.id を指定しているため、form 送信時は文字列として受け取り、数値比較が必要なら `| times: 1` で数値化する。label で input を wrap する場合、label の click イベントと input の peer セレクタが正常に連動するよう CSS の position: relative / absolute を必ず指定する。在庫なしバリアントの disabled 状態は CSS で見た目を変える際、pointer-events: none と組み合わせて意図しないクリック操作を防止する。
コード
21 行 / 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 行