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

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

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

img_column-tips-2_000
PayPalとは?

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

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

商品販売ページの作り方

①商品一覧を作る

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

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

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

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

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

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

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

img_column-tips-2_001
④「カートを見る」ボタンを埋め込む

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

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

img_column-tips-2_002 img_column-tips-2_003

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

img_column-tips-2_000

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

img_column-tips-2_004

決済画面の表記が英語になっている場合

上記の決済画面が日本語でなく、英語で表示される場合もあります。その場合は以下の方法で設定を変更してください。

  1. PayPalのアカウントにログインし、ボタンの編集に進みます
  2. ステップ3の「高度な機能をカスタマイズする(オプション)」の中の「高度な変数を追加する」にチェックを入れます。
  3. その下の空欄に「lc=JP」と入力し、「変更を保存」をクリックします。

決済画面が日本語になっているかホームページで確認してみてください。もし、まだ英語表記になっている場合は、キャッシュが残っている可能性があるので、キャッシュをクリアし、再度ページを読み込んでください。

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

気軽につくれる、素敵なホームページ「とりあえずHP」

とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。

無料オンラインサポート実施中

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

PAGE TOP