【カスタム】追加タグ
お気に入りボタンを設置するためのカラーミー専用関数です。その設置方法は下記になります。 ※ お気に入りに追加された商品情報の表示は独自タグ一覧(PC、スマートフォン)を参照ください。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、お気に入りボタンを表示させるタグを追記する。（CSSにより見た目の編集可能です。）
【記述例】（こちらは商品詳細への記述例になります）
上記のタグをコピーして該当箇所にペーストしてお使いください。
【パラメータの説明】
<button type="button" class="favorite-button" <{favorite_button_attribute (1)product_id=$product.id (2)added_class="fav-items"}>>お気に入りボタン</button>
商品IDになります。（こちらの値は設置する場所に応じて便宜変更ください。）
お気に入りがオンの場合のclass名をご指定いただけます。(省略時はfav-addedになります。)
テンプレートMONO以外のテンプレートに「お気に入りボタン」を設定される方へ
上記のHTMLタグをテンプレートMONO以外に貼り付けると、HTMLのみの貼り付けになるため、
実際に表示される「お気に入りボタン」はMONOと同じにはなりません。（ハートマークではなく、テキストボタンになります）
MONOと同じものにする、もしくは独自のお気に入りボタンを設置し利用するためには、
別途CSSの記述をいただく必要がございます。
HTML/CSSにつきましてはサポートの対象外となるため、CSSの追加については
オーナー様独自に検討をいただきますようお願いします。
スマートフォン最適化ショップを設定している場合に、PCショップからスマートフォン最適化表示へ切り替えを行う為のリンクを設置する記述方法です。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、スマートフォン最適化表示用のリンクを追記する。
【記述例】 以下のようにif文と組み合わせて記述することにより、PCでショップを表示した場合はスマートフォンへのリンクが表示されず、スマートフォン等でアクセスした場合のみリンクが表示されるようになります。
上記のタグをコピーして該当箇所にペーストしてお使いください。
商品詳細ページにLINE「LINEで送る」ボタンを設置するLINEの「LINEで送る」ボタンを簡単に出力するカラーミー専用関数です。 PC用デザインテンプレート、スマートフォン用デザインテンプレートでご利用いただけます。 ※「LINEで送る」ボタンは、スマートフォンでショップを閲覧した場合のみ表示されます。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、LINEが提供するボタンを表示させるタグを追記する。
旧独自タグ <{$line_button}>を下記の新独自タグへ書き換えることでデザインを変更することができます。詳細はこちら
【記述例】
▼デフォルト表示
上記のタグをコピーして該当箇所にペーストしてお使いください。
【パラメータの説明】
<{line_button (1)type="share-a" }>
パラメータを変更する事でデザインを決定します。
▼値説明
| type値 | デザイン |
|---|---|
| share-a | |
| share-b |  |
| share-c |  |
| share-d |  |
| share-e |  |
商品詳細ページにTwitter「Tweet ボタン」を設置するTwitterの「Tweet ボタン」を簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、Twitterが提供するボタンを表示させるタグを追記する。
【記述例】
▼デフォルト表示
上記のタグをコピーして該当箇所にペーストしてお使いください。
【各パラメータの説明】
<{twitter_tweet (1) via="************" (2) text=$productlist[num].name (*3)url=$productlist[num].link_url }>
ボタンを利用してツイートが終わった後にフォローするよう促すためのアカウントを指定できます。 （viaとrelatedは同じ動きをしますが、それぞれひとつしか指定できません。） ▼例 <{twitter_tweet via="colormeshop"}> "colormeshop"の部分をお好きな文字列に変更してください。
ツイート内テキストを指定できます。 指定しない場合ページタイトルが自動で挿入されます。 以下のように変数を代入することもで可能です。 <{twitter_tweet url=$productlist[num].link_url text=$productlist[num].name}>
「チェック」で共有する場合のURLを表示します。 相対パスでの記入も可能です。 以下のように変数を代入することも可能です。 <{twitter_tweet url=$productlist[num].link_url}>
商品詳細ページにFacebook「いいね」または「おすすめ」ボタンを設置するfacebookの「いいね」ボタンを簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、Facebookが提供するボタンを表示させるタグを追記する。
【記述例】
▼デフォルト表示
上記のタグをコピーして該当箇所にペーストしてお使いください。
▼一番小さいボタン：高さ21px、幅150px、「いいね」表示に指定したタグ（推奨）
上記のタグをコピーして該当箇所にペーストしてお使いください。
【各パラメータの説明】
<{facebook_like (1)layout="button_count" (2) width=150 (3)action="like" (*4)url="http://***.shop-pro.jp/"}>
表示スタイルを決定します。表示スタイルに合わせて高さ（height）も決定します。 ▼値説明
| "standard" | 一番標準的なものです。高さ（height）は80固定です。 デフォルトはこの値なので、指定しない場合はこの表示になります。 |
| "box_count" | 中ぐらいの大きさの表示です。高さ（height）は65固定です。 |
| "button_count" | 一番小さい表示です。高さ（height）は21固定です。（推奨） |
px単位で指定します。 layoutの設定によっては表示されないケースもあるので必ず確認してください。 指定しない場合450pxとなります。
「いいね(like)」か「おすすめ(recommend)」を切り替えることができます。 ▼値説明
| "like" | 「いいね(like)」ボタンを表示します。 |
| "recommend" | 「おすすめ(recommend)」ボタンを表示します。 指定しない場合、もしくは存在しない値を指定した場合、likeになります。 |
「いいね」で共有するURLを表示します。 相対パスでの記入も可能です。 指定しない場合現在表示中のURLが自動で入ります。 但し、セキュリティの関係上PHPSESSIDがクエリストリング中にある場合は強制的に削除されます。 以下のようにカラーミーショップの独自タグを用いて変数を代入することも可能です。
<{facebook_like layout="button_count" url=$productlist[num].link_url}>
商品詳細ページにmixi「mixiチェック」を設置するmixiの「チェック」ボタンを簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。
編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー
いずれのhtmlテンプレートでもご利用いただけます。
編集内容・・・ 掲載したい場所のhtmlテンプレート内に、mixiが提供するボタンを表示させるタグを追記する。
【重要】独自ドメインをご利用の場合、mixiチェックボタンを設置するには、mixiデベロッパー登録 が必要です。
【記述例】
▼デフォルト表示
上記のタグをコピーして該当箇所にペーストしてお使いください。
【各パラメータの説明】
※mixiチェックに関する技術仕様詳細は、mixi Developer Centerをご覧ください。
<{mixi_check (1)button="button-2" (2) url=$productlist[num].link_url (3) data_key="XXXXXXXXXXX"}>
表示スタイルを決定します。表示スタイルに合わせて高さ（height）も決定します。 ボタンの種類（見た目）を切り替えることができます。 button-1～5まで用意されています。 詳細はこちら 指定しない場合、もしくは存在しない値を指定した場合、"button-1"になります。
「チェック」で共有する場合のURLを表示します。 相対パスでの記入も可能です。 指定しない場合現在表示中のURLが自動で入ります。 但し、セキュリティの関係上PHPSESSIDがクエリストリング中にある場合は強制的に削除されます。 以下のように変数を代入することも可能です。 <{mixi_check url=$productlist[num].link_url}>
独自ドメインをご利用の場合、mixiチェックボタンを設置するには、mixiデベロッパー登録 を行った上で、この値を記載してください。 また、サブドメイン（*shop-pro.jp）でご利用中の方も、mixiデベロッパー登録を推奨しております。 mixiデベロッパー登録をしない場合、ボタンは表示されますが実際にmixiチェックを行う際に「不正な投稿内容のため、チェックできません。 」というエラーが表示されます。 登録後に発行される data_key を指定してください。 ▼例 <{mixi_check data_key="XXXXXXXXXXX"}> 標準で *.shop-pro.jp を許可しては居ますが動作は不安定です。 サブドメインでご利用の方も、mixiデベロッパー登録をして頂くと確実に利用できるようになります。
ご利用条件・・・「クイック購入」ボタンをショップに表示するには、ショップがカラメルに出店していて、決済方法に「イプシロン」のクレジット決済を設定している必要があります。
編集するテンプレート・・・商品詳細 html
編集内容・・・ 「クイック購入」ボタンを設置したい箇所に、以下に掲載している独自タグを追加する。
「クイック購入」ボタン表示用独自タグ
「GMOポイント」共通ヘッダーに表示される「クイック購入」ボタンと同じデザインのボタンです。
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/img/gmo_header/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
各テンプレート毎の「クイック購入」ボタン表示用独自タグ
下記のテンプレート名をクリックすると、テンプレート毎のボタン表示用独自タグに移動します。
■メモリー
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/20/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■オレンジノート
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/17/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■スカイノート
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/24/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■レタスノート
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/25/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■プレーン
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/13/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■シンプル（レッド）
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/4/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■シンプル（ブルー）
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/7/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■シンプル（グレー）
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/8/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■シンプル（ラベンダー）
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/9/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ミニ
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/10/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ヘンプ
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/26/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ビター
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/18/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■アクア
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/12/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ブロック
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/3/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■鹿の子
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/19/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■レース
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/16/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ビューティー
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/15/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ナチュラル
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/1/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■エレガント
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/6/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■フラワー
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/2/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ペーパー
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/14/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ウッド
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/11/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ストライプ
 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="http://img.shop-pro.jp/tmpl_img/5/btn_quick.gif" alt="クイック購入">
