副業・起業を応援!ココは「50ブログ」です。30代で転職・起業したおっさんブログ!ネットビジネス SOHOやりましょう!

副業・起業に役立つブログ!WEB制作・ネットビジネス応援<50ブログ!>

商品ページの作り方

https://www.koko-de.com

ドロップシッピング

◎WordPressでドロップシッピングの商品ページをつくる構成をお教えします

ココに注意

もしもドロップシッピングはすでにサービスの終了が発表になっています。この記事は終了発表前に書かれた記事です。それを念頭に置いてお読みくださいませ。他のネットビジネスに応用できたりヒントになる場合もあるので、自分なりに内容を吸収して、活用・アレンジしてみてください。

らくペタをフル活用した商品ページの作り方(構成)です。

このページで誰でもそれなりにカッコいい商品ページができます☆

WordPressを使ってドロップシッピングのショップをつくるのも夢じゃない♪

是非、参考にしてみてください。

ドロップシッピングの商品ページの作り方(構成)

まずは見本をご覧ください。
ジョイントマット商品ページ

ジョイントマット商品ページ(下記URLから全体が見えます)

マットショップ

商品ページの構成を説明します!

画像が大きくて重いので画質を落としています。見づらくてごめんなさい。

最初はビジュアルで商品ページの構成を解説します!

まずはトップのアイキャッチ画像です!

マット商品のアイキャッチ画像部分

マット商品のアイキャッチ画像部分

ポイント

▲何の商品なのか一目でわかるといいですね。購入者が自分が探している商品かどうかもすぐにわかります。

次から本文です。

商品構成ページ1

商品構成ページ1(商品ページ上部です)

上から順番に説明します
  1. 大見出しに「商品名」をそのまま付けています。
  2. その下が小見出しです。「カート」を指しています。これで来訪者がすぐに買えます。
  3. カート部分はらくペタの注文リンクを使用しています。
  4. その下に、ご案内を自由テキストとして書いています。品切れ時の案内や、他のカラー・サイズもここから選べるよ。という案内をしている部分です。

ココに注意

らくペタは1ページにつき1つしか設置できません。2つ目は多分表示されません。なので2つ目の注文リンクをページ下部に設置しないようにしましょう。

上のページの続きです!ページ中盤です!

商品構成ページ2

商品構成ページ2(商品ページ中盤)

ここも上から順番に説明していきますね。
  1. 「価格と在庫」の見出しです。
  2. 表を作っています。最新の価格と在庫が分かるようにしています。らくペタの使用タグは「価格タグ」と「販売状況タグ」の2種類のみです。
  3. カートへ誘導ボタン「注文はこちらから」を設置しています。このボタンを押すと上に設置した「注文リンク(カート)」へ飛びます。買いたいと思ったときにすぐにカートへ行けるので便利です。
  4. 商品画像・説明の見出し
  5. 商品画像をらくペタの「素材タグ」を使って表示しています。一発で長い画像と説明を表示させることができます。商品内容が変わった時も自動更新なので安心です。

上からのページの続きです!ページ終盤です!

商品ページ3

商品ページ3(商品ページ終盤です)

ここも上から順番に説明していきますね。
  1. らくペタの素材タグで表示されていた長い画像の最終部分です。
  2. 商品説明文の見出しです。
  3. らくペタの「スペックタグ」を設置しています。クリックすると開きます。
  4. カートへ誘導ボタン2つ目です。随分下まで来たのでこれで上部に設置したカートまですぐにジャンプしていけます。
  5. 送料無料画像です。
  6. もしもさんの商品感想投稿キャンペーンのタグで表示しています。内容に変更があれば自動的に非表示または更新されます。

商品スペックを開いたところ

商品ページのスペック部分

商品ページのスペック部分(クリックで開いたところ)

ココがおすすめ

スペックもタグを使うと変更があった時に自動で更新されるので手動で修正する必要がありません。とっても便利です。

ページ最下部!いよいよ最後の部分です。

商品ページ4

商品ページ4(商品ページ最下部です)

最後には、お買い物案内用らくぺたタグ「支払い方法パーツ」を貼り付けています。

ココがおすすめ

内容が変更になっても自動更新です!

AmazonPAYの仕様が変更になった場合、手数料や消費税が変わった時に自動で更新されるので安心!通販ではとっても大事な部分なのでありがたいですね。

これが手動だったら全頁を直す必要があります。さらに複数サイトあったら、修正に時間がいくらあっても足りません。

