カラーミーショップの商品説明を複数に分けて情報量を増やす方法

カラーミーショップでECサイトを運営していて、商品説明を入力する箇所が1箇所のみで不便だなと感じたことはありませんか？
そういったお悩みならカラーミーショップのテンプレートエンジンであるSmarty構文を使用することで増やすことが出来ます。

具体的な使用イメージ

増やすってどういうこと？といった方のために参考の画像をご用意しました。
以下をご覧ください。

商品画像とカゴの2分割レイアウトでその下に商品の説明用の画像やテキストが並んだレイアウトです。

通常だと入力枠が1箇所なので商品説明を1種類入れたら終わってしまうので情報をまとめるか載せる情報を減らすかでお客様にとって知りたい情報が分かりづらくなってしまうこともあります。

商品のスペック情報(サイズ、重さ、素材など)を商品名の下にレイアウトして、その下に商品画像があるようなレイアウトもこの方法を使用すると叶えることが出来ます。

やり方

まずは必要な要素のHTMLを作りましょう。
以外は商品説明のサンプルHTMLコードと商品スペック情報のサンプルHTMLコードです。
それらから余計な改行やインデントを除去します。

※ここの作業が面倒であれば当社で用意している無料の変換ツールをご使用ください、その後の作業もまとめて対応可能です。

無料ツールはこちら

商品説明のHTMLコードサンプル

<section class="product-detail">
    <div class="product-detail__inner">
        <div class="product-detail__head">
            <p>商品説明</p>
        </div>
        <div class="product-detail__body">
            <div class="product-detail__row">
                <h2>ここに説明文タイトルを入力</h2>
            </div>
            <div class="product-detaill__row">
                <img src="画像URL" alt="">
            </div>
            <div class="product-detaill__row">
                <img src="画像URL" alt="">
            </div>
            <div class="product-detail__row">
                <p>ここに説明文を入力</p>
            </div>
            <div class="product-detaill__row">
                <img src="画像URL" alt="">
            </div>
            <div class="product-detaill__row">
                <img src="画像URL" alt="">
            </div>
        </div>
    </div>
</section>

商品スペックのHTMLコードのサンプル

<section class="product-spec">
    <div class="product-spec__inner">
        <div class="product-spec__head">
            <p>商品スペック情報</p>
        </div>
        <div class="product-spec__body">
            <table class="product-spec__table">
                <tr>
                    <th>サイズ</th>
                    <td>幅46cm×高さ180cm×奥行50cm</td>
                </tr>
                <tr>
                    <th>素材</th>
                    <td>ポリエステル、木材</td>
                </tr>
                <tr>
                    <th>重さ</th>
                    <td>11kg</td>
                </tr>
            </table>
        </div>
    </div>
</section>

除去が完了したら任意の文字列でそれぞれを囲みます。
ここでは以下のような文字列で囲みます。

【exp1】ここにHTMLコードを記述【/exp1】

こちらがSmarty構文を用いて分割する際の目印となります。
また、文字列を囲むことが出来たら以下のようにそれぞれを1つにまとめ商品説明の入力欄に貼り付けます。
ここでは、
【exp1】〜【/exp1】の間に商品詳細のHTML
【exp2】〜【/exp2】の間に商品スペックのHTML
を設定した例をご紹介します。

【exp1】<section class="product-detail"> <div class="product-detail__inner"> <div class="product-detail__head"> <p>商品説明</p> </div> <div class="product-detail__body"> <div class="product-detail__row"> <h2>ここに説明文タイトルを入力</h2> </div> <div class="product-detaill__row"> <img src="画像URL" alt=""> </div> <div class="product-detaill__row"> <img src="画像URL" alt=""> </div> <div class="product-detail__row"> <p>ここに説明文を入力</p> </div> <div class="product-detaill__row"> <img src="画像URL" alt=""> </div> <div class="product-detaill__row"> <img src="画像URL" alt=""> </div> </div> </div></section>【/exp1】
【exp2】<section class="product-spec"> <div class="product-spec__inner"> <div class="product-spec__head"> <p>商品スペック情報</p> </div> <div class="product-spec__body"> <table class="product-spec__table"> <tr> <th>サイズ</th> <td>幅46cm×高さ180cm×奥行50cm</td> </tr> <tr> <th>素材</th> <td>ポリエステル、木材</td> </tr> <tr> <th>重さ</th> <td>11kg</td> </tr> </table> </div> </div></section>【/exp2】

ただ、これだけでは分割表示をすることが出来ません。
表示するためにはテンプレートを編集して表示出来るようにします。
商品ページテンプレートの編集を行い、表示したい箇所に以下のようにコードを記述します。

商品詳細を表示する場合

<{assign var=explain1 value=$product.explain|strip|regex_replace:'/.*【exp1】/':''|regex_replace:'/【\/exp1】.*/':''}>
<{$explain1}>

商品スペックを表示する場合

<{assign var=explain2 value=$product.explain|strip|regex_replace:'/.*【exp2】/':''|regex_replace:'/【\/exp2】.*/':''}>
<{$explain2}>

※元々入ってる商品説明の表示コードは非表示にするか削除する必要ありますので必ずテンプレートのバックアップを取ってから作業をしてください。
あとは商品ページをプレビューしてみると実際に分割表示されていることが確認出来るかと思います。

最後に

作業自体HTMLを書けたり編集出来る方であればすぐに作業出来るかもしれませんが慣れていない方の場合、サイトの表示を崩してしまうかもしれません。
そんな時は当社に無料ご相談ください。
サイトの運用状況を確認しながら作業代行することも可能です。

お問い合わせはこちら

また、ご自身で作業される場合も面倒な変換作業を簡単にするツールもご用意しています。
ぜひ、ご活用ください。

無料ツールはこちら