カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。
無料版の中でレスポンシブ対応でシンプルなデザインで人気の「Bit」のカスタマイズ方法を記載していきます。
今回はカテゴリーのカスタマイズ方法です。
カテゴリーのカスタマイズ
bitのテンプレートにはカテゴリーを表示する機能がありません。
「ALL ITEMS」と表示されている部分を変更して、カテゴリーを表示するカスタマイズを紹介させて頂きます。
ただし、この方法はカテゴリーの種類が少ない場合のみに有効です。
カテゴリーが多い場合はこのカスタマイズは向きません。
あと小カテゴリーも対応していません。表示されると思いますが推奨しません。
HTMLの編集
カラーミーショップの上部メニューの「ショップ作成」から「デザイン」を選択してください。
「デザイン編集」をクリックしてください。
「共通」の「HTML/CSS編集」をクリックしてください。
表示されたHTMLとCSSなどをTeraPadなどのテキストエディタにコピー&ペーストしてください。
<ul class="inline"> <li><a href="<{$home_url}>">home</a></li> <li><a href="/?mode=srh&cid=&keyword=">all items</a></li> <li><a href="<{$sk_url}>">ordering info</a></li> <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}> <li><a href="<{$view_inq_url}>">contact</a></li> <{* フリーページをヘッダーメニューに追加 (PC用) *}> <!-- <li><a href="?mode=f1">freepage1</a></li> --> <!-- <li><a href="?mode=f2">freepage2</a></li> --> </ul>
上記の部分を探してください。(初期状態でしたら68行目になります。)
この「<li><a href=”/?mode=srh&cid=&keyword=”>all items</a></li>」部分を変更します。
変更後がこちらです。
<ul class="inline"> <li><a href="<{$home_url}>">home</a></li> <!-- カテゴリーリスト --> <{section name=num loop=$category}> <li><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li> <{/section}> <!-- // カテゴリーリスト --> <li><a href="<{$sk_url}>">ordering info</a></li> <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}> <li><a href="<{$view_inq_url}>">contact</a></li> <{* フリーページをヘッダーメニューに追加 (PC用) *}> <!-- <li><a href="?mode=f1">freepage1</a></li> --> <!-- <li><a href="?mode=f2">freepage2</a></li> --> </ul>
そのままコピー&ペーストをして頂いても大丈夫です。
これでショップ画面上にカテゴリーが表示されるようになります。
「all items」のボタンを残す場合は以下のようにしてください。
<ul class="inline"> <li><a href="<{$home_url}>">home</a></li> <li><a href="/?mode=srh&cid=&keyword=">all items</a></li> <!-- カテゴリーリスト --> <{section name=num loop=$category}> <li><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li> <{/section}> <!-- // カテゴリーリスト --> <li><a href="<{$sk_url}>">ordering info</a></li> <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}> <li><a href="<{$view_inq_url}>">contact</a></li> <{* フリーページをヘッダーメニューに追加 (PC用) *}> <!-- <li><a href="?mode=f1">freepage1</a></li> --> <!-- <li><a href="?mode=f2">freepage2</a></li> --> </ul>
ここで注意ですが、このテンプレートを使用するのならカテゴリー名も英語表記にしているほうが美しく見えます。
それでは表示できたカテゴリーのボタンを押してください。
何も表示されませんね。
安心してください。エラーではありません。残念ながらBitにはカテゴリーのページを表示する機能がありません。
ですので、カテゴリーの表示をするためにテンプレートをさらにカスタマイズする必要があります。
では、テンプレートのカスタマイズを行っていきます。
商品一覧テンプレートの編集
商品一覧テンプレートを作りますが非常に簡単にできます。
商品検索結果のテンプレートをコピーして少しだけ変更して商品一覧テンプレートとして更新するだけです。
まずは「商品検索結果」の「HTML/CSS編集」をクリックしてください。
表示されたHTMLをTeraPadなどのテキストエディタにコピー&ペーストしてください。
<h2 class="google-font">all items</h2>
上記の部分を探してください。(初期状態でしたら3行目になります。)
この部分を変更します。
変更後がこちらです。
<h2 class="google-font"> <{if $sid_name != ""}> <{$sid_name}> <{elseif $bid_name != ""}> <{$bid_name}> <{else}> 該当のカテゴリーがありません <{/if}> </h2>
小カテゴリーの名前も表示するようにしていますが、小カテゴリーはこのカスタマイズには推奨しません。
「商品一覧」の「HTML/CSS編集」をクリックしてください。
表示されたらHTMLの項目に先程変更したHTMLファイルを全て貼り付けてください。
これでメニュー部分にカテゴリーが表示されて、カテゴリーをクリックするとそのカテゴリーの商品が表示されるようになったと思います。
簡単だと思いますのでぜひ試してください。
コメント
はじめまして、初心者です。とても参考になりました。1つ質問させていただきます。
こちらに書かれている通りにやってみたのですが、スマホではカテゴリーが表示されず、all itemsのままとなります。all itemsのページには、最初に 該当のカテゴリーがありません と表示され、その下に商品一覧が表示されている状態です。
スマホでもカテゴリーが表示されるようにしたいのですが、どのようにしたら良いでしょうか?
大変お手数ですが、教えていただけると幸いです。宜しくお願い致します。
こんにちは。
初心者の質問で申し訳ありません。
一番最後の『表示されたらHTMLの項目に先程変更したHTMLファイルを全て貼り付けてください。』の部分がよくわからなかったのですがファイルを貼り付けるとはどのようにしたらいいのでしょうか?
名無し様
商品一覧のHTML/CSS編集をクリックして表示されるHTMLの項目の部分に、変更後のHTMLを貼り付けて頂ければ大丈夫です。