【カスタム】追加タグ

ここでは、提供中のテンプレートに実装していないカスタマイズ専用のタグに関して解説します。 各タグは、ご利用中のhtmlテンプレート内に追記いただくことでご利用可能になります。
 お気に入りボタンを設置する

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

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

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

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

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

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

【パラメータの説明】

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

(1)product_id

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

(2)added_class

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

テンプレートMONO以外のテンプレートに「お気に入りボタン」を設定される方へ

上記のHTMLタグをテンプレートMONO以外に貼り付けると、HTMLのみの貼り付けになるため、

実際に表示される「お気に入りボタン」はMONOと同じにはなりません。(ハートマークではなく、テキストボタンになります)

 

MONOと同じものにする、もしくは独自のお気に入りボタンを設置し利用するためには、

別途CSSの記述をいただく必要がございます。

HTML/CSSにつきましてはサポートの対象外となるため、CSSの追加については

オーナー様独自に検討をいただきますようお願いします。

 PCショップからスマートフォンショップ表示へのリンクを設置する

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

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

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

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

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

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

 商品詳細ページにLINE「LINEで送る」ボタンを設置する

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

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

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

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

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

【記述例】

▼デフォルト表示

LINEで送る

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

【パラメータの説明】

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

(1)type

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

▼値説明

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 }>

(*1)viaまたはrelated (応用編)

ボタンを利用してツイートが終わった後にフォローするよう促すためのアカウントを指定できます。 (viaとrelatedは同じ動きをしますが、それぞれひとつしか指定できません。) ▼例 <{twitter_tweet via="colormeshop"}> "colormeshop"の部分をお好きな文字列に変更してください。

(*2)text (応用編)

ツイート内テキストを指定できます。 指定しない場合ページタイトルが自動で挿入されます。 以下のように変数を代入することもで可能です。 <{twitter_tweet url=$productlist[num].link_url text=$productlist[num].name}>

(*3)url (応用編)

「チェック」で共有する場合の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/"}>

(1)layout

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

"standard"一番標準的なものです。高さ(height)は80固定です。 デフォルトはこの値なので、指定しない場合はこの表示になります。
"box_count"中ぐらいの大きさの表示です。高さ(height)は65固定です。
"button_count"一番小さい表示です。高さ(height)は21固定です。(推奨)
(2)width

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

(3)action

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

"like"「いいね(like)」ボタンを表示します。
"recommend"「おすすめ(recommend)」ボタンを表示します。 指定しない場合、もしくは存在しない値を指定した場合、likeになります。
(*4)url (応用編)

「いいね」で共有する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"}>

(1)button

表示スタイルを決定します。表示スタイルに合わせて高さ(height)も決定します。 ボタンの種類(見た目)を切り替えることができます。 button-1~5まで用意されています。 詳細はこちら 指定しない場合、もしくは存在しない値を指定した場合、"button-1"になります。

(2)url

「チェック」で共有する場合のURLを表示します。 相対パスでの記入も可能です。 指定しない場合現在表示中のURLが自動で入ります。 但し、セキュリティの関係上PHPSESSIDがクエリストリング中にある場合は強制的に削除されます。 以下のように変数を代入することも可能です。 <{mixi_check url=$productlist[num].link_url}>

(3)data_key

独自ドメインをご利用の場合、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}>