*

ブラウザの右下に「カートへ戻る」のリンクボタンを常時表示させる方法

この記事は約3分で読むことができます。

yahoo! shoppingや楽天にあってショップサーブにないもの。

それは、右下に常時表示されるカートへのリンクボタン。

ないものは付けてしまおうホトトギス。というわけで、ショップサーブのCSSをカスタマイズして、カートへ戻るボタンをつける方法を解説いたします。HTML・CSS中級レベルの話ですので、開店したてのHTML初心者の方はスルーしてください。

ショップサーブはこういうカスタマイズができるからいいですよね~

かんたん3ステップ

1.戻るボタン画像を作成
2.CSSファイルに下のコードコピペ
3.ページにリンク配置

と、非常にシンプルとなっております。

1.即席で作ったボタン画像がこれ。

カートへ戻る
(著作権FREE!)

できたボタンは画像登録をしてリンクを取得しておきます。

 

2.CSS内にコードをコピペ

.cart-back {
position: fixed;
bottom: 12px;
right: 18px;
}

ショップサーブ管理画面から、「デザイン設定」→「CSSのカスタマイズ」→「テーマ1の【編集】」と進んで、リンク関係のあたりにコピペで良いでしょう。基本どこでも良い。

CSSカスタマイズ

フッターの一番下にリンク挿入

これもコピペ。「デザイン設定」→「ヘッダとSEOの設定」→「フッタのバナーエリア」これも基本どこでも良いのですが、ページ毎にコピペという考え方はNGです。全ページに共通するHTMLのどこかに挿入するという考え方です。

<div class=”cart-back”><a href=”#mainimg”><img src=”(画像URL)” /></a></div>

CSSカスタマイズ

 

補足

「リンク」というのはHTMLの担当。そして、リンクを配置する場所は限られるます。でも、CSSを使うと、今回のように右下に固定したり、真ん中に配置したり、自由なところに、配置の指定ができます。CSSはレイアウト担当的な感じですね。

戻り先は、「name=cart」というのが見当たらなかったので、「mainimg(メイン画像)」のところにしました。いい塩梅で戻りますよ。

トップに戻るのが良いのか、カートボタンに戻るのが良いのか、という問題もありますが、「ページ内でお客さんにとってほしい行動」というのはカートボタンを押すことなので、戻り先はカートでよろしいかと思います。

気に入らなければ、「a href=”top”」と変えるとページトップに戻ります。その時は、固定リンクボタンの画像の変更もお忘れなく。

下の画像はyahoo! shoppingのやつ。

yahoo

Adsense

関連記事

コンテンツマーケティング

コンテンツマーケティング制作中

新しくブログというか、ウェブサイトを作っています。いわゆるコンテンツマーケティングの部類にはいるので

記事を読む

パクリ

ホームページ デザインのパクりは罪?

なかなか微妙なテーマです。 極端な例として、ブランドバッグや腕時計の正規品を販売するネットショ

記事を読む

クレーマー拒否

通販 クレーマーからの注文拒否するには

面倒くさい客からの注文はいらないですよね。いわゆるクレーマー。あれこれ難癖つけて来る客です。購入単価

記事を読む

特商法オリジナル

特定商取引法をオリジナルページにしてしまう方法

ショップサーブのスマートフォンサイトでは、実は、「フリーページ」を使って特定商取引法のページを差し替

記事を読む

売れない理由

ショップサーブで売れない場合の3つのチェックポイント

「ショップサーブ 売れない」という検索ワードがほぼ定番化してしまいました。おそらく、「ショップサーブ

記事を読む

楽天決済

裏から見る開業サービスの選び方

ネット販売を始めようと思うと、いくつか選択肢があります。 (1) ショッピングモールに出店する

記事を読む

カットしても良い

忙しくなってきたら重要でないことからカットする手法

ネットショッピングで珍しく「銀行振込」で購入しました。カードが使えないお店です。なぜカードが使えない

記事を読む

自作のすすめ

ネットショップ自作のすすめ、も・・・

ネットショップを始める場合、ショップサーブなどの開業サービスを使ってスタートするのが一般的になりまし

記事を読む

作成ツール

ネット販売ホームページ作成ツールはこれだ

訪問キーワード。 このキーワードから、おそらく、「ネット販売はASPを使うのが一番早くて楽」と

記事を読む

記事が多い理由

なぜショップサーブの記事が多いのか。その理由。

なぜショップサーブの記事が多いのか。 最大の理由のひとつは、「ショップサーブを使っている人が多

記事を読む

Adsense

Adsense

no image
「フレーミング効果」の事例や活用方法

ネット販売をするなかで、◯◯の法則だの、△△効果など、よく使います。キ

常時SSL
常時SSL化(https://)進めていますか?

ショップサーブのクライアントさんは少なめですが、すでに関わっていな

ネットショップは電話対応しない
「ネットショップは電話対応しないのが基本」の法則

ネットショップが電話を受け付けない3つの理由といった定番記事があります

トップセラー
ここへきて、トップセラーの新規ユーザー急増中

ドロップシッピングの先駆けであり老舗の「トップセラー」を始める人が

SAKURA internet
sakura internetへのwordpress引っ越しと常時SSL化

気づけば「そんなブログやってたの!?」というブログを2つ発掘。それ

→もっと見る

PAGE TOP ↑