カスタムオプションとは

カラーミーショップの商品管理から登録する「オプション情報」とは別に選択項目を商品に追加できる機能です。

アプリストア > アプリを探す > カスタムオプション

アプリストアで提供されている「カスタムオプション」について説明します。

※本アプリは新しいショッピングカートのみ対応となります。

※名入れ機能との併用はできません。

※どこでもカラーミーには対応しておりません。

ご利用方法

1. カスタムオプションを登録する

「オプションセットを新規作成ボタン」をクリックします。

2. 基本設定を入力する

オプションセット登録に必要な基本設定を入力します。

オプションセット名

カスタムオプションアプリ内で管理するための表示名です。
表示・非表示

ショップにオプションを表示するしないを選択できます。
対象条件

オプションを表示する商品を選択できます。

対象条件について

オプションを表示させる商品を下記の選択肢から絞り込むことができます。

全商品
商品ID ※上限50件まで
商品カテゴリ
商品グループ

また、上記の選択肢は複数条件による絞り込みが可能です。

複数条件について

「両方とも」にした場合

1つ目と2つ目の【両方の条件】が揃っている商品のみ適用します。

条件1「商品カテゴリー（お得な詰め合わせ）」
 両方とも
条件2「商品グループ（店主おすすめパン）」

とした場合、この２つの条件を揃え持つ商品のみ、カスタムオプションが表示されます。

「または」にした場合

1つ目と2つ目の【どちらか一方でも条件】に該当している商品に適用します。

条件1「商品カテゴリー（お得な詰め合わせ）」
または
条件2「商品グループ（店主おすすめパン）」

とした場合、２つの条件を持った商品や、どちらか一方の条件に該当する商品すべてに、カスタムオプションが表示されます。

3. 商品オプション情報を入力する

ショップの商品ページに表示するオプションの設定を行います。

ラベル名
商品ページに表示するオプションの名前を入力してください。
フォームの種類
入力フォームの種類を選択してください。選択できる入力フォームは下記の5種類です。

一行テキスト
複数行テキスト
ラジオボタン
チェックボックス
プルダウン

必須項目
オプションの入力を必須にするか選択できます。

また、オプションは複数登録が可能です。

ショップページでの見た目について

上記で設定した表示箇所に登録したオプションが表示されます。

受注画面での見た目について

売上詳細の商品名の項目に、購入されたオプション情報が表示されます。

カスタムオプションご利用時の注意点

見た目の変更について

本アプリでは表示に関するカスタマイズは設定することができません。
見た目を変更する場合は、テンプレートに応じてCSSを設定してください。

価格、在庫数について

オプションに価格や在庫数は設定できません。
オプションの各項目ごとに価格や在庫数を設定したい場合は、デフォルトのオプション機能をご利用ください。
詳しくはこちら

対象条件について

対象条件に商品IDを指定する場合は、最大50件まで指定が可能です。

テンプレートの該当箇所に追加する

利用中のテンプレートの商品詳細HTML編集内に、下記のタグを記述することで任意の場所にオプションを表示させることが可能です。テンプレートによってはデザインが崩れる可能性があります。利用中のテンプレートに応じてCSSを設定してください。

<div id="custom-options-container"></div>

※オプション表示用のタグは必ず下記のタグ内に設置をお願いします。それ以外の箇所では動作しません。


<form name="product_form" method="post" action="<{$cart_url}>">

<!-- このエリア内に挿入してください -->

</form>

※オプション表示用のタグを設置しなくても、ショップページに自動的に表示されます。

ただし、テンプレートによって見た目が崩れる場合があります。一度ショップページでの表示をご確認いただき、オーナー様にて任意の場所にオプション表示用のタグを設定していただくことをおすすめします。テンプレートによってはデザインが崩れる可能性があります。

»カスタムオプションが表示完了されるまでカートインをブロックするには
»おすすめのタグ設置箇所

おすすめのタグ設置箇所

