起業家・企業のありかた

起業家を育てるあたらしい企業の在り方

現在、日本の中小企業は、経営者の高齢化が進み、後継者問題が深刻化しています。結果として今まで培ってきた技術や伝統を継承することなく廃業する事業者が急増しています。さらに日本は起業家が生まれにくい国だともいわれています。 今回は、新しい時代の企業(社長)のありかた、世代交代、人材育成をテーマに考えてみたいと思います。 目次 起業家を育てるあたらしい企業の在り方日本の中小企業が抱える企業存続の問題点創業時の理念・技術を存続させる企業のありかた問題の根本を考えてみるひとつの会社に長居することを前提に考えていない ...

続きを読む

副業ドロップシッピングで開業!

40代会社員 副業|ドロップシッピング無知で開業はダメ! 始めるのに必要な心構えと知識

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ!ドロップシッピング開業!失敗する人から学ぶ 成功するための秘訣!まとめ | 副業ドロップシッピング開業で成功の秘訣!実際のドロップシッピングで開業したショップを公開! 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい 冴えない40代サラリーマン。出世もこれ以上望めないし、給与は減るばかり。。 ...

続きを読む

自宅が仕事場のフリーランス

SOHOで働く!人間関係で会社辞めたい!働きに出たくない!

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?SOHOが大変と思うときは仕入れがほとんどないネットの仕事 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない 会社辞めたい。でも生きていくためには働かないと・・・。 自分にはこの会社向いていない この職場で働くのムリ この仕事を一生続けていく自信がない もう人間関係に疲れた 転職しても同じことの繰り返し 辞 ...

続きを読む

もしもドロップシッピング

もしもドロップシッピングの始め方!ネットショップを3店開設してみた【完全解説】

初心者にも分かる!ドロップシッピングを始める!簡単ショップづくり!実際のショップがココで見れる! 目次 もしもドロップシッピングではお店が無料で作れる3ステップもしもドロップシッピングとはお店ができるまでの手順は簡単3ステップ!もしもドロップシッピングで稼ぐ仕組みと流れショップできすぎ君(もしもドメイン)で作成ショップ!ショップできすぎ君(独自ドメイン)で作成ショップ!ワードプレスで作成したショップ!自分で好きなデザインにできる!ショップ制作のお手伝い外部発注してショップを作ることも可能!実際に発注し納品 ...

続きを読む

会社のことをパソコンで管理

会社での3大管理「人・物・金」はもう古い!今は7大管理!

マネジメントする立場になったら覚えておこう!会社での重要な管理項目を簡単に解説! 目次 会社のマネジメントで大事な管理とは?人の管理とは物の管理とは金の管理とは会社での新しい7大管理とは技術の管理とは時間の管理とは情報管理とは自己管理とは会社の7大管理まとめ 会社のマネジメントで大事な管理とは? 会社での大事な管理項目は?一昔前までは「人・物・金」の3大管理で済んでいましたが、今ではリスクや様態の多様化でこれだけでは全く足りません。最低でも7大管理が必要な時代に突入しています。大変ですが会社や個人の優劣の ...

続きを読む

商品ページの作り方

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を使用しているので、上記のコードをコピペしても他のテーマでは上手く表示されません。

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

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

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

<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>内に「らくぺたスクリプト」を追加するやり方

MOSHIMOドロップシッピングのショップをワードプレスで作るときに欠かせないのが、 「らくペタ」 これがあると、ワードプレスのショップに簡単に「カート」「画像」「最新価格」「販売状況」「最新のスペッ ...

続きを見る

WordPressドロップシッピング制作代行します ワードプレスで「もしもドロップシッピング」ショップ制作代行!

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

「WING」アフィンガー5

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

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

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

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

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

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

ドロップシッピング×Wordpress制作代行!

Wordpress制作ショップ(ドロップシッピング)

ドロップシッピング×Wordpress ショップ制作をお手伝い!

