［テンプレートカスタマイズ］　Bitでカテゴリーを表示する

カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。

無料版の中でレスポンシブ対応でシンプルなデザインで人気の「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ファイルを全て貼り付けてください。

これでメニュー部分にカテゴリーが表示されて、カテゴリーをクリックするとそのカテゴリーの商品が表示されるようになったと思います。

簡単だと思いますのでぜひ試してください。