• # とりあえずHPレベルアップ講座

商品販売ページを作ってみよう【上級編】

とりあえずHPレベルアップ講座では、とりあえずHPの機能を組み合わせたり、CSS編集機能を使って、もっとホームページをうまく活用していく方法を紹介します。

今回は商品販売ページのつくり方をご紹介します。とりあえずHPでは、オンライン決済サービス「PayPal」（※PayPalはとりあえずHPの機能ではなく、外部サービスです）を併用することで、商品販売ページを作成することができます。「カートに追加」ボタンを作成して貼り付けると、ホームページから直接商品を販売可能。ホームページで商品を販売したいという方におすすめです。

PayPalとは？

今回は商品販売ページを作るのに、オンライン決済サービス「PayPal」を使用します。PayPalとは、購入者が自分のPayPalアカウントを通して、クレジットカードや銀行振り込みでオンライン決済ができるサービスです。PayPalは、導入する際に、アカウント開設費や初期費用などがかからないので、気軽に導入することが出来ます。また、購入者も、購入する際にカードや講座の情報を入力することなく、PayPalにログインするだけなので、安全かつ簡単に支払いをすることが出来ます。

※使用例では見本のボタンになっております。ボタンの使用感を試したい方はPayPalのサンプルページよりお確かめ下さい。

商品販売ページの作り方

①商品一覧を作る

まずは商品一覧を作ります。今回は「商品一覧ページを作ってみよう」で作った商品一覧を使って、商品販売ページを作ります。

商品一覧ページを作ってみよう

②「カートに追加」ボタンの作成

次に、商品を購入するために必要な「カートに追加」ボタンを作成します。オンライン決済サービスのPayPalを使い、「カートに追加」ボタンを作成します。PayPalでのボタンの作成の仕方はこちらから

※「カートに追加」ボタン作成にはPayPalのビジネスアカウントの登録が必要です。

③「カートに追加」ボタンを埋め込む

作成したボタンのHTMLコードをコピーし、とりあえずHPに戻ります。商品一覧の記事ボックスのHTMLボタンをクリックし、「カートに追加」ボタンを入れたい場所に、先ほどコピーしたHTMLコードを貼り付けます。今回の例では商品の説明文の下に入れるため、HTMLソースの中から該当する説明文を探し、その後に貼り付けます。すべての商品に「カートに追加」ボタンを貼り付けたら、OKをクリックし、上記の内容で設定をクリックします。

④「カートを見る」ボタンを埋め込む

PayPalでは、「カートに追加」ボタン作成後に、「カートを見る」ボタンも作成することが出来ます。複数商品を購入することが予想される場合には、「カートを見る」ボタンがあると、より便利に購入が出来ます。埋め込み方は先程と一緒ですが、「カートを見る」ボタンは、商品一覧の中に入れないため、コードを貼り付ける場所に注意しましょう。

※Paypalの詳しい使い方についてご不明点のある方は、お手数おかけいたしますがPaypalのカスタマーサポートまで直接お問い合わせください。

「カートに追加」ボタン、「カートを見る」ボタンが表示されているか確認し、最後に上記の内容で設定をクリックし、ホームページを確認してみましょう。

ホームページ上で「カートに追加」ボタンをクリックし、ちゃんと購入ができるか動作の確認も忘れずに行いましょう。下の画像は実際にカートに追加した際に表示される画面です。

今回はオンライン決済サービス「PayPal」を使用して、とりあえずHPで商品販売ページを作成する方法をご紹介致しました。ホームページで商品の販売を検討している方はぜひ参考にしてみてください。