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

秋ですね。ワニタです。

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

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

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

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

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

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

大体の手順

  • 利用するオリジナル画像の準備
  • カゴに入れるボタンをオリジナル画像利用に設定
  • 利用するオリジナル画像をアップロード
  • 「カゴに入れる」ボタンHTMLソースの編集

以下より順に紹介していきます。

利用するオリジナル画像の準備

利用するオリジナル画像の準備 gif形式でカゴに入れるボタンに利用する画像を準備します。
今回は説明用に、2画像を用意しました。

bj

bj2

カゴに入れるボタンをオリジナル画像利用に設定

準備した画像の1つを用いて、e-shopsカートSの機能にて「カゴに入れる」 ボタンをオリジナル画像利用に変更します。
操作方法は、FAQ:「カゴに入れる」ボタンを任意の画像にすることは可能ですか?を参考にして下さい。

なお、既に「カゴに入れる」ボタンをオリジナル画像利用にしている場合には、 この手続は不要です。

03e-shopsカートS管理画面 > コンテンツ > アイコン設定にて、
「カゴに入れる」ボタンに画像が設定されている状態です。

利用するオリジナル画像をアップロード

この記事では、画像ライブラリにアップロードしますが、webサーバ等でも 問題ありません。
コンテンツ > 画像ライブラリ > 画像アップロードにて、 画像をアップロードします。

分類は「ボタン」が適していますが、 どの分類でも利用可能です。 また、後ほど利用するためアップロードしたボタン画像のURLを控えておきます。

04

「カゴに入れる」ボタンHTMLソースを編集

e−shopsカートS管理画面から、「カゴに入れる」ボタンのHTMLソースを取得します。

管理画面から取得したHTMLソースの例

<!– (商品名) ここから –>
<form method=”post” action=”http://cart.ec-sites.jp/cart_step◯◯/pc/pk00/”>
<input type=”text” name=”es_item_qty” value=”1″ style=”width:30px;vertical-align:middle;”>
<input type=”hidden” name=”es_charset” value=”sjis”>

<input type=”hidden” name=”es_item_id” value=”◯◯◯”>
<input type=”hidden” name=”es_shop_id” value=”◯◯◯◯”>
<input type=”hidden” name=”es_stock_attr_flag” value=”0″>
<input type=”hidden” name=”es_submit” ><input type=”image” src=”http://pict◯.ec-sites.jp/img/◯◯◯/icon/kago.gif” alt=”カゴに入れる” style=”vertical-align:middle”></form><form action=”https://cart.ec-sites.jp/cart_step◯◯/item-question/top/shid/◯◯◯◯/item_id/◯◯◯/” target=”_blank”><input type=”submit” value=”商品に関するお問い合わせ” ></form>
<!– (商品名) ここまで –>

◯部分は商品ごとに文字列が異なります。

上部の太字部分(http://pict・・・/kago.gif)を、上で控えたボタン画像のURLに差し替えます。(http://pict・・・/kago.gif)がHTMLソース内にない場合には、手順2の「カゴに入れるボタンをオリジナル画像利用に設定」を行って下さい。

変更したHTMLソースを商品ページに貼り付けて利用してください。

商品ページでの表示例
05

複数のボタンを用意して商品別にボタン画像のURLを変更することで、商品ごとにボタンの表示を変えられます。

色や大きさが違うボタンを用意して、クリック率に差が出るかなども 興味深いですね。 機会があれば、GoogleAnalyticsを使ったクリック率の調査方法なども 紹介したいと思います。

それでは、今回はこの辺で。

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