今度はテキストモードで見た時にどうなっているのかをお見せします。らくペタを使う場合は、テキストモードを使うのでページの構成を知る上で参考になると思います。
もしもドロップシッピング ワードプレスショップに商品を一括登録する方法
◎もしもドロップシッピング ワードプレスショップに商品を一括登録する方法

ココに注意 もしもドロップシッピングはすでにサービスの終了が発表になっています。この記事は終了発表前に書かれた記事です。それを念頭に置いてお読みくださいませ。他のネットビジネスに応用できたりヒントにな ...

続きを見る

テキストモードがこんな感じです。

ここから商品ページのテキストモードです。

<h2>極厚ジョイントマット 2cm 8畳 大判 【やさしいジョイントマット 極厚 約8畳(36枚入)本体 ラージサイズ(60cm×60cm) ブラウン】 床暖房対応 赤ちゃんマット</h2>

▲大見出しに商品名を設定しています。

<h3 id="cart">ご注文はコチラから</h3>

▲本来は、必要のない見出しなのですが、カートまでジャンプしてくるボタンの到達点として設定しています。「注文はこちら」ボタンを押すとココにジャンプするようにしています。コードはそのまま使えます。参考にしてください。

<div id="msm-group-article" class="msm-aid-1719773">注文リンク</div>

▲らくぺたの「注文リンクタグ」です。

<span style="font-size: 130%; color: #ff0000;">【▲商品選択ボタン】から他のサイズもご覧いただけます!サイドパーツは別品です。是非ご一緒にご注文ください!</span>

▲通常のテキスト部分です。

<div class="囲みボックス">現在の設定は8畳36枚になっています。よろしければカートボタンを押してください(注文はまだ確定しません)。 商品選択ボタンで4枚・12枚・24枚・36枚、サイドパーツをご注文いただけます。</div>

▲青色の囲みボックス部分です。コードはDEMO(デモ)です。通常のWordpressでは作動しません。

<h3>在庫・価格表</h3>

▲見出し部分

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;">極厚 ブラウン 大判</td>
<td style="width: 25%;">価格(税込)</td>
<td style="width: 25%;">在庫</td>
</tr>
<tr>
<td style="width: 50%;">本体4枚</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719776">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-1719776">販売状況</span></td>
</tr>
<tr>
<td style="width: 50%;">本体12枚</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719775">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-1719775">販売状況</span></td>
</tr>
<tr>
<td style="width: 50%;">サイドパーツ単品(角)</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719778">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-1719778">販売状況</span></td>
</tr>
<tr>
<td style="width: 50%;">サイドパーツ8畳セット</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719777">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-171979877">販売状況</span></td>
</tr>
</tbody>
</table>

▲表です。らくペタの「価格タグ」と「販売状況タグ」を使って表にしています。(一部、タグの部分を分かりやすいように赤色にしています。途中、割愛しています。)

<bottum class="青色ボタン"><a href ="#cart">ご注文はコチラ </buttom>

▲上部のカートまでジャンプするボタンです。赤色の部分のところが目的地です。このコードをコピペしても青色ボタンにはなりません。お使いのWordpressの仕様に従ってください。

<h2>商品画像・説明</h2>

▲大見出し

<span class="msm-materials msm-aid-1719794">素材</span>

▲らくペタ「素材タグ」。この一行であの長い画像が一発で表示されます。しかも変更があった場合は自動で更新されます。

<h3>商品説明文</h3>

▲小見出し

<div class="st-slidebox-c">
<p class="st-btn-open">+ 4枚説明文(クリックして下さい)</p>
<div class="st-slidebox">
<span class="msm-spec msm-aid-1719776">スペック</span>
</div>
</div>
<div class="st-slidebox-c">
<p class="st-btn-open">+ 36枚説明文(クリックして下さい)</p>
<div class="st-slidebox">
<span class="msm-spec msm-aid-1719773">スペック</span>
</div>
</div>

▲赤色にしている部分が「スペックタグ」です。(途中、割愛しています。)

<st-mybutton url="#cart" title="ご注文はコチラ" rel="" fontawesome="fa-shopping-cart faa-bounce animated" target="" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="120" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on">

▲2つめの「注文こちら」ボタンです。クリックすると一番上のカートまで飛びます。ここは、ほぼそのままワードプレステーマWINGのボタン表示コードを記載しています。コピペしても他のWordpressでは作動しません。

<img class="alignnone wp-image-48 size-full" src="https://画像URL" alt="8千円以上のお買い上げで送料無料です。" width="728" height="90" />

