カテゴリー:機能利用例紹介

カゴ画面編集のすすめ

こんにちは。ワニタでございます。

今回は、e-shopsカートSご利用ショップ様の、「カゴの中身」画面の編集についてご紹介します。
編集するとこんなメリットがある!(かもしれません)

ショップページと一体感がでる

標準のカゴの中身画面は、寒色系であり、彩度が低くなっています。
ショップページとトーンが異なる場合には、そのギャップに驚く購入者様もいると思います。
使用している色を変更することで、ネットショップ本体と同様のトーンにすることができ、一体感がでます。

購入完了率があがる

上の「ショップページと一体感がでる」の副次効果として、違和感によるカゴ落ちがなくなり、購入完了率があがるかもしれません。

購入者様に必ず伝えたい、注意事項やお知らせなどをほぼ見てもらえる

「カゴに入れる」ボタンを押下し遷移するページ【カゴの中身画面】では、画像の表示も行えるスペースが上下に有ります。この上部スペースに画像と説明文を追加すれば、購入手続きに進む前に、必ず目にすることになります。

以上ようなメリットがあるカゴ画面の編集について紹介していきます。
なお、背景色やヘッダー画像の変更などは、購入手続き画面のみではなく、会員マイページや商品検索結果画面、レビュー表示画面でも利用されます。

それでは、早速カゴ画面の編集方法についてご紹介していきます。

(続きを読む…)

スマホ訪問時にXMLサイトマップを元にモバイル用へ切替

こんにちは。ワニタです。
スタッフブログでここ何回か紹介をしていました、ネットショップのスマホ対応についての話題です。e-shopsカートSのハイブリッドCMS機能を利用して、スマートフォン対応をしている方や「別々のURL」にてモバイル対応をしている方への参考情報を紹介します。

今からでも間に合う【スマホ対応】の近道。でもご紹介いたしましたが、webサイトがスマホに対応したことを検索エンジンに伝える方法として、googleは3つのやり方を紹介していました。

ハイブリッドCMS機能を利用した作業のながれ(おさらい)

その中で「別々のURL」という方法は、PC用URL毎にモバイル端末用コンテンツのURLを用意するやり方です。e-shopsカートSでは、この「別々のURL」に対応するためにハイブリッドCMS機能を利用した設定をご案内しており、以下の様な流れで手続きを行います。

  1. ネットショップ開業CMSプランをご契約する
  2. PC用ホームページデータをサーバにアップロードする
  3. e−shopsカートS管理画面ハイブリッドCMS設定で、PC用自動生成ページを停止する
  4. モバイル対応用xmlサイトマップ(e−shopsカートS管理画面にて入手)をアップロードする
  5. Google Search Consoleでサイトマップの追加をする

手順4でアップロードするxmlサイトマップには、PC用ページのURLとモバイル端末用のURLの関連が含まれています。このxmlサイトマップをGoogleに登録することで、ネットショップのスマートフォン対応がGoogleに伝わります。

Google以外からの訪問でもスマホページに切り替えたい場合には・・・

Google検索をスマートフォンで利用すると、モバイル端末用のURLが検索結果として使われます。また、「スマホ対応」というメッセージも表示されます。
これにより、Google検索からの訪問は、上記の作業をすることでPC閲覧時にはPC用ページの表示、スマホ閲覧時にはモバイル対応用ページの表示となります。ところが、Google検索以外の訪問では、端末を判定してページを切り替えることができません。

Google検索以外からの訪問に対しても、端末を判定してページを切り替えるJavascriptを作成しましたので、ご紹介いたします。

(続きを読む…)

Googleウェブマスターツールでモバイル対応を伝える手順

追記:
Googleウェブマスターツールは、2015年5月20日に名称を変更して、Google Search Console となりました。
Google Search Consoleでも、同様の操作でモバイル対応をGoogleに伝えられますので、ご参考としてください。

e-shopsカートSのネットショップ開業CMSプランで、PC用に自作ページを公開し、スマートフォン用に自動生成ページを利用するショップ様向けの情報です。
e-shopsカートS管理画面からダウンロードした専用のxmlサイトマップをGoogleWebmasterToolに追加する手順を紹介します。

この記事でのご案内は、Googleの推奨する「別々のURL」の方法でモバイル対応をしたことを、Googleに伝えるための手順です。
Googleでは、PC用ページとスマートフォン用ページの関係を一対一で伝えるよう案内があり、一対多の関係となることは避けるよう説明しています。以下手順にダウンロードしたxmlサイトマップ内で一対多の関係となった場合は、登録前に一対一に修正してからご利用ください。

目次

  1. Googleウェブマスターツールへのサイトの追加
  2. カートS管理画面からxmlサイトマップを入手しサーバにアップロード
  3. GoogleWebmasterToolでサイトマップの追加

以上の作業で、GoogleにPC閲覧者向け自作ページのURLとスマートフォン閲覧者向け自動生成ページのURLが伝わります。

Google側でモバイルフレンドリーであるページを確認したうえで、数日〜1ヶ月程度(※)でスマホでの検索において「スマホ対応」表示が出て、スマートフォン閲覧者向けの自動生成ページにリンクされるようになります。※2015年4月13日時点での傾向です。

(続きを読む…)

「カゴに入れる」ボタンをオリジナル画像に

秋ですね。ワニタです。

今回は、「カゴに入れる」ボタンをオリジナル画像にする方法について紹介します。

e-shopsカートSでは、「カゴに入れる」ボタンのHTMLソースを商品ページに 貼り付けて、ご利用をいただきますが、HTMLソースの編集を行う必要なく「カゴに入れる」 ボタンをオリジナル画像にすることもできます。
この機能を利用すると、オリジナル画像を含んだ「カゴに入れる」ボタンの HTMLソースになります。そのHTMLソースを商品ページに貼り付けることで、 オリジナルの画像を「カゴに入れる」ボタンとして表示できます。

管理画面上で「カゴに入れる」ボタン用のオリジナル画像を変更すると、 既にその機能によりオリジナル画像を表示しているページでも新しい画像に 表示が切り替わります。
全商品にて共通のオリジナル画像を利用する場合には、画像変更しても 貼り直しが必要でなく便利にご利用いただけますが、商品によって表示する カゴに入れるボタン画像を変更したい場合には、対応できません。

前置きが長くなりましたが、今回は管理画面から取得したHTMLソースを編集 することで、商品毎にオリジナル画像を利用する方法について案内致します。

※今回の記事では、「カゴに入れる」ボタンのHTMLソースの編集を紹介致しますが、HTMLソースの編集はご自身の責任にて行って下さい。
e-shopsカートSでは管理画面から取得したHTMLソースをそのままご利用頂くようお願いしており、このHTMLソースの編集方法や、編集に起因した問題等についてはサポート対象外とさせて頂いています。

今回の記事は、「カゴに入れる」ボタンのHTMLソースを取得した通常カゴにのみ有効であり、ネットショップ開業CMSプランでのページ自動生成機能とシンクロカゴ機能には対応していません。

(続きを読む…)