株式会社メタフェイズ

Shopify

バリエーション選択select

メタフェイズでは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を利用したストアの構築・運用のご相談はお問い合わせフォームより受け付けております。

Share on

その他の記事

  • Strategy

    ECサイトとは?簡単にできる構築方法を実例をもとにご紹介

  • Shopify

    セクションに可変長カスタム入力欄を設置する

  • Shopify

    コレクション内商品のタイトルだけ表示する

トップへ戻る

お問い合わせ

Webサイト制作やWebビジネスに関するお悩みがある方はお気軽にご相談ください。

お問い合わせはこちら

会社案内

社内で検討・回覧したい方向けに、弊社の会社概要や最新の制作実績を掲載した資料を、PDFでご覧いただけます。

ホワイトペーパー

最新のプロジェクトや過去の7,000サイト以上の実績と経験で獲得したWebサイト制作におけるノウハウの一部をホワイトペーパーとして公開しています。