【楽天版】「買い物かご」ボタン付近に必須！『ショッピングガイド』コーナーの簡単HTMLテンプレート！

こんにちは。ささくれにクエン酸をかけてしまい、『ギッ』って声が出たオガリア中村です。嫌いな人には塩じゃなくてクエン酸を送ろうと思います。

今日も懲りずにネットショップのお役立ちHTMLテンプレートを作ってみました。人差し指のささくれが痛む中キーボードを叩き続けて作りました。本日ご案内するのは、商品ページのお買い物かごボタン付近によくある『ショッピングガイド』コーナーです。

『ショッピングガイドコーナー』とは、各ご案内ページへの導線をまとめたコーナーのことです。(↓こんな感じ。)

支払いや配送、返品についてきちんとケアしているショップは、それだけでも信用度を高める事ができ、お客様が離脱するリスクを下げることができます。

また、配送日にお客様がシビアになるギフト商材や、保証/返品に関して事前案内が必要な商品などは、ご購入後にトラブルが発生し易い場合もありますので購入前のガイダンス誘導を強化しましょう。

デモ

デザインは3パターンご用意しました。全てのデザインにおいてこの仕様になってます。

・幅は100%指定！どこに設置しても自動で伸縮表示されるゥ！
・マウスオンするとデザインが変化して分かり易いッ！
・最新ブラウザ(IE11/chrome(ver.55)/FireFox/safari)で正常表示確認済みィ

デザイン1

　
楽天っぽいカラーのシンプルなデザインです。リンクの数は何個でも増減可能。
⇒ このデザインを使ってみる

デザイン2(※ogaRiaご契約店舗様限定)

　
枠線だけで縁取りした塩系デザインです。なんとなくメンズ系商材をイメージ。
⇒ このデザインを使ってみる

デザイン3(※ogaRiaご契約店舗様限定)

　
ビタミンCが飲みたくなるサマーバケーション元気デザインです。
⇒ このデザインを使ってみる

【1】HTMLテンプレートをコピーする

HTMLは全デザイン共通です。赤文字になってる「design1」の部分だけ、利用したいデザインに合わせて数字を書き換えてください。

<div class="itemcart_ShoppingGuide design1">
    <h3>shopping guide<h3>
    <ul class="">
        <li><a href="リンク先URL"><span>あす楽</span>について</a></li>
        <li><a href="リンク先URL"><span>お支払</span>について</a></li>
        <li><a href="リンク先URL"><span>送料</span>について</a></li>
        <li><a href="リンク先URL"><span>配送</span>について</a></li>
        <li><a href="リンク先URL"><span>返品</span>について</a></li>
        <li><a href="リンク先URL"><span>よくある</span>ご質問</a></li>
    </ul>
    <p>※注意書き注意書き注意書き注意書き注意書き注意書き注意書き注意書き</p>
</div>

貼り付け先

　・買い物かごボタンのすぐ近くに置く場合は…
　　⇒各商品の「PC用商品説明文」への貼り付けがおすすめです。

　・全商品ページに一括で設置したい場合は…
　　⇒「全ページ共通説明文(大)」への貼り付けがおすすめです。

【2】CSSをコピーする

次に、利用したいデザインに合わせてCSSをコピペします。特に書き変える箇所はありません。コピーしたCSSは、RMS内の デザイン設定 ＞ 全ページ共通説明文(大) へ貼り付けてください。

デザイン1のCSS

<style type="text/css">
<!--
.itemcart_ShoppingGuide {
	font-family:メイリオ;
    font-size: 12px;
    width: 100%;
    margin: 8px auto;
}
.itemcart_ShoppingGuide h3 {
    margin: 0;
    padding: 4px 8px;
}
.itemcart_ShoppingGuide ul {
    padding: 8px;
    margin: 0;
    list-style: none;
}
.itemcart_ShoppingGuide a {
    font-size: 13px;
    text-decoration: none;
    transition: all .2s ease;
}
.itemcart_ShoppingGuide p {
    color: #888;
    margin: 0;
}

/*design-1  ----------------------*/
.itemcart_ShoppingGuide.design1 {
    border: 1px solid #999;
}
.itemcart_ShoppingGuide.design1 h3 {
    color: #fff;
    background: #999;
}
.itemcart_ShoppingGuide.design1 li {
    display: inline-block;
    margin: 0 4px 8px 0;
}
.itemcart_ShoppingGuide.design1 li a {
    font-weight: bold;
    color: #fff;
    display: inline-block;
    padding: 8px 12px;
    background: #bf0000;
    border: 1px solid #bf0000;
    border-radius: 3px;
}
.itemcart_ShoppingGuide.design1 li a:hover {
    color: #bf0000;
    background: #fff;
    border-color: #bf0000;
}
.itemcart_ShoppingGuide.design1 p {
    padding: 8px;
}
-->
</style>

デザイン2 & デザイン3 のCSS

デザイン2とデザイン3のCSSは以下よりご確認できます。

CSSを表示する(ogaRia”フルバージョンプラン”契約店舗様限定)