2024.9.18公開: 顧客接点を増やすチャンス!特別感が顧客の心を掴むバースデーメール

画像や説明文を商品ページに追加する

1 画像や説明文を表示させる準備をする

本章は、カスタムテンプレートを利用中の店舗さん向けのご説明です。

事前準備


■あらかじめ説明文や画像を用意します

商品台帳で編集作業に入る前に、商品説明や商品画像を用意してください。


商品登録の基本説明は、他のページでご案内しています。
>>詳しくは、オンラインサポートで検索「064」

商品ページに関するマニュアル一覧も合わせて活用ください。

2 画像や説明文を登録する




新しく商品を登録する場合は、「商品の新規登録」で設定してください。

■「商品紹介文」の設定画面に移動します

商品台帳の編集画面にある「商品紹介文」の入力欄に、必要な項目を入力します。

PC用の他に、スマートフォン(オプション)用の入力欄も別に用意しています。それぞれ自由に編集ができます。

スマートフォンサイトにPCサイトの紹介文を引用する設定方法は、他のページでご案内しています。
>>詳しくは、オンラインサポートで検索「102」



商品紹介文には、HTMLタグを利用することができます。
基本的なHTMLタグとスタイルシートの記述方法は、他のページでご案内しています。
>>オンラインサポート「179」で検索

■「メイン紹介文」を入力します

商品の詳細情報を入力します。


以下の項目は全角32,500文字まで入力できます。
 ・メイン紹介文
 ・サブ紹介文1
 ・サブ紹介文2
※改行や空行も1文字としてカウントされます。

■「画像挿入」をクリックします

商品のイメージ画像を挿入します。

  1. 入力欄をクリックし、画像を表示させたい場所にカーソルを合わせます。
  2. 「画像挿入」をクリックします。

■登録する画像を選びます

別ウィンドウで、画像挿入する画面が開きます。

  1. 「ファイル選択」をクリックします。
  2. 画像ファイルを選択するダイアログボックスが開きます。
  3. あらかじめ用意した商品画像を選びます。
  4. 「開く」をクリックします。
  5. 選択した画像のファイル名が反映されていることを確認します。

■画像を挿入します

  1. 「ファイル名」は、拡張子を含めた半角英数で入力します。
    選択した画像ファイルが「日本語のファイル名」の場合などに利用します。


    選択した画像ファイル名が半角英数の場合は入力不要です。

    <例>
    バナー画像.jpg ・・・ファイル名が日本語のため画像挿入できません。
    banner.jpg   ・・・画像挿入できます。



    代替テキストはHTMLのalt属性に反映されます。

  2. 「挿入する」をクリックします。
    紹介文に画像が挿入され、画像台帳にも画像が登録されます。


画像は 2 つ並べて表示することもできます。
下のHTMLタグの青文字部分を変更します。
画像のURLは、管理画面メニュー「 お店運営 > 画像管理 > 画像台帳 」の登録画像一覧の「プレビュー」から確認できます。

<table> <tbody> <tr>
<td><img hspace="0" src=" 画像URL(左側) " align="baseline" border="0" /> </td>
<td width="10"> </td>
<td> <img hspace="0" src=" 画像URL(右側) " align="baseline" border="0" /> </td></tr> </tbody> </table>

■「サブ紹介文」を入力する場合

カスタムテンプレート利用中の場合、サブ紹介文の初期設定は非表示です。商品ページにサブ紹介文1、2の入力内容を表示する場合は、HTMLのカスタマイズを行う必要があります。

>>詳しくは、オンラインサポートで検索「180」


  • 評価コメント(最新3件)の設定
    サブ紹介文の下部に、商品に対しての評価コメントを最新3件分表示できます。
  • カゴへボタンの設定
    サブ紹介文の上部にカートボタンを設定できます。商品ページが長い場合は、複数のカートボタンを設定することをおすすめします。

■入力した情報を保存します

商品の編集画面の下部にある「保存して次へ」をクリックします。
保存が完了したので、実際の商品ページを確認します。

バリエーションの登録については、他のページで詳しくご案内しています。
>>オンラインサポートで検索 「055」

在庫数の登録については、他のページで詳しくご案内しています。
>>オンラインサポートで検索 「065」

■HTMLタグ記述の際の注意点

  • テーブルの枠線が表示されない場合
       テーブルタグの前後に次のHTMLタグを追加してください。

    <div class="bordlayoutp3"> ←ここと
    <table>
    ---中略---
    </table>
    </div> ←ここを追記


  • ホームページビルダーなど、ホームページ作成ソフトで作ったHTMLソースを使う場合
    メイン紹介文やサブ紹介文の入力欄には、<body>と</body>間のみをコピーして貼り付けてください。