Welcartで商品ページを構築する方法

更新日:2018/10/23

商品の登録」と、プラグイン「All in One SEO Pack」と「Custom Field Suite」のインストール・設定が完了したら、商品ページを構築していきます。
管理画面のレフトナビ「Welcart Shop」→「商品マスター」をクリックします。

Welcartで商品ページを構築する方法

登録した商品の一覧「Welcart 商品リスト」が開くので、構築したい商品の「編集」をクリックします。

Welcartで商品ページを構築する方法

商品情報編集のページが開くので、下記の①~⑤項目を入力し、ページを構築していきます。
「済」の部分は、商品の登録で既に完了している箇所です。

Welcartで商品ページを構築する方法
商品ページのタイトルと、詳細の本文を入力します。
プラグイン「All in One SEO Pack」を使って、商品ページのディスクリプションとキーワードを入力します。
「All in One SEO Pack」についてくわしくはこちら
プラグイン「Custom Field Suite」で設定した、SKU詳細説明を入力します。
「Custom Field Suite」についてくわしくはこちら
商品の画像を登録します。
関連商品を表示する場合に、タグを設定します。

上記①~⑥を入力・設定すると、商品ページが完成します。
ページ内容を変更した場合は、最後に必ず「公開設定」の「更新」ボタンをクリックします。

Welcartで商品ページを構築する方法
商品詳細入力

商品ページのタイトルと、詳細の本文を入力します。

Welcartで商品ページを構築する方法
①商品詳細ページタイトル

商品ページのタイトルを入力します。
商品名と同じでも構いませんが、SEO対策としてキーワードを入れたりして、ユーザーの目を引くようなオリジナル性のあるタイトルをおすすめします。

②パーマリンク

WordPressの「設定」→「パーマリンク設定」で設定したURLが表示されます。
変更したい場合は、「設定」→「パーマリンク設定」から設定します。
変更する場合は、すべての商品ページが変更となりますのでご注意ください。

③商品詳細本文

商品詳細の本文を入力します。
右上に「ビジュアル」と「テキスト」の表示を切り替えられるタブが付いています。

Welcartで商品ページを構築する方法

「ビジュアル」は、実際のページをプレビューしているように見ながら編集することができます。

Welcartで商品ページを構築する方法

「テキスト」は、HTMLのタグやコードを直接入力して編集することができます。

Welcartで商品ページを構築する方法

画像を挿入したい場合は、左上にある「メディアを追加」ボタンをクリックします。

Welcartで商品ページを構築する方法

新しい画像は、「ファイルをアップロード」タブから「ファイルを選択」ボタンをクリックして、画像ファイルを選択してアップロードします。

Welcartで商品ページを構築する方法

アップロードした画像は、「メディアライブラリ」タブに追加されます。
メディア一覧から挿入したい画像を選択して、右下の「投稿に挿入」ボタンをクリックします。

Welcartで商品ページを構築する方法

挿入する画像の詳細を設定することも可能です。

①配置
画像を配置する位置を設定できます。
「左」「中央」「右」「なし」から選択できます。
②リンク先
画像にリンクを付けることができます。
「メディアファイル」…クリックして画像を拡大するときに使用します。
「添付ファイルのページ」…画像の詳細ページにリンクします。
「カスタムURL」…自由にURLを入力してリンクします。
リンクを付けない場合は「なし」の設定にします。
③サイズ
画像のサイズを設定できます。
画像サイズの設定についてくわしくはこちら
ディスクリプション入力

プラグイン「All in One SEO Pack」を使って、商品ページのディスクリプションとキーワードを入力します。
「All in One SEO Pack」についてくわしくはこちら

Welcartで商品ページを構築する方法
①タイトル
自動的に商品ページのタイトルが入力されます。
基本的にはこのままでOKですが、もし編集したい場合は上書きするように入力します。
②ディスクリプション
検索エンジンで表示されるサイト(商品)の説明文を、160文字以内で入力します。
検索エンジン対策として上位表示させたいキーワードを、違和感の無い程度に多く盛り込むことがコツです。
③キーワード
ページで重要なキーワードを入力します。
複数入力する場合は、半角のコンマを入れて区切ります。
SKU詳細説明入力

プラグイン「Custom Field Suite」で設定した、SKU詳細説明を入力します。

Welcartで商品ページを構築する方法

入力や設定の仕方については、「プラグイン「Custom Field Suite」のインストールとフィールド設定」でくわしくご説明しています。

商品画像登録

商品の画像を登録します。

Welcartで商品ページを構築する方法

画像の登録は商品編集ページではなく、レフトナビの「メディア」から行います。

  • 1)管理画面レフトナビ「メディア」→「ライブラリ」を開きます。
Welcartで商品ページを構築する方法
  • 2)商品画像に登録したい画像をクリックします。
    アップロードをしていない場合は、先に左上にある「新規追加」ボタンをクリックして、画像をアップロードさせてください。
Welcartで商品ページを構築する方法
  • 3)画像の詳細画面の「タイトル」部分に、商品コードを上書き入力します。
Welcartで商品ページを構築する方法
Welcartで商品ページを構築する方法
  • 4)入力してEnterキーを押すと、自動的に保存されます。
    右上に「保存しました。」と表示がされれば、保存完了です。
Welcartで商品ページを構築する方法
  • 5)商品編集画面の「商品画像」部分に、登録した画像が表示されていれば登録完了です。
Welcartで商品ページを構築する方法

【商品のサブ画像を登録する場合】
商品コードの後に続けて「_(アンダースコア)」を2つ入力し(Welcart Carinaの規則です)、表示したい順に「01」「02」…と付け足していきます。
下図では、「hb0001__01」と入力しました。

Welcartで商品ページを構築する方法

商品編集画面の「商品画像」部分に、サブ画像が追加されました。

Welcartで商品ページを構築する方法

実際の商品ページには下図のように表示されます。
サブ画像はクリックすると切り替わって表示されます。

Welcartで商品ページを構築する方法

サブ画像が4枚以上(メイン画像を含めると5枚以上)ある場合は、スクロールバーが左右に表示されます。

Welcartで商品ページを構築する方法
カテゴリー選択

商品のカテゴリーを選択します。
カテゴリーの選択をする前に、「カテゴリー登録」を先に行ってください。

Welcartで商品ページを構築する方法

商品に当てはまるカテゴリーにチェックを入れていきます。
複数選択が可能です。(限りもありません)

カテゴリーを登録しておくと・・・
①特定のカテゴリーにチェックを入れた商品だけを一覧で表示することができます。
②トップページに「おすすめ商品」や「新着商品」を表示することができます。

タグ設定

関連商品を表示する場合に、タグを設定します。

Welcartで商品ページを構築する方法
  • 1)関連商品で表示したい商品の「商品コード」を入力して、「追加」ボタンをクリックします。
    例)商品コード「hb0002」商品名「ユリを使った清楚な幸せブーケ」を関連付けさせます。
Welcartで商品ページを構築する方法
  • 2)先ほど入力したタグが、下に表示されれば追加完了です。
    削除したい場合は、タグ右の青い×マークをクリックします。
Welcartで商品ページを構築する方法
  • 3)カート下(ページの末尾)に、下図のように表示されます。
    複数ある場合は右に並びます。
Welcartで商品ページを構築する方法