ドロップシッピングでバリバリ頑張りたい人を応援するひな型・土台ショップが手に入る!

商品ページがすでに実装されているから分かりやすい!構造や商品ページ作りの勉強にもなる!

扱う商品ごとにショップが分かれています!

興味津々のサイトです!

  • この記事を書いた人
アバター

<50ブログ>

こんにちはこの<50ブログ>を書いているホットリングです。このブログを書いているのは1968年生まれ 申年のおっさんです。A型です。職歴は飲食業が長く現場と管理職を経験しました。広告の営業の仕事もしていた時代もあり、いろんな経験を経て今は独立して広告業とネットショップの構築などの仕事をしています。いろんな経験をもとにわがままに書いてます。日々Wordpressと向き合いHTML、CSSなどと向き合っています。参考になる部分があったら嬉しいです☆

最近よく読まれているページ

PVを増やして収益UP!はアフィリエイトではなくアドセンスです! 1

アフィリエイトの収益アップには「PVを上げろ!」とか「100万PVのわたしが解説!」なんていう文言をよく見ますが。。。 見られる回数が増えただけで収益は上がるのでしょうか?そんなにPVって大事なんでし ...

ドロップシッピング ベッドショップ ポートフォリオ 2

WordPressで作ったドロップシッピングサイトが欲しい WordPressのショップを持ちたいけど作り方が分からない WordPressのショップ構築が分からない 商品ページ、固定ページ、メニュー ...

副業ドロップシッピングで開業! 3

ドロップシッピングって稼げる?失敗する人から学ぶ 成功するための秘訣! 目次 副業で稼げる?将来を考えて、もしもドロップシッピングで開業したい副業ドロップシッピングで開業!稼げる?まず知りたいこと3つ ...

大きく打ち上げる 4

アフィリエイトで稼ぐ方法!長くやっていくには?アフィリエイトで売れない理由の一つに無駄に大きい目標を掲げてしまうというのがあります。楽して大きく稼げると思ったら大間違いです!アフィリエイトの本質を見極 ...

自宅が仕事場のフリーランス 5

目次 人間関係に疲れたらSOHOで稼ぐのもいいかもしれない「SOHO 楽して自宅で稼ぐ」は本当か?働き方をSOHOにしてよかったと思うことSOHOにはどんな仕事があるのかSOHOで食べていけるのか?S ...

2人のやる気 6

営業の仕事は大変!売れないセールスマンと売れるセールスマンには「売る気」の意味が違う!? 目次 売る気満々では売れない理由があるそれは「売る気」には、2つの「売る気」が存在するからです。成果を分ける2 ...

履歴書 7

転職の時期がきているのかも・・・ 目次 今の会社、今やっている仕事、このままでいいのか無駄な時間を過ごしていないか考えてみる無駄なところにパワーを使っていないか考えてみるブラック企業に身を置いていない ...

電子ベイプで禁煙 8

目次 40歳 禁煙したきっかけは体調不良吸いたくなる時があるのはこんなとき電子ベイプと出会い禁煙が加速今では電子ベイプがちょっとした趣味に 40歳 禁煙したきっかけは体調不良 40歳の時に私は禁煙をし ...

ワードプレステンプレート 9

アフィリエイト特化型ワードプレステーマを導入したらボタンやデザインに感動しただけでなく、落ち込んでいた売り上げも回復しました!アフィリエイトとGoogleの検索結果について、アフィリエイト成果が回復す ...

洗剤でテーブルを掃除中 10

なぜ新人さんは掃除をさせられるのか?そこには深い意味がありました。就職したばかりの社員、採用されて初日のアルバイトが掃除をさせられるのには教育と効率の2面性がありました! 目次 仕事初日から掃除が続く ...

Copyright© WEB制作・ネットビジネス・起業についてあれこれ<50ブログ!> , 2019 All Rights Reserved.