カラーミーショップの独自タグを使ってストアをカスタマイズしてみよう!

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーショップの独自タグについて知りたい
という方のために、カラーミーショップの独自タグについて解説をします。

この記事を読むことで、

  1. カラーミーショップの独自タグがなにか知ることができる
  2. カラーミーショップの独自タグにどのような機能ががある理解できる
  3. カラーミーショップのカスタマイズの初級モードと上級モードを知ることができる
  4. 独自タグを記述する方法がわかる
  5. カラーミーショップのフリーページを活用する方法がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、

指導や転売システムの提供をして、忙しくても副業で収入を得てもらっています。

それではカラーミーショップの独自タグについて解説していきます。

 

カラーミーショップの独自タグってなに?

カラーミーショップは、カスタマイズ性に優れたネットショップ開設プラットフォームです。

扱っている商品や提供しようとしているサービスによって、

ネットショップに求めるデザインや機能は違います。

ネットショップを作成するだけなら、ドラッグ&ドロップだけで対応できる部分もありますが、

それ以上のカスタマイズを希望する場合に活用してほしいのが独自タグ。

独自タグがどのようなものか、どういったことができるのか解説しています。

独自タグはデータ処理に使用するタグ

独自タグとは、パソコンやスマートフォンショップHTMLテンプレートで

使用されているデータ出力のためのタグを言います。

HTML構文でなく<{$shop_name}> のように<{$~}>の形が独自タグです。

カラーミーショップのテンプレートの中では、

この独自タグを使って設定項目や機能といったデータを出力しています。

カラーミーショップでは、あらかじめ独自タグを用意してくれているので、

ユーザーはそれを利用しています。

カラーミーショップのカスタマイズは初心者向けから上級者向けまである

カラーミーショップに、出店しているショップオーナーは属性・経験・年齢もバラバラです。

もともとプログラミングに関わる仕事をしていた人もいれば、

必要がなければパソコンは触らない人もいるでしょう。

カラーミーショップでは、

多様なニーズに対応するためにカスタマイズも初級モードから上級モードまで用意しています。

・初級モード

テンプレートの中で使われている文字の色やサイズを自由に変更可能です。

管理画面の【デザイン設定】から、

【テンプレート編集】ボタンを押すと編集できるページが一覧ででます。

ショップタイトルのフォントサイズやメニューの背景色、

ページ全体のベースとなるフォントサイズ等がカスタマイズできる内容です。

・上級者モード

HTMLやCSSを使って直接編集をします。

【テンプレート編集】ボタンから、

「上級モードで編集」をクリックしてHTML/CSSの編集に進みましょう。

カラーミーショップで使える独自タグ

カラーミーショップでは、独自タグを使って情報を出力しています。

どのようなタグがあるのか、よく使うものを一部抜粋して紹介しましょう。

独自タグには、【共通】のものとそうでないものがあります。

【共通】となっているものは、全てのページで使うことが可能です。

ただし、レギュラープラン以上か一部テンプレートプラスに申し込んでいないと

使えないものもあるので、必要な独自タグは公式サイトからチェックしていください。

【共通】
・shop_name
共通HTML内にショップタイトルを出力するために使う独自タグです。
・home_url
共通HTML内にショップのホームリンクを出力するために使う独自タグです。
・logo
共通HTML内にショップのタイトルロゴを出力するために使う独自タグです。
・e_copyright
共通HTML内にショップのタイトルロゴを出力するために使う独自タグです。
・url
各種リンクを見るための独自タグです。
【cart_url】であれば、「カートに入れる」のURL、【members_login_url】であれば「会員専用ページのログイン、ログアウト」のURLを意味しています。
・flg
各種設定を行います。
【shop_stop_flg】であれば休止フラグ。
【members_register_flg】は新規会員登録可能フラグです。
・tpl_name
各種情報を取得するための独自タグです。
閲覧中のページを変数として、データを出力します。
・seller_
売れ筋商品情報を表示します。
【seller_num】であれば売れ筋商品個数です。

