カラーミーショップで売れる商品一覧にカスタマイズ!コツや独自タグを解説

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

中川
カラーミーの商品一覧ページを充実させたいが、やり方について知りたい
という方のために、具体的なカスタマイズ方法について解説します。

この記事を読むことで、

  1. 売れる商品一覧にカスタマイズするコツがわかる
  2. 商品一覧に使えるカラーミーショップの独自タグについてわかる

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

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

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、カラーミーの商品一覧をカスタマイズするコツについて解説していきます。

カラーミーショップで売れる商品一覧にするカスタマイズのコツ

商品一覧ページにアクセスするユーザーの多くが、「特定の商品が欲しい」と

買い物の的を絞り切れていない状態がほとんどです。

そのため、単純にユーザーにとってわかりやすいページでは売り上げにつながりません。

それでは、どのような方法を駆使して一覧ページを完成させるべきなのでしょうか。

商品画像は大きめに表示する

ユーザーが商品の良し悪しを判断するものには、

商品の紹介文や口コミなどがありますが、

多くの人が商品画像から得られる情報を大事にしている傾向にあります。

そんな画像を小さいものにしてしまってはもったいないです。

当然大きめの画像の方が見やすいですし、

画像は正方形もしくは横3:縦2の比率が綺麗に見えるようになっています。

画像サイズもバラバラであると統一感がなく見た目やショップの印象も悪くなりがちです。

画像設定はカラーミーの【トリミング】にてサイズを調整して登録しましょう。

デザイン設定から画像サイズ設定を選択し、

各画像のサイズを同じ数字で入力すれば画像全てを同一サイズに変更できます。

1ページあたりの表示数を増やす

1ページあたりの商品表示が少ないと大変不便に感じてしまいます。

次のページに移動するためのアクションが少なくなることで見やすく、

なおかつ商品探しに使う時間も省けるなど、いいこと尽くしです。

カラーミーでは、商品一覧や商品検索結果における表示件数の設定変更は

テンプレートの【商品一覧の設定】から商品表示件数を変更できます。

トップページに表示されるおすすめ商品や売れ筋商品に関しては

【おすすめ・売れ筋商品】で件数を変更できるので試してみてください。

また、カラーミーでは個別で表示数を変更する方法もあります。

これは例として繰り返し表示させる際の上の表示は6件、

下の表示は10件といったような表示スタイルにしたい場合に有効的です。

設定するには各テンプレートページのコードの最後にmax=○を追加します。

○部分に表示させたい件数の数字を入力すれば、自在にお好みのページに仕上げられます。

定期的に商品を並び替える

ECサイトでも実店舗同様に前出し陳列や季節ごとの商品入れ替えは大事になってきます。

定期的に商品の順番を変更することで、新鮮さのあるサイトとなるのです。

カラーミーでは、商品の並び順を変えたいトップページの商品なら、

【 おすすめ・売れ筋商品 】のページで変更できます。

商品リスト内の「表示順」の欄に数字を記入し、

その後[表示順更新]をクリックするだけなのでとても簡単です。

カテゴリーページの商品なら【 商品検索・変更 】にて変更が可能です。

表示順を変更したいカテゴリー選択して

「表示順・販売価格」にチェックが入っている状態で[検索]ボタンをクリックします。

そうするとリストが表示されるので「表示順」の欄に表示させたい順番を入力します。

その後リスト下部の[表示順・販売価格一括更新]をクリックすることで更新が完了です。

商品の買い方から商品一覧の見せ方を決める

商品一覧の表示スタイルもECサイトでは重要です。

カラーミーでは、画像+タイトル+値段でギャラリー風の表示、

さらに簡易説明もプラスした表示などさまざまな見せ方があります。

簡易説明が書かれている場合には、ユーザーが商品詳細ページに移る前に、

概要やその特徴を知ることができます。

素早く好みの商品を見つけやすくなり、サイトの評価も上がることでしょう。

簡易説明を表示させるのは、【商品編集画面】にてできるようになっています。

簡易説明の欄に記入するだけの簡単設定なのでぜひ試してみてください。

ただし、これらの表示方法は商品の買い方に合わせて見せ方を変えることも重要です。

ギャラリー風のおしゃれな表示スタイルで買い物を楽しむ人もいます。

カテゴリーページごとにイメージ画像や文章を入れる

カラーミーではカテゴリーページごとに画像や文章を挿入できるようになりました。

各カテゴリのデザイン性がアップすることで注目度は高まりますし、

SEO効果を高められるメリットも得られます。

