カラーミーショップは手軽に個人からネットショップを開店できるサービス。他にも簡単にECサイトをオープンできるサービスはありますが、カラーミーショップはカスタマイズ性に優れているのが特徴。
中でもヘッダー内にコードを追記できる点はすごいところ。この機能のおかげで、こちらの記事でも書いたようにBootstrapを簡単に導入できます！
このページでは共通エリアのカスタマイズ方法ついて紹介します。
カラーミーショップの共通ページをカスタマイズ
共通ページカスタマイズの基本
カラーミーショップのカスタマイズをするには独自タグについて理解する必要があります。基本的なところはカラーミーショップの独自タグの使い方で書いているのでこちらを参考にしてみて下さい。
独自タグ公式リファレンスはこちらです。
ここで公開されている独自タグをHTMLコードの中に配置することで、各ページへのリンクアドレスや商品情報を取得し、画面に表示することができるようになります。
各ページへのリンク
では共通ページで使用できる独自タグの使い方を見ていきましょう。まずは一番簡単なリンクの取得から。
各ページや商品ページを表示するには、HTMLに直接URLを記述することも可能です。例えばこんな感じ。
<a href="http://sample.com/?mode=sk#payment">お支払い方法</a>
プライバシーページやトップページなどの固定ページならこの書き方でも対応可能ですが、商品ページはidをいちいち記述することになるのでできれば独自タグを使いたいところ。
使用方法はとっても簡単。公式リファレンスにあるタグを説明文を見ながら必要なものを入れていけば良いだけです。
<!-- カートページ -->
<a href="<{$view_cart_url}>">カートの中身を見る</a>
<!-- 問い合わせページ -->
<a href="<{$view_inq_url}>">お問い合わせはこちら</a>
注意するのは独自タグの書き方。必ず<{$tag_name}>のように書かないとエラーになるので注意。
現在のページを判定する方法
ページごとに表示するコンテンツを分けたいということもあります。そんなときは現在のページを判定することでコンテンツの表示・非表示を分けることができます。
ここで使うのは$tpl_nameタグ。ここに現在のページの値が入ってるのでこれを使用します。
<p>現在のページは<{$tpl_name}>です。</p>
ページごとにコンテンツを分けるにはif文を使って条件分岐を設定します。if文なので&&や||などで複雑な条件を設定することも可能。
<{if $tpl_name == "product"}>
<!-- 商品詳細ページにのみ表示するコンテンツ -->
<{/if}>
<{if $tpl_name != "product" && $tpl_name != "product_list"}>
<!-- 商品詳細と商品一覧以外のページで表示するコンテンツ -->
<{/if}>
これを使うことで、トップページにのみバナーをたくさん貼付け、トップ以外ではカテゴリ一覧やオススメ商品などに変更するということもできるわけです。
ログイン情報の取得と表示方法
次はログイン状態の取得方法。こちらもカラーミーショップの独自タグが用意されているので、簡単にカスタマイズすることができます。
<{if $members_login_flg == false}>
<!-- ログインしていない場合に表示 -->
<a href="<{$members_login_url}>">ログインはこちら</a>
<{else}>
<!-- ログインしている場合に表示 -->
<a href="<{$members_login_url}>">ログアウトする</a>
<{/if}>
ログイン・ログアウトボタンの他にユーザー名をいれて、「ようこそ〇〇様」のように表示することも可能です。
<p>ようこそ<{$members_login_name}>さん</p>
カラーミーショップのCSSをカスタマイズ
カラーミーショップのCSSをカスタマイズするには、各ページのCSS編集枠の中にコードを記述していけばOK。
こちらは独自タグなどはないので通常のHTMLをスタイリングするのと同じ要領でカスタマイズ可能です。ただ、エディターとしては使いづらいため、HTMLで構築したものに対してCSSを当て、それをコピペする感じで使う方が良いかもしれないですね。
