テンプレートにお気に入り機能を入れる場合、アプリで追加する方法と、ご自身で設定する方法があります。設置が不安な方はアプリをご利用ください。

実装されるお気に入り機能はcookie(クッキー)を使用しています。

※cookie とは、サーバーコンピュータからお客様のブラウザに送信され、お客様が使用しているコンピュータのストレージに蓄積される情報です。

※お気に入りへ追加した商品はアカウントページとの連携（アカウントページ内での確認）は出来ませんのであらかじめご了承ください。

※cookieへ保持される最大件数は20件となります。20件を超えると、一番古い商品を削除して、新しい商品を追加します。

アプリで追加する方法

「お気に入り」アプリをご利用いただくことで、 カンタンにお気に入り機能を追加することができます。詳しくは下記より対応テンプレートをご確認ください。

ご自身で設定する方法

お気に入りボタンを設置するためのカラーミー専用関数です。その設置方法は下記になります。 ※ お気に入りに追加された商品情報の表示は独自タグ一覧(PC、スマートフォン)を参照ください。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、お気に入りボタンを表示させるタグを追記する。（CSSにより見た目の編集可能です。）

【記述例】（こちらは商品詳細への記述例になります）

<button type="button" class="favorite-button" <{favorite_button_attribute
 product_id=$product.id added_class="fav-items"}>>お気に入りボタン</button>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【パラメータの説明】

<button type="button" class="favorite-button" <{favorite_button_attribute (1)product_id=$product.id (2)added_class="fav-items"}>>お気に入りボタン</button>

商品IDになります。（こちらの値は設置する場所に応じて便宜変更ください。）

お気に入りがオンの場合のclass名をご指定いただけます。(省略時はfav-addedになります。)

スマートフォン最適化ショップを設定している場合に、PCショップからスマートフォン最適化表示へ切り替えを行う為のリンクを設置する記述方法です。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、スマートフォン最適化表示用のリンクを追記する。

【記述例】 以下のようにif文と組み合わせて記述することにより、PCでショップを表示した場合はスマートフォンへのリンクが表示されず、スマートフォン等でアクセスした場合のみリンクが表示されるようになります。

<{if $view_smartphone_url}><a href="<{$view_smartphone_url}>">
スマートフォン版を表示する</a><{/if}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

noteの「noteで書く」ボタンを簡単に出力するカラーミー専用関数です。 PC用デザインテンプレート、スマートフォン用デザインテンプレートでご利用いただけます。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、noteが提供するボタンを表示させるタグを追記する。

【記述例】

▼デフォルト表示

<{note_button}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【パラメータの説明】

<{note_button (1)url="https://shop-pro.jp/" (2)hashtags="店舗名,新商品"}>

投稿するURLを固定する場合に指定します。

ハッシュタグを追記する場合に指定します。（カンマ区切りで記載）

LINEの「LINEで送る」ボタンを簡単に出力するカラーミー専用関数です。 PC用デザインテンプレート、スマートフォン用デザインテンプレートでご利用いただけます。 ※「LINEで送る」ボタンは、スマートフォンでショップを閲覧した場合のみ表示されます。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、LINEが提供するボタンを表示させるタグを追記する。

旧独自タグ <{$line_button}>を下記の新独自タグへ書き換えることでデザインを変更することができます。詳細はこちら

【記述例】

▼デフォルト表示

<{line_button}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【パラメータの説明】

<{line_button (1)type="share-a" (2)color="default" }>

パラメータを変更する事でデザインを決定します。

▼値説明

type値	color値	デザイン
share-a	default
share-a	grey
share-b	default
share-b	grey
share-c	default
share-c	grey

その他に、サイズ、シェア数の表示の有無が設定できます。
必要に応じて下記を加えてください。

サイズ

• 小: size="small"
• 大: size="large"

シェア数

• オン: count="true"
• オフ: count="false"

X（旧Twitter）の「Xポスト ボタン」を簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、X（旧Twitter）が提供するボタンを表示させるタグを追記する。

【記述例】

▼デフォルト表示

<{twitter_tweet}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【各パラメータの説明】

<{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の「シェアする」ボタンを簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、Facebookが提供するボタンを表示させるタグを追記する。

【記述例】

▼デフォルト表示（推奨）

<{* facebook_share *}><{facebook_share}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

▼高さ28px、幅144px、button表示に指定したタグ

<{* facebook_share *}><{facebook_share layout="button" size="large"}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【各パラメータの説明】

<{* facebook_share *}><{facebook_share (1)layout="button_count"   (2) size="large"  }>

表示スタイルを決定します。 

"button"	一番標準的なボタンです。高さ（height）は28固定です。
"box_count"	button_countと同じ動作をしますが別の表示形式になります。
"button_count"	ボタンが押された回数をカウントします。（推奨）

sizeはsmall、largeから選択できます。sizeに合わせて高さ（height）も変動します。

Facebook「いいね」ボタンは動作が保証されていないため非推奨です。「シェアする」ボタン を推奨しています。

facebookの「いいね」ボタンを簡単に出力するカラーミー専用関数です。 ※モバイルでショップを閲覧した場合、正常に表示されない場合があります。

編集するテンプレート・・・共通、トップ、商品一覧、商品詳細、特定商取引、商品検索結果、プライバシーポリシー

いずれのhtmlテンプレートでもご利用いただけます。

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、Facebookが提供するボタンを表示させるタグを追記する。

【記述例】

▼デフォルト表示

<{facebook_like}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

▼一番小さいボタン：高さ21px、幅150px、「いいね」表示に指定したタグ（推奨）

<{facebook_like layout="button_count" width=150 action="like"}>

上記のタグをコピーして該当箇所にペーストしてお使いください。

【各パラメータの説明】

<{facebook_like  (1)layout="button_count"   (2) width=150   (3)action="like"   (*4)url="http://***.shop-pro.jp/"}>

表示スタイルを決定します。表示スタイルに合わせて高さ（height）も決定します。 ▼値説明

px単位で指定します。 layoutの設定によっては表示されないケースもあるので必ず確認してください。 指定しない場合450pxとなります。

「いいね(like)」か「おすすめ(recommend)」を切り替えることができます。 ▼値説明

「いいね」で共有するURLを表示します。 相対パスでの記入も可能です。 指定しない場合現在表示中のURLが自動で入ります。 但し、セキュリティの関係上PHPSESSIDがクエリストリング中にある場合は強制的に削除されます。 以下のように当サービスの独自タグを用いて変数を代入することも可能です。

<{facebook_like layout="button_count" url=$productlist[num].link_url}>

編集するテンプレート・・・トップ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}>