【カスタム】追加タグ

お気に入りボタンを設置するためのカラーミー専用関数です。その設置方法は下記になります。 ※ お気に入りに追加された商品情報の表示は独自タグ一覧(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" }>

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

▼値説明

type値	デザイン
share-a
share-b
share-c
share-d
share-e

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

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

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

編集内容・・・ 掲載したい場所のhtmlテンプレート内に、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_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}>

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

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

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

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

【重要】独自ドメインをご利用の場合、mixiチェックボタンを設置するには、mixiデベロッパー登録 が必要です。

【記述例】

▼デフォルト表示

<{mixi_check}>

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

【各パラメータの説明】

※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

編集内容・・・ 「おすすめ商品」「売れ筋商品」の各表示箇所に、【商品簡易説明】を表示させる独自タグ　【　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}>