【トップhtml】
・calendar
営業日カレンダーを表示します。
・push
イチオシ商品の情報を表示します。
・new
新着商品の情報を表示します。

【商品詳細】
・product
各種商品情報を表示します。

追加タグも設定可能

提供中のテンプレートに、実装されていないカスタマイズ専用の追加タグ

利用中のhtmlのテンプレートに追記することで設定できます。

追加タグでどのようなことができるのか、紹介しましょう。

・お気に入りボタンの設置

テンプレートに、お気に入り機能を実装するにはタグで追加する方法と追加タグで

設定する方法があります。

掲載したい場所のhtmlテンプレート内に、

お気に入りボタンを表示させるタグを追記してください。
<button type=”button” class=”favorite-button” <{favorite_button_attribute
product_id=$product.id added_class=”fav-items”}> <お気に入りボタン</button>

・PCショップからスマートフォン向け表示へのリンクを設置 PCで表示されているショップから、

スマートフォン最適化表示へ切り替えを行うためのリンクを設置する記述です。
<{if $view_smartphone_url}><a href=”<{$view_smartphone_url}>”>
スマートフォン版を表示する<{/if}>

・「noteで書く」ボタンを設置
noteが提供する、「noteで書く」ボタンを簡単に出力するカラーミー専用関数です。
<{note_button}>

・ 商品詳細ページへLINE「LINEで送る」ボタンを設置
LINEが提供する、「LINEで送る」ボタンを簡単に出力するカラーミー専用関数です。
<{line_button}>

・商品詳細ページへTwitter「Tweet ボタン」を設置する
Twitterが提供する、「Tweet ボタン」ボタンを簡単に出力するカラーミー専用関数です。
<{twitter_tweet}>

・ 商品詳細ページへFacebook「いいね」または「おすすめ」ボタンを設置
Facebookが提供する、「いいね」または「おすすめ」ボタンを簡単に出力するカラーミー専用関数です。
<{facebook_like}>

・トップページ「おすすめ商品」「売れ筋商品」に簡易説明文を表示
おすすめ商品と売れ筋商品の表示箇所に、商品の簡易説明を表示させる独自タグ 【 s_expl 】 を追記して表示します。

・商品一覧・商品検索結果に商品の【定価】を表示する
「商品一覧」に、【定価】を表示させる独自タグ 【 teika 】 を追記して、商品一覧ページで商品の定価を表示させます。

HTML / CSS編集機能も使える

カラーミーショップは使っているテンプレートのHTML、

CSSを編集してカスタマイズすることもできます。

【デザイン設定】画面から編集するテンプレートの、

【テンプレート編集】ボタンをクリックしましょう。

利用しているテンプレートの種類一覧が表示されるので、

設定を行うページの【HTML・CSS編集】をクリックしましょう。

テンプレート名は覚えやすい名前に変えておくと、後から混乱しにくくなります。

一覧から、HTML/CSSの編集に進みます。

【保存】ボタンを押すと、編集内容を保存できます。

【プレビュー】で、現在編集している画面のプレビューを見ることができるので、

確認しながら作業してください。

【入力支援ボタン】を使うと各ボタンから文章を編集したり、

画像を挿入したりできるのでHTMLタグを知らない場合でも感覚的に編集できます。

有料サービスでしか使えないタグもある

カラーミーショップでは、さまざまな独自タグが公開されています。

さらに有料オプションとしてンテンプレートプラスがあり、

フリープランではテンプレートプラスに申し込んでいないと使えないタグもあります。

テンプレートプラスは月額550円(税込)です。

例えば、営業日カレンダーや新着商品情報を取得するタグは、

テンプレートプラスでないと使えません。

レギュラープラン以上であれば標準搭載されているので、有料オプションを別途申し込むか、

ネットショップ開設時にレギュラープラン以上を申し込むか検討しましょう。

オプションの申し込みはオプションサービスのページから手続きができます。

カラーミーショップの独自タグを使ってみよう

カラーミーショップの独自タグを使って、データをさまざまな形で活用できます。