</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■2カラム（左メニュー）
| クイック購入 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">クイック購入</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■2カラム（右メニュー）
| クイック購入 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">クイック購入</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■3カラム
| クイック購入 |
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">クイック購入</a>
<{/if}>
上記のタグをコピーして該当箇所にペーストしてお使いください。 |
■ショップ様が制作されたボタンを表示する独自タグ
下記の 画像URL の部分を、ショップ様が制作されたボタン画像を保存してあるURLに書き変えてご利用ください。
<{if $easy_order_flg == true}>
<a href="<{$easy_order_url}>">
<img src="画像URL" alt="クイック購入">
</a>
<{/if}>
編集するテンプレート・・・トップhtml
編集内容・・・ 「おすすめ商品」「売れ筋商品」の各表示箇所に、【商品簡易説明】を表示させる独自タグ 【 s_expl 】 を追記する。
【記述例】
■おすすめ商品の場合、 <{section name=num loop=$recommend}> から <{/section}>の間に、<{$recommend[num].s_expl}>を追加します。
■売れ筋商品の場合、<{section name=num loop=$seller}> から <{/section}>の間に、<{$seller[num].s_expl}>を追加します。
※以下のソースは、テンプレート「プレーン」の場合です。
<!--おすすめ商品-->
<{if $recommend_num != 0}>
<h2>Recommend</h2>
<{section name=num loop=$recommend}>
<div class="itemarea">
<a href="<{$recommend[num].link_url}>"><{if $recommend[num].img_url != ""}><img src="<{$recommend[num].img_url}>" />
<{else}><img src="http://img.shop-pro.jp/tmpl_img/13/now100.gif" />
<{/if}></a><br />
<a href="<{$recommend[num].link_url}>"><{$recommend[num].name}></a><br />
<{$recommend[num].price}>
<br />
<{$recommend[num].s_expl}>
</div>
<!-- 3個で改行(最後は含まない) -->
<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
<br style="clear:both;" />
<{/if}>
<{/section}>
<{/if}>
<br style="clear: both;">
<!--//おすすめ商品-->
<!--売れ筋商品-->
<{if $seller_num != 0}>
<h2>Top Sellers</h2>
<{section name=num loop=$seller}>
<div class="itemarea">
<a href="<{$seller[num].link_url}>"><{if $seller[num].img_url != ""}><img src="<{$seller[num].img_url}>" />
<{else}><img src="http://img.shop-pro.jp/tmpl_img/13/now100.gif" />
<{/if}></a><br />
<a href="<{$seller[num].link_url}>"><{$seller[num].name}></a><br />
<{$seller[num].price}>
<br />
<{$seller[num].s_expl}>
</div>
<!-- 3個で改行(最後は含まない) -->
<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
<br style="clear:both;" />
<{/if}>
<{/section}>
<{/if}>
<br style="clear: both;">
<!--//売れ筋商品-->
編集するテンプレート・・・商品一覧html、商品検索結果htmlのいずれか
編集内容・・・ 「商品一覧」に、【定価】を表示させる独自タグ 【 teika 】 を追記する。
【使用例】
商品一覧ページにて、各商品に定価を表示させる場合 <{$productlist[num].teika}>
「おすすめ商品」「売れ筋商品」に定価を表示させる場合 <{$recommend[num].teika}>
定価から販売価格を値下げした場合に、定価を打ち消した形で販売価格を表示することが可能です。
（ 打ち消し線のタグは <s> ～ </s> ） 2,980円1,500円 ・・・（定価2,980円 販売価格1,500円）
【記述例】
<{$productlist[num].teika}> <{$productlist[num].price}>