人気のテンプレートについておすすめのタグ設置箇所をご確認いただけます。
【テンプレート別挿入タグ一覧表】の「変更前」「変更後」の内容に沿って、各テンプレートを編集してください。
テンプレートによってはデザインが崩れる可能性があります。利用中のテンプレートに応じてCSSを設定してください。

■テンプレート別挿入タグ一覧表　【共通】HTML

DISCOVER（有料版）｜ MONO ｜ MODE ｜ ICE ｜ MANY ｜ PACK ｜ Panorama ｜ワンプレートホワイト（有料）｜ワンプレートホワイト（無料）｜カラーミーキット（2カラム）｜ウェスト（ホワイト）

DISCOVER(有料版)

▼【商品詳細html】変更前

 <!-- 名入れ設定 -->
<{if $product.product_text_titles}>
<div class="p-product-name">
<{foreach from=$product.product_text_titles key=key item=val}>
<div class="p-product-name__ttl">
<{$val|escape}>
</div>
<div class="p-product-name__body">
<input type="text" name="product_text[<{$key|escape}>]" value="" />
</div>
<{/foreach}>
</div>
<{/if}>
<!-- //名入れ設定 -->

<!-- 購入フォーム -->
<div class="p-product-form">
<{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
<div class="p-product-form-stock">
<div class="p-product-form-stock__input">
<input type="text" name="product_num" value="<{$product.init_num}>" />
<span class="p-product-form-stock__unit"><{$product.unit}></span>
</div>
<{if $product.stock_disp}>
<div class="p-product-form-stock__stock">

▼【商品詳細html】変更後

 <!-- 名入れ設定 -->
<{if $product.product_text_titles}>
<div class="p-product-name">
<{foreach from=$product.product_text_titles key=key item=val}>
<div class="p-product-name__ttl">
<{$val|escape}>
</div>
<div class="p-product-name__body">
<input type="text" name="product_text[<{$key|escape}>]" value="" />
</div>
<{/foreach}>
</div>
<{/if}>
<!-- //名入れ設定 -->

<div id="custom-options-container"></div>

<!-- 購入フォーム -->
<div class="p-product-form">
<{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
<div class="p-product-form-stock">
<div class="p-product-form-stock__input">
<input type="text" name="product_num" value="<{$product.init_num}>" />
<span class="p-product-form-stock__unit"><{$product.unit}></span>
</div>
<{if $product.stock_disp}>
<div class="p-product-form-stock__stock">

MONO

▼【商品詳細html】変更前


<{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
<div class="c-form__unit">
<div class="c-form__unit-label c-form__unit-label--fix-margin">
購入数
</div>
<div class="c-form__unit-body">
<input type="text" name="product_num" value="<{$product.init_num}>" class="c-input-text p-cart-form__add-cart-num" />
<div class="p-cart-form__add-num-wrap">
<a href="<{$num_up_url}>" class="p-cart-form__add-num p-cart-form__add-num--up">
<svg role="img" aria-hidden="true"><use xlink:href="#angle-up"></use></svg>
</a>
<a href="<{$num_dw_url}>" class="p-cart-form__add-num p-cart-form__add-num--down">
<svg role="img" aria-hidden="true"><use xlink:href="#angle-down"></use></svg>
</a>
</div>
<{$product.unit}>
</div>
</div>
<{/if}>
<div class="p-cart-form__button-wrap">
<{if $product.soldout_flg == 0 && !$shop_stop_flg && !$product.login_sale_flg}>
<{if $is_enable_async_cart_in_pc}>
<button type="submit" class="p-cart-form__add-cart-button c-button c-button--solid cart_in_async">
<svg class="c-button__icon" role="img" aria-hidden="true">
<use xlink:href="#shopping-cart"></use>
</svg>
カートに入れる
</button>
<{else}>

▼【商品詳細html】変更後


<{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
<div class="c-form__unit">
<div class="c-form__unit-label c-form__unit-label--fix-margin">
購入数
</div>
<div class="c-form__unit-body">
<input type="text" name="product_num" value="<{$product.init_num}>" class="c-input-text p-cart-form__add-cart-num" />
<div class="p-cart-form__add-num-wrap">
<a href="<{$num_up_url}>" class="p-cart-form__add-num p-cart-form__add-num--up">
<svg role="img" aria-hidden="true"><use xlink:href="#angle-up"></use></svg>
</a>
<a href="<{$num_dw_url}>" class="p-cart-form__add-num p-cart-form__add-num--down">
<svg role="img" aria-hidden="true"><use xlink:href="#angle-down"></use></svg>
</a>
</div>
<{$product.unit}>
</div>
</div>
<{/if}>
<div id="custom-options-container"></div>
<div class="p-cart-form__button-wrap">
<{if $product.soldout_flg == 0 && !$shop_stop_flg && !$product.login_sale_flg}>
<{if $is_enable_async_cart_in_pc}>
<button type="submit" class="p-cart-form__add-cart-button c-button c-button--solid cart_in_async">
<svg class="c-button__icon" role="img" aria-hidden="true">
<use xlink:href="#shopping-cart"></use>
</svg>
カートに入れる
</button>
<{else}>

MODE

▼【商品詳細html】変更前


<div class="product_cart_order row">
<{if $shop_stop_flg == false && $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<div class="col col-lg-12 clearfix">
<div class="product_cart_select_name">購入数</div>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_cart_init_num" />
<ul class="product_cart_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_cart_unit"><{$product.unit}></div>
</div>
<div class="col col-lg-12">
<{if $is_enable_async_cart_in_pc}>
<button type="submit" class="btn btn-block btn-addcart cart_in_async">
<i class="icon-lg-w icon-cart"></i><span>カートに入れる</span>
</button>
<{else}>
<span class="disable_cartin">
<button class="btn btn-block btn-addcart" type="submit">
<i class="icon-lg-w icon-cart"></i><span>カートに入れる</span>
</button>
</span>
<{/if}>

▼【商品詳細html】変更後


<div class="product_cart_order row">
<div id="custom-options-container"></div>
<{if $shop_stop_flg == false && $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<div class="col col-lg-12 clearfix">
<div class="product_cart_select_name">購入数</div>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_cart_init_num" />
<ul class="product_cart_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_cart_unit"><{$product.unit}></div>
</div>
<div class="col col-lg-12">
<{if $is_enable_async_cart_in_pc}>
<button type="submit" class="btn btn-block btn-addcart cart_in_async">
<i class="icon-lg-w icon-cart"></i><span>カートに入れる</span>
</button>
<{else}>
<span class="disable_cartin">
<button class="btn btn-block btn-addcart" type="submit">
<i class="icon-lg-w icon-cart"></i><span>カートに入れる</span>
</button>
</span>
<{/if}>

ICE

▼【商品詳細html】変更前


<{if $product.product_text_titles}>
<div class="section__block text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl class="dl-vertical-list">
<dt class="dl-vertical-list__title text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="dl-vertical-list__content text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<{/if}>
<div class="product__order row">
<dl class="product__init dl-vertical-list col col-lg-5 col-md-12">
<dt class="dl-vertical-list__title">購入数</dt>
<dd class="dl-vertical-list__content">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product__init-num" />
<div class="product__init-updw">
<a href="<{$num_up_url}>"><i class="icon-b icon-chevron_thin_up"></i></a><br />
<a href="<{$num_dw_url}>"><i class="icon-b icon-chevron_thin_down"></i></a>
</div>
<span class="product__unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product__init-num" disabled="disabled" />
<{/if}>
</dd>
</dl>

▼【商品詳細html】変更後


<{if $product.product_text_titles}>
<div class="section__block text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl class="dl-vertical-list">
<dt class="dl-vertical-list__title text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="dl-vertical-list__content text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<{/if}>
<div class="section__block">
<div id="custom-options-container"></div>
</div>
<div class="product__order row">
<dl class="product__init dl-vertical-list col col-lg-5 col-md-12">
<dt class="dl-vertical-list__title">購入数</dt>
<dd class="dl-vertical-list__content">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product__init-num" />
<div class="product__init-updw">
<a href="<{$num_up_url}>"><i class="icon-b icon-chevron_thin_up"></i></a><br />
<a href="<{$num_dw_url}>"><i class="icon-b icon-chevron_thin_down"></i></a>
</div>
<span class="product__unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product__init-num" disabled="disabled" />
<{/if}>
</dd>
</dl>

MANY

▼【商品詳細html】変更前


<!-- 名入れ設定 -->
<div class="text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl class="mar--0">
<dt class="text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<!-- //名入れ設定 -->
<{/if}>
<!-- 購入フォーム -->
<div class="order row">
<dl class="init-list col col-sm-12 col-lg-4">
<dt class="init-list__name">
購入数
</dt>
<dd class="init-list__detail">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="init-list__detail-num" />
<ul class="init-list__detail-updw unstyled">
<li><a href="<{$num_up_url}>"><i class="fa fa-angle-up fa-2x"></i></a></li>
<li><a href="<{$num_dw_url}>"><i class="fa fa-angle-down fa-2x"></i></a></li>
</ul>
<span class="init-list__detail-unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="init-list__detail-num" disabled="disabled" />
<{/if}>

▼【商品詳細html】変更後


<!-- 名入れ設定 -->
<div class="text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl class="mar--0">
<dt class="text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<!-- //名入れ設定 -->
<{/if}>
<div id="custom-options-container"></div>
<!-- 購入フォーム -->
<div class="order row">
<dl class="init-list col col-sm-12 col-lg-4">
<dt class="init-list__name">
購入数
</dt>
<dd class="init-list__detail">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="init-list__detail-num" />
<ul class="init-list__detail-updw unstyled">
<li><a href="<{$num_up_url}>"><i class="fa fa-angle-up fa-2x"></i></a></li>
<li><a href="<{$num_dw_url}>"><i class="fa fa-angle-down fa-2x"></i></a></li>
</ul>
<span class="init-list__detail-unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="init-list__detail-num" disabled="disabled" />
<{/if}>

PACK

▼【商品詳細html】変更前


<!-- 名入れ設定 -->
<div class="text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl>
<dt class="text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<!-- //名入れ設定 -->
<{/if}>
<!-- 購入フォーム -->
<div class="product-order row">
<dl class="product-init-list col col-lg-4 col-sm-12">
<dt class="product-init-list__name">
購入数
</dt>
<dd class="product-init-list__detail">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-list__detail-num" />
<ul class="product-init-list__detail-updw unstyled">
<li><a href="<{$num_up_url}>"><i class="icon-lg-b icon-triangle_up"></i></a></li>
<li><a href="<{$num_dw_url}>"><i class="icon-lg-b icon-triangle_down"></i></a></li>
</ul>
<span class="product-init-list__detail-unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-list__detail-num" disabled="disabled" />
<{/if}>

▼【商品詳細html】変更後


<!-- 名入れ設定 -->
<div class="text-titles row">
<ul class="text-titles-list row">
<{foreach from=$product.product_text_titles key=key item=val}>
<li class="text-titles-list__unit col col-lg-12">
<dl>
<dt class="text-titles-list__name">
<{$val|escape}>
</dt>
<dd class="text-titles-list__detail row">
<input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text col col-lg-12" />
</dd>
</dl>
</li>
<{/foreach}>
</ul>
</div>
<!-- //名入れ設定 -->
<{/if}>
<div id="custom-options-container"></div>
<!-- 購入フォーム -->
<div class="product-order row">
<dl class="product-init-list col col-lg-4 col-sm-12">
<dt class="product-init-list__name">
購入数
</dt>
<dd class="product-init-list__detail">
<{if $product.soldout_flg == 0 && !$product.login_sale_flg}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-list__detail-num" />
<ul class="product-init-list__detail-updw unstyled">
<li><a href="<{$num_up_url}>"><i class="icon-lg-b icon-triangle_up"></i></a></li>
<li><a href="<{$num_dw_url}>"><i class="icon-lg-b icon-triangle_down"></i></a></li>
</ul>
<span class="product-init-list__detail-unit"><{$product.unit}></span>
<{else}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-list__detail-num" disabled="disabled" />
<{/if}>

Panorama

▼【商品詳細html】変更前


<{if $shop_stop_flg == false}>
<tr class="product-order-form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-num" />
<ul class="product-init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product-unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg"> - </div>
<{elseif $product.login_sale_flg == true}>
<div class="product-member-sale-msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<{if $option_output_mode}>
<div id="prd_opt_table" class="product-option-table table">
<{$option_table}>
</div>
<{/if}>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<{if $is_enable_async_cart_in_pc}>
<input class="btn btn-02 btn-xlg btn-block cart_in_async" type="submit" value="カートに入れる" />
<{else}>
<div class="disable_cartin">
<input class="btn btn-02 btn-xlg btn-block" type="submit" value="カートに入れる" />
</div>
<{/if}>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="btn btn-02 btn-xlg btn-block product-cart-btn product-quick-order-btn">クイック購入</a>
</div>
<{/if}>
<div class="stock_error"></div>
<{elseif $product.soldout_flg == 1}>
<input class="btn btn-02 btn-xlg btn-block" type="button" value="SOLD OUT" disabled="disabled" />
<{/if}>

▼【商品詳細html】変更後


<{if $shop_stop_flg == false}>
<tr class="product-order-form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product-init-num" />
<ul class="product-init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product-unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg"> - </div>
<{elseif $product.login_sale_flg == true}>
<div class="product-member-sale-msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<div id="custom-options-container"></div>
<{if $option_output_mode}>
<div id="prd_opt_table" class="product-option-table table">
<{$option_table}>
</div>
<{/if}>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<{if $is_enable_async_cart_in_pc}>
<input class="btn btn-02 btn-xlg btn-block cart_in_async" type="submit" value="カートに入れる" />
<{else}>
<div class="disable_cartin">
<input class="btn btn-02 btn-xlg btn-block" type="submit" value="カートに入れる" />
</div>
<{/if}>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="btn btn-02 btn-xlg btn-block product-cart-btn product-quick-order-btn">クイック購入</a>
</div>
<{/if}>
<div class="stock_error"></div>
<{elseif $product.soldout_flg == 1}>
<input class="btn btn-02 btn-xlg btn-block" type="button" value="SOLD OUT" disabled="disabled" />
<{/if}>

ワンプレートホワイト（有料）

▼【商品詳細html】変更前


<{if $shop_stop_flg == false}>
<tr class="product_order_form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_init_num" />
<ul class="product_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg">売り切れ</div>
<{elseif $product.login_sale_flg == true}>
<div class="product_member_sale_msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<div class="clearfix">
<div class="disable_cartin">
<input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />
</div>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="product_cart_btn product_quick_order_btn">クイック購入</a>
</div>
<{/if}>
</div>
<{/if}>
<div class="stock_error">
</div>
</div>

▼【商品詳細html】変更後


<{if $shop_stop_flg == false}>
<tr class="product_order_form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_init_num" />
<ul class="product_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg">売り切れ</div>
<{elseif $product.login_sale_flg == true}>
<div class="product_member_sale_msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<div id="custom-options-container"></div>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<div class="clearfix">
<div class="disable_cartin">
<input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />
</div>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="product_cart_btn product_quick_order_btn">クイック購入</a>
</div>
<{/if}>
</div>
<{/if}>
<div class="stock_error">
</div>
</div>

ワンプレートホワイト（無料）

▼【商品詳細html】変更前


<{if $shop_stop_flg == false}>
<tr class="product_order_form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_init_num" />
<ul class="product_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg">Soldout</div>
<{elseif $product.login_sale_flg == true}>
<div class="product_member_sale_msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<div class="clearfix">
<div class="disable_cartin">
<input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />
</div>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="product_cart_btn product_quick_order_btn">クイック購入</a>
</div>
<{/if}>
</div>
<{/if}>
<div class="stock_error">
</div>
</div>

▼【商品詳細html】変更後


<{if $shop_stop_flg == false}>
<tr class="product_order_form">
<th>購入数</th>
<td>
<{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<input type="text" name="product_num" value="<{$product.init_num}>" class="product_init_num" />
<ul class="product_init">
<li><a href="<{$num_up_url}>"></a></li>
<li><a href="<{$num_dw_url}>"></a></li>
</ul>
<div class="product_unit"><{$product.unit}></div>
<{else}>
<{if $product.soldout_flg == 1}>
<div class="product_soldout_msg">Soldout</div>
<{elseif $product.login_sale_flg == true}>
<div class="product_member_sale_msg">会員のみ購入できます</div>
<{/if}>
<{/if}>
</td>
</tr>
<{/if}>
</table>
<div id="custom-options-container"></div>
<!-- //商品情報 -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
<div class="clearfix">
<div class="disable_cartin">
<input class="product_cart_btn product_addcart_btn" type="submit" value=" カートに入れる" />
</div>
<{if $easy_order_flg == true}>
<div class="disable_quick">
<a href="<{$easy_order_url}>" class="product_cart_btn product_quick_order_btn">クイック購入</a>
</div>
<{/if}>
</div>
<{/if}>
<div class="stock_error">
</div>
</div>

カラーミーキット（2カラム）

▼【商品詳細html】変更前


<!-- オプション情報 -->
<{if $opt_url != ""}>
<div class="prduct-option row">
<{if $option_output_mode}>
<div id="prd-opt-table" class="txt_c">
<{$option_table}>
</div>
<div id="prd-opt-select">
<{section name=num loop=$option}>
<div class="col col-lg-6 col-sm-12 mar_b_20">
<div><{$option[num].name}></div>
<select name="<{$option[num].select_name}>">
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
</select>
</div>
<{/section}>
</div>
<{else}>
<{section name=num loop=$option}>
<div class="col col-lg-6 col-sm-12 mar_b_20">
<div><{$option[num].name}></div>
<select name="<{$option[num].select_name}>">
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
</select>
</div>
<{/section}>
<{/if}>
</div>
<{/if}>
<!-- // オプション情報 -->
<!-- 購入フォーム -->
<div class="product-order mar_b_50">
<div>
<{if $shop_stop_flg == false && $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<div class="mar_t_20 mar_b_20 txt_c">
<span class="input-prepend input-append">
<a href="<{$num_up_url}>" class="btn pad_10"><i class="icon-lg-b icon-chevron_up"></i></a>
<input type="text" name="product_num" value="<{$product.init_num}>" class="pad_10" />
<a href="<{$num_dw_url}>" class="btn pad_10"><i class="icon-lg-b icon-chevron_down"></i></a>
</span>
<{if $product.unit != ""}>
<span class="txt_24 mar_l_10 pad_t_5 pad_l_5"><{$product.unit}></span>
<{/if}>
</div>

▼【商品詳細html】変更後


<!-- オプション情報 -->
<{if $opt_url != ""}>
<div class="prduct-option row">
<{if $option_output_mode}>
<div id="prd-opt-table" class="txt_c">
<{$option_table}>
</div>
<div id="prd-opt-select">
<{section name=num loop=$option}>
<div class="col col-lg-6 col-sm-12 mar_b_20">
<div><{$option[num].name}></div>
<select name="<{$option[num].select_name}>">
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
</select>
</div>
<{/section}>
</div>
<{else}>
<{section name=num loop=$option}>
<div class="col col-lg-6 col-sm-12 mar_b_20">
<div><{$option[num].name}></div>
<select name="<{$option[num].select_name}>">
<{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
</select>
</div>
<{/section}>
<{/if}>
</div>
<{/if}>
<!-- // オプション情報 -->
<div id="custom-options-container"></div>
<!-- 購入フォーム -->
<div class="product-order mar_b_50">
<div>
<{if $shop_stop_flg == false && $product.soldout_flg == 0 && $product.login_sale_flg == false}>
<div class="mar_t_20 mar_b_20 txt_c">
<span class="input-prepend input-append">
<a href="<{$num_up_url}>" class="btn pad_10"><i class="icon-lg-b icon-chevron_up"></i></a>
<input type="text" name="product_num" value="<{$product.init_num}>" class="pad_10" />
<a href="<{$num_dw_url}>" class="btn pad_10"><i class="icon-lg-b icon-chevron_down"></i></a>
</span>
<{if $product.unit != ""}>
<span class="txt_24 mar_l_10 pad_t_5 pad_l_5"><{$product.unit}></span>
<{/if}>
</div>

ウェスト（ホワイト）

▼【商品詳細html】変更前

<!--商品オプションを表形式で表示-->
<{if $option_output_mode}>
<{$option_table}>
<{/if}>

<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
<div class="disable_cartin button_area">
<input type="submit" value="カートに入れる" class="btn btn-primary btn-large" />
</div>
<{if $easy_order_flg == true}>
<div class="btn_quick disable_quick"><a href="<{$easy_order_url}>" class="btn btn-success btn-large">クイック購入</a></div>
<{/if}>
<{else}>
<{if $product.soldout_flg }>
<div class="sold_out">SOLD OUT</div>
<{elseif $product.login_sale_flg }>
<div>会員のみ購入できます</div>
<{/if}>
<{/if}>

▼【商品詳細html】変更後

 <!--商品オプションを表形式で表示-->
<{if $option_output_mode}>
<{$option_table}>
<{/if}>

<div id="custom-options-container"></div>

<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない -->
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
<div class="disable_cartin button_area">
<input type="submit" value="カートに入れる" class="btn btn-primary btn-large" />
</div>
<{if $easy_order_flg == true}>
<div class="btn_quick disable_quick"><a href="<{$easy_order_url}>" class="btn btn-success btn-large">クイック購入</a></div>
<{/if}>
<{else}>
<{if $product.soldout_flg }>
<div class="sold_out">SOLD OUT</div>
<{elseif $product.login_sale_flg }>
<div>会員のみ購入できます</div>
<{/if}>
<{/if}>

カスタムオプションが表示完了されるまでカートインをブロックするには

利用中のテンプレートの商品詳細HTML編集で、『カートに入れる』ボタンタグにdata-custom-option-wait="true"を
指定することで、カスタムオプションが表示完了するまでカートインをブロックすることができます。

たとえば、以下のように指定します。(DISCOVER有料版の例)

変更前のボタン

<button type="submit" class="c-btn-cart">
    <i class="c-icon-cart"></i>カートに入れる
</button>

変更後のボタン

<button type="submit" class="c-btn-cart" data-custom-option-wait="true">
    <i class="c-icon-cart"></i>カートに入れる
</button>

カスタムオプションとは

ご利用方法

1. カスタムオプションを登録する

2. 基本設定を入力する

対象条件について

3. 商品オプション情報を入力する

ショップページでの見た目について

上記で設定した表示箇所に登録したオプションが表示されます。

受注画面での見た目について

売上詳細の商品名の項目に、購入されたオプション情報が表示されます。

カスタムオプションご利用時の注意点

見た目の変更について

価格、在庫数について

対象条件について

テンプレートの該当箇所に追加する

おすすめのタグ設置箇所

カスタムオプションが表示完了されるまでカートインをブロックするには

関連記事