ここからは実際にどのようにして使うのか紹介します。

テンプレートを編集しよう

カラーミーショップで独自タグを使うのが初めてという人は、

まずはテンプレートやフリーページの編集にチャレンジしてみましょう。

現在利用しているテンプレートを編集するだけでも印象が変わります。

また、【デザイン設定】から【フリーページ編集】に進むとテンプレートには含まれない

「フリーページ」を編集できます。

フリーページの使い方は自由。

例えば、自社のブランドを紹介するページにしたり、

商品アピールやイベントの告知に使ったり好きにカスタマイズできます。

ランディングページも作ることができるので、

ユーザーへのPRやブランディングにも効果的です。

ブログやSNSにリンクを貼ったり、

広告を出したりとしてユーザーが流入する動線を作ってください。

タグを記述しよう

タグを実際に使うためには、デリミタという言語のスタートを知らせる記述が必要です。

カラーミーショップでは、【<{ }>】を使います。

つまり、ショップタイトルを表示するには、【shop_name】と記述するのではなく、

【<{$shop_name}>】と記述しましょう。

この書き方にすることでタグとして認識して、出力します。

条件分岐を使ってみよう

条件分岐は、ある条件に合わせて違うレイアウトやデザインを出力したいときに使います。

この時に使うのがif文です。

例えば、検索に対して該当する商品がないときに該当する商品がないことを表示するには、

if文で商品があるかどうかをチェックします。

商品がある場合にはループ処理で商品を表示、

ない場合は「該当の商品がありません」と表示します。

ループ処理してみよう

ユーザーの購買意欲を高めたり、

まとめ買いを促進したりするときに使いたい機能が商品リストの表示です。

カテゴリページで商品一覧を表示するには、そのリストにある商品を取り出すことになります。

一覧データを出力するには、sectionでまとめてループを作る処理が必要です。

【loop=$productlist】を使って、

商品リスト(productlist)の数だけループ処理をすればデータを出力できるようになります。

フリーページを使ってみよう

カラーミーショップをカスタマイズするときに便利なのが、自由に使えるフリーページです。

一般的なクラウド型のネットショップは、トップページと商品の情報がメインで、

ショップのファンを増やしたり、商品を知ってもらったりする場所はあまり多くありません。

しかし、カラーミーショップでは自由に使えるフリーページがあるので、

ショップの情報や商品の活用法やコラムといった情報発信が、

フリーページを使って簡単にできます。

また、メディア掲載情報やお店のQ&A、

イベント告知といったショップの運営に関わる内容も記載できます。

フリーページは、基本的には自由にデザインできるので、

アイデア次第でいろいろなアレンジが可能です。

フリーページで使える独自タグは【共通】で使えるものだけですが、

JavaScript、Smartyも使えるため、不便さを感じることはないでしょう。

上記で説明したようにランディングページに使うのが効果的ですが、

任意の場所で呼び出す使い方もあります。

例えば更新する可能性がある情報を表示するときにも、フリーページであれば更新が手軽です。

また、ショップからの一言、店長からのコメントといった更新するエリアを

フリーページで作成しておくといった活用が可能です。

フリーページは、プランごとにページ数が違います。

フリープランなら10ページですが、レギュラープラン、ラージプランなら10,000ページ。

プランを決めるときには、フリーページの活用についても考えておきましょう。

独自タグを使ってカラーミーショップをカスタマイズしよう

ネットショップを自由にレイアウト、

デザインしようとすると独自タグを使ったカスタマイズが必要になります。

独自タグを使ったことがないという人は、

まずはカラーミーショップで提供されている独自タグの一覧に、

どのようなものがあるのかチェックしてください。

独自タグを使用するときには、プログラミング的な考え方が必要なので

苦手意識がある人もいるでしょう。

カラーミーショップはショップオーナー同士で、

自由に質問しあうことができる掲示板も用意されています。

どうしてもうまくいかない、どうすればいいのかわからないときには質問を投げかけてみると、

ほかのショップオーナーから回答やアドバイスが受けられるかもしれません。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。