▲8千円以上送料無料のバナー画像部分です。

<img style="margin: 0; padding; 0; vertical-align: bottom;" src="https://image.moshimo.com/static/publish/distribution/reviewCampaign/750-140.jpg" width="750" height="140" />

▲もしもの商品感想投稿キャンペーンのタグです。

<span class="msm-p-method">支払い方法パーツ</span>

▲らくペタの「支払い方法案内タグ」です。

ココに注意

以上がテキストモードの中身でした!このショップはテーマWINGを使用しているので、上記のコードをコピペしても他のテーマでは上手く表示されません。

もしもドロップシッピングのサイト作ります
◎商品ページを機能的に使いやすくするテクニックとWordPressツール

ココに注意 もしもドロップシッピングはすでにサービスの終了が発表になっています。この記事は終了発表前に書かれた記事です。それを念頭に置いてお読みくださいませ。他のネットビジネスに応用できたりヒントにな ...

続きを見る

そのままコピペして表示できるコードも以下に用意しています。ご自由にお使いください。

そのままコピペで使える商品ページコード

以下を丸々コピーしてお使いのワードプレスの投稿ページに貼り付けてください。

<h2>極厚ジョイントマット 2cm 8畳 大判 【やさしいジョイントマット 極厚 約8畳(36枚入)本体 ラージサイズ(60cm×60cm) ブラウン】 床暖房対応 赤ちゃんマット</h2>
<h3 id="cart">ご注文はコチラから</h3>
<div id="msm-group-article" class="msm-aid-1719773">注文リンク</div>
<span style="font-size: 130%; color: #ff0000;">【▲商品選択ボタン】から他のサイズもご覧いただけます!サイドパーツは別品です。是非ご一緒にご注文ください!</span>

現在の設定は8畳36枚になっています。よろしければカートボタンを押してください(注文はまだ確定しません)。 商品選択ボタンで4枚・12枚・24枚・36枚、サイドパーツをご注文いただけます。
<h3>在庫・価格表</h3>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50%;">極厚 ブラウン 大判</td>
<td style="width: 25%;">価格(税込)</td>
<td style="width: 25%;">在庫</td>
</tr>
<tr>
<td style="width: 50%;">本体36枚</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719773">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-1719773">販売状況</span></td>
</tr>
<tr>
<td style="width: 50%;">サイドパーツ8畳セット</td>
<td style="width: 25%;"><span class="msm-price msm-aid-1719777">価格</span>円</td>
<td style="width: 25%;"><span class="msm-status msm-aid-171979877">販売状況</span></td>
</tr>
</tbody>
</table>
<h2>商品画像・説明</h2>
<span class="msm-materials msm-aid-1719794">素材</span>
<h3>商品説明文</h3>
<span class="msm-spec msm-aid-1719776">スペック</span>

<button style="width:200px; padding:3px 5px; box-shadow:2px 2px 2px #aaa"><a href="#cart" style="text-decoration:none;">ご注文はコチラ</a></button>

<img style="margin: 0; padding; 0; vertical-align: bottom;" src="https://image.moshimo.com/static/publish/distribution/reviewCampaign/750-140.jpg" width="750" height="140" />

<span class="msm-p-method">支払い方法パーツ</span>

注意ポイント

WordPressの<head>※ココ!</head>部分にらくペタの「注文リンク用らくぺたスクリプトコード」を入れていないと表示されません。

貼り付けるときは「テキストモード」で貼り付けてください。

らくペタのカートは1ページに1カ所にしか設置できないので一番上に設置しています。

もしもドロップシッピングでWordpressの内に「らくぺたスクリプト」を追加するやり方
◎もしもドロップシッピングでWordPressの<head>内に「らくぺたスクリプト」を追加するやり方

ココに注意 もしもドロップシッピングはすでにサービスの終了が発表になっています。この記事は終了発表前に書かれた記事です。それを念頭に置いてお読みくださいませ。他のネットビジネスに応用できたりヒントにな ...

続きを見る

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

  • この記事を書いた人
<50ブログ>

<50ブログ>

こんにちはこの<50ブログ>を書いている管理人です。職歴は有名チェーン店飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆50ブログとは、自分の座右の銘です。人は常に50:50の分岐に立たされています。やるかやらないか、どっちにするのか、など。。。話せば長くなるのであとはご想像にお任せします☆

Copyright© 副業・起業に役立つブログ!WEB制作・ネットビジネス応援<50ブログ!> , 2019 All Rights Reserved.