Liquid Snippets by ALSEL
🛍️ 商品表示初級

商品バリアント選択ラジオボタン

商品詳細ページでバリアントを選択するラジオボタンをラベルでラップした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 と組み合わせて意図しないクリック操作を防止する。
タグ:variantradioformproductinput

コード

21 行 / liquid
It 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>

出典・ライセンス

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