ショッピングカート「カゴに入れる」ボタンの設置方法

e-shopsカートSでは、『「カゴに入れる」ボタンを設置するだけで、ネットショップが完成』と、レンタルカートプランをご紹介しています。

ホームページを持っているがネットショップを新たに作るほど投資が出来ない場合や、沢山の情報を載せてオリジナリティのある商品ページを作り、そこに「カゴに入れる」ボタンを設置する場合などに、このプランは適しています。

今回の記事では、そのご利用手順をご紹介していきたいと思います。

e-shopsカートSのサポートへも、問合せが時々ありますので、改めて画像つきで紹介させていただきます。
既に活用されている方にとっては、当たり前の情報であると思いますが、e-shopsカートS管理画面をご覧になっていない方や、運営に不慣れな方のご参考となれば幸いです。

「カゴに入れる」ボタン貼付け手順

  1. 商品ページ作成する
  2. 管理画面で商品を登録する
  3. 商品ページにHTMLソースを貼り付ける
  4. 商品ページの確認を行う
  5. 商品ページを公開する

という流れで紹介していきます。

1.商品ページを作成する

e-shopsカートSのご利用ショップ様のサイトには、Web制作業者に依頼しネットショップ全体を作成したサイトもありますし、ネットショップのオーナー様自身で作成されたサイトも有ります。

また、立ち上げ時は業者へ依頼し一括で作成して、その後に増えていくページは内製していくというハイブリッドな方式で運営されているショップ様もいらっしゃいます。

どの方式にしても、「カゴに入れる」ボタン貼り付け前に、商品ページを作成しておく必要があります。
具体的な操作の例として、以下のページを作成しました。

kst01

このページに「カゴに入れる」ボタンを貼り付けます。

e-shopsカートSでは、frameとiframeに「カゴボタン」を貼り付けたご利用は行えません。商品ページが、frameとiframeに「カゴボタン」を貼り付ける構成とならないようご注意ください。

2.管理画面で商品を登録する

e-shopsカートS管理画面にて、「商品管理」タブをクリックして、「商品一覧」を表示します。
kst02

「商品登録」ボタンをクリックして、商品登録画面に商品情報を入力します。
kst03

商品登録での必須情報は、商品名・商品コード・売価・在庫・送料設定・宅配便設定です。その他の情報は入力されても、空欄のままでも商品登録は完了できます。
必要に応じて入力を行って下さい。

商品登録が完了した画面では、「商品登録完了しました。」とメッセージが表示されます。
kst04

3.商品ページにHTMLソースを貼り付ける

商品登録の完了画面で「カゴソース」をクリックすると、登録した商品の「カゴに入れる」ボタンのHTMLソース取得画面となります。
kst05

※e-shopsカートSの「カゴに入れる」ボタンは、HTMLソース形式です。HTMLソースには、その一部に商品を特定する情報が含まれているため、登録商品ごとに取得する必要があります。

また、商品一覧から「カゴに入れる」ボタンのHTMLソース取得画面に遷移するには、一覧右端の「カゴ」ボタンをクリックすることで可能です。
kst06

HTMLソース欄の、文字列をすべて選択して、「コピー」(右クリック > コピー 、または、 キーボードにて「CtrlとC」を同時押し)してください。
※「ゼロステップカート」をご利用の場合には、「ゼロステップ」タブを開いた先の画面よりHTMLソースをご取得ください。

手順1で用意した商品ページにて、「カゴに入れる」ボタンを貼り付ける位置を確認します。
この時、ブラウザでの見た目の確認と共に、商品ページのHTMLソースでの位置確認も行います。
kst08

ホームページビルダーや、DreamweaverなどのWeb制作ソフトを使用している場合には、表示画面とHTMLソースを比較しながら、貼り付け位置が確認できるので、効率よく作業が行えそうです。

商品ページのHTMLソースを編集状態にし、貼り付ける箇所に文字カーソルを置きます。
「貼付け」(右クリック > 貼付け 、または、 キーボードにて「CtrlとV」を同時押し)してください
手順2でコピーした「カゴに入れる」ボタンのHTMLソースが貼り付けられます。
上書き保存を行って下さい。

4.商品ページの確認を行う

「カゴに入れる」ボタンを貼り付けた商品ページを確認します。
上書き保存したファイルをダブルクリックすることで、ブラウザでの表示が行われます。

「カゴに入れる」ボタンを確認して下さい。
「カゴに入れる」ボタンをクリックして、カゴの中身画面に遷移した上で、商品が追加されていることも確認してください
kst12

5.商品ページを公開する

確認の済んだファイルを、webサイトにアップロードします。
kst13

TOPページやカテゴリページなどからリンクを貼った場合などは、TOPページ・カテゴリページも一緒にアップロードします。
web上でのネットショップを表示し、商品ページと「カゴに入れる」ボタンクリック時の挙動を確認して下さい。

最後に

以上で、「カゴに入れる」ボタンのHTMLソースを商品ページに貼り付ける方法のご紹介です。

この度の紹介では、Windowsのメモ帳にて作業を行いましたが、HTML編集に向いているソフトは他にも有ります。ワニタが最近利用しているのは、Bracketsというソフトです。HTML編集に適しています。また、Google Chromeでのプレビュー機能が備わっていて、Bracketsで編集している箇所がリアルタイムでプレビューに反映されます。

その他にも便利な機能が盛りだくさんのようですが、ワニタには使い切れない部分もあります。

Bracketsのご使用方法等は、弊社ではサポートできませんが、使用に際して料金は発生しませんので、よろしければ以下ページにて詳細をご覧ください。
Brackets(英語ページ)

それでは、また。

カテゴリー: ホームページ制作