「お店のブログをやっているが、記事の中に商品写真とカートボタンを配置したい。」
ですよね～。
今までは、「スペシャルサングラスはこちら」というふうにリンク形式でしたが、これだと、お客様に１クリック余計に叩かせてしまうんです。ショッピングサイトのUIの理想は、お客様が「気づけば買っていた・・・」という状態になること!?
だから、ブログ記事の中にも商品写真とカートボタンを配置すると、購入したいお客様にとっては利便性が高まるというワケです。
実は、カラー・ミーショップ・プロには、「どこでもカラーミー」という、１クリックで「商品写真・価格・カートボタン」のタグが発行できるしくみがあります。
しかーし、残念この上ない話ですが、ショップサーブには、そういった便利な機能は実装されていないのです。「つけてくれ！」と叫んでみたところで、実装されるのは、遠い遠い未来の話になるかと思われます。
では、早速。
１．配置はシンプルが一番！
これ、ショップサーブの商品ページですが、「左に商品写真」「右に情報」と２パーツに分かれています。これをタグを使ってやろうと思うと少々面倒になります。というか、スマホのことを考えると「縦型」にしたほうが便利なんです。
だから、次のようなレイアウトにします。
これなら、上から順番にタグを並べていくだけなんで楽ちんです。
２．タグもシンプルでOK
タグは特にポイントはないです。普通に書くだけでOKです。SNSボタンはこの際、見た目がごちゃごちゃになるので削除することにしました。
上の画像には載ってしまっていますが、数量選択も今回は除外します。カートの中で変更できますからね。「数量はカート内で変更できます。」と注意書きしておけばOKでしょう。
上から「写真」、「文字情報（TABLE使う）」、カートボタン、在庫ボタン（必要なら）
と配置していくだけです。
【商品写真】
<img src=”https://あなたのお店/pic-labo/llimg/画像ファイル.png”>
【商品情報】
<table >
<tbody>
<tr>
<td>小売希望価格</td><td>￥4,320円（税込）</td>
</tr>
<tr>
<td>価格</td><td>\2,759 (税込 \2,980) 31%OFF </td>
</tr>
<tr>
</tr>
</table>
【カートボタン】
<a href=”https://cart(*).shopserve.jp/-/ドメイン/cart.php?ITM=商品番号&CNT=購入数”>カゴへ</a>
※「カゴへ」の部分はテキストだとあまりに、しょぼいので、ここはカートボタンを画像として挿入するのが良いですね。
【在庫を見る】
<a href=”http://ドメイン/SHOP/stock.php?ITEM_NO=商品番号” target=”_blank”>在庫を確認する</a>
在庫は別ウィンドウで見れるようにしたほうが良いでしょう。
３．必要なときに必要なだけコピペ
このどこでもカートですが、情報が入っていないタグのセットだけ保存しておいて、必要なときに入力して、記事にコピペするのが良いかと思います。
「手動」感バリバリですが・・・
商品数が多く、「ブログ記事でも大量の商品を紹介する」というような場合は、商品情報の一覧をテンプレートを元に、その都度書き出すようなしくみを作っておくと便利です。