カテゴリーページの装飾はカテゴリーごとのフリースペースを活用していきます。

【商品管理】に移動したら[カテゴリー]をクリック。

次に表示変更させたいカテゴリーの[修正]をクリックして、

その先の「フリースペース設定」からお好みのデザインに変えられます。

付加画像を設定する

商品一覧ページではアイコンを設定することでさらに注目度を高められるようになっています。

商品名の前後に「おすすめ」や「SAIL」、

「送料無料」などの画像・アイコンを突いているだけでも顧客の反応は大きく変わります。

付加画像の設定は、【商品編集画面】から可能です。

その画面から設定したい商品を検索後、

カラーミーで用意されているさまざまな付加画像を設定できます。

また、カラーミーでは付加画像は表示期限を設定することも可能です。

そのため、新商品や一時的にセール価格で販売する場合も設定解除を行う必要なく便利です。

商品一覧で使えるカラーミーショップの独自タグ

ここからは、カラーミーに用意されている独自タグについて詳しく説明していきます。

独自タグはカラーミーのテンプレートだけに収まることなく、

自分好みのレイアウトやデザインに変更できるようになるシステムです。

カラーミーショップの独自タグの使い方

独自タグはカラーミーのマニュアルにて掲載されています。

ショップのタイトルならshop_name、商品情報ならproduct、

カートに入れるURLはcart_urlといったように、

独自タグを用いればさらにオリジナル性のあるECサイトが作れるのです。

しかし独自タグはそのまま記載しても反映されません。

正しい記述方式はタイトルなら、<{$shop_name}>と記述する必要があります。

<{$○○}>左記のテンプレートを使って初めてタグとして認識されます。

商品一覧を表示する方法

独自タグを活用して商品一覧を充実させる方法は以下のようになっています。

・商品名:<{$productlist[num].name}>
・商品一覧画像用URL:<{$productlist[num].img_url}>
・販売価格:<{$productlist[num].price}>
・商品詳細ページへのリンクURL:<{$productlist[num].link_url}>

これらのタグを<{section name=num loop=$productlist}>と

<{/section}>の間に埋め込みます。

上記のname=numはループ内で使うセクション名です。

numは好きな文字に変更してください。

また、おすすめや売れ筋商品の一覧を表示したい場合の独自タグが活躍し、

上記のproductlistをrecommendやsellerに変えるだけで表示が変更されます。

ループの途中で改行を入れる

カラーミーの商品表示方法には商品を横に並べるレイアウト方法もあります。

この場合は3つずつ、4つずつといったように1段ごとの表示件数が変更でき

3つずつの表示で改行をしたい場合には、ループ中に下記の記述を挿入してください。

<{if $smarty.section.num.iteration % 3 == 0 and $smarty.section.num.last == false}>
<{/if}>

これを記述することで独自性のある表示ができるようになります。

もし4つずつの表記にしたい場合には上記タグの3という数字を4に変更するだけでできるので、

カテゴリーページごとに変更することも可能です。

条件によってレイアウトやデザインを変える方法

サイトを作るうえでもっとさまざまな表記方法が欲しいと思った方もいるかもしれません。

とくに多く人が悩むのは商品一覧ページに該当商品が1つもない場合です。

このような場合、「該当する商品がありません」と表示させる処理を活用しましょう。

具体的なタグは以下になります。

<!– 商品が有るかどうかifでチェック →
<{if $productlist_num != 0}>
<!—在庫有りの時のループ処理 →
<{section name=num loop=$productlist}>

<{/section}>
<{else}>
<!—在庫無しの時の処理 →

該当する商品がありません

<{/if}>

上記タグ中のifは条件分岐になっており、

タグ内の文字を変更してさまざまな条件に沿った表示内容にすることも可能です。

カスタマイズが難しいときは製作代行サービスを活用してみる

今回は売上アップにつながるカラーミーのさまざまなカスタマイズと独自タグについて

解説してきました。

商品の売上アップには商品一覧の見やすさも重要ですが、

ご紹介してきたように変更内容によっては少し複雑で、

カラーミーのデザイン変更は難しいと感じてしまう方も多いでしょう。

独自タグの追加や削除など細かいカスタマイズは、

初心者モードではなく標準モードによる編集が必要です。

ハードルが上がって厳しいという方は、

カラーミーショップに強いホームページ製作代行も検討してみてください。

代行することでクオリティ上昇は見込めますし、

より集客・販売効果の高いECサイトに仕上がってくれるはずです。

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

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