new_window arrow_01 arrow_02 arrow_03 arrow_04 arrow_05 arrow_06 arrow_07 arrow_08 arrow_09 menu close metaphase facebook instagram twitter tumblr logo_metaphase

[Shopify]バリエーション選択select

Other

2022.02.02

メタフェイズではShopifyを利用したストア構築を行っています。
今回はLiquidでバリエーション選択のセレクトボックスを表示する方法を紹介いたします。

 
product.liquidの任意の場所に下記を記述します。

<select name="id">
   {%- for variant in product.variants -%}
       <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
   {%- endfor -%}
</select>

 
個数選択、カートに入れるボタンも合わせると下記になります。

<form method="post" action="{{ routes.cart_add_url }}" {{ html_params }}>
	{%- if product.has_only_default_variant -%}
		<input type="hidden" name="id" value="{{ variant.id }}"/>
	{%- else -%}
	   バリエーション:<select name="id">
	      {%- for variant in product.variants -%}
	         <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
	      {%- endfor -%}
	   </select>
	{%- endif -%}
	個数:<select name="quantity">
		<option value="1">1</option>
		<option value="1">2</option>
		<option value="1">3</option>
	</select>
  <button type="submit">カートに入れる</button>
</form>

 

 
Shopifyを利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

 

 

最新のブログ記事