オンラインストアへの商品の追加
Tildaで商品を登録する方法
Tilda では、商品カタログ、マイアカウント、配送サービスを備えた、充実した機能を備えたオンラインストアを作成できます。この詳細ガイドでは、商品を追加する方法について解説します。
オンラインストアの商品は、「カタログ」機能を使用する方法と、ページ上で直接手動で作成する方法の2つの方法で作成できます。
オンラインストアでの商品カタログの追加と管理
もっと読む
「コンテンツ」ブロックによる製品の管理
もっと読む
カタログの有効化
カタログを使用するには、まず有効化する必要があります。「サイト設定」→「組み込みサービス」→「製品カタログ」→「接続」の順に進んでください。
Site Settings > "Built-in services": the "Connect" button under "Product catalog".
カタログのトップページが表示されます。「製品カタログを使い始める」ボタンをクリックして、次に進んでください。
The "Get started with Product Catalog" button on the Product Catalog welcome page.
カタログ管理ページに3つのテスト用製品が表示されます。これらはあくまでデモ用ですので、削除しても構いません。
Online store Catalog: the "+ Add product" button in the upper right corner of the product list.
カタログから商品を追加する
「商品を追加」ボタンをクリックして、カタログに新しい商品を作成してください。商品名を入力すると、その他の商品情報を入力するためのカードが表示されます。
多数の商品を作成する場合は、CSVまたはYMLファイルによる商品の一括インポートをご利用ください。詳しい手順は以下の通りです:
商品カードの入力と設定
商品カードの基本項目。 商品カードを作成したら、その内容を記入する必要があります:

  • タイトル— 製品名;
  • 説明— 商品カードのプレビューに表示される、商品に関する簡単な説明;
  • テキスト— 商品のポップアップやページに表示される、商品に関する詳細な説明。
Product editor: "TITLE", "DESCRIPTION", and "TEXT" fields in the side panel.
説明文やテキストを入力するためのテキストエディタが用意されています。説明文は、必要に応じて自由に構成することができます。ただし、テキスト内に画像をアップロードすることはできません。
テキストエディタのスポイトツールを使用すると、フォントの色を変更できます。この場合、商品カードの色の変更が、ストアブロック設定でのタイポグラフィ色の変更よりも優先されます。
Product editor: the text formatting toolbar and text field below "DESCRIPTION".
画像と動画。商品カードには、1枚以上の画像や動画をアップロードできます。「動画」ボタンをクリックし、「動画の種類」フィールドで動画のソースを指定してください。YouTube、Vimeo、Rutube、Kinescope、VK Videoの動画を商品カードに表示することができます。
商品のバリエーション。「商品のバリエーション」タブでは、色やサイズ、その他のパラメータに基づいて商品のバリエーションを作成できます。また、各バリエーションに独自の画像を割り当てることも可能です。

追加オプション。ここでは 、すべての商品のバリエーションに適用される追加パラメータを設定できます。 たとえば、各バリエーションにラッピングや追加サービスを追加することができます。各追加オプションは、商品の最終価格に影響を与える可能性があります。
Product editing panel in the online store: the "PRODUCT VARIANTS" and "ADDITIONAL OPTIONS" sections.
商品カテゴリ。ここでは、その商品がどのカテゴリに追加されているかを確認できます。商品を別のカテゴリに追加するには、「カテゴリに追加」ボタンをクリックし、カテゴリから商品を削除するには、リスト内の該当項目の横にある×マークをクリックしてください。
Product editor: the "PRODUCT CATEGORIES" section and the "+ Add to category" button.
商品カードに「その商品を含むブロックはウェブサイトに公開されていません」というメッセージが表示されている場合、その商品はウェブサイトに表示されていません。この問題を解決するには、商品カテゴリブロックをウェブサイトに公開する必要があります。
Product editing panel in the online store: "The block with the product is not published on the website" notification under "Product categories".
特性。ここでは 、ブランド、寸法、重量などのデフォルトの特性を設定できます。寸法および重量のフィールドに入力された値は、配送サービスが送料を正しく計算するためにも使用されます。

また、このタブでは独自の特性を作成したり、順序を変更したりすることもできます。特性を使用して、カタログのフィルタを作成することができます。
Product editing panel in the online store: the "CHARACTERISTICS" section with brand, dimensions, weight, and custom parameters.
タブ。 [タブ] タブでは、製品に関する追加情報を記載できます。追加できるタブには、以下の4種類があります:


  • 情報— 画像や動画を追加することもできるテキストブロック;
  • テンプレート— ワンクリックですべての商品カードに追加できる標準情報を入力するためのもの;
  • 情報:テキスト— タブ内に商品説明を複製するか、あるいは商品カード自体に商品説明を表示しないかを選択します。
  • 情報:特徴— 製品のすべての特徴を別のブロックに表示したい場合。
Online store product editor: The "TABS" section with the "Add a new tab" button in the left settings panel.
SEO。これらの 項目はSEO対策に使用されます。このタブでは、タイトル、説明文、キーワードを入力できます。
Product editor: the expanded "SEO" section in the left panel.
重量で販売する商品。重量や長さで商品を販売する場合は、「重量で販売する商品」タブで測定単位と単位数量を指定できます。
Product editing panel in the online store: the "SOLD BY WEIGHT" section with the "UNIT OF MEASUREMENT" and "UNIT QUANTITY" fields.
商品ページへのリンク。このフィールドには、事前に作成しておいた商品ページを指定する必要があります。例えば、ある商品のランディングページを作成した場合、このフィールドにそのページへのリンクを設定できます。これにより、購入者が商品一覧画面で商品画像をクリックすると、その特定のページに移動するようになります。
In the product editing panel, the "LINK TO THE PRODUCT PAGE" field.
その他の設定。商品カードでは、商品の表示設定や、商品の外部コード(連携機能を使用する際に必要)の指定、および商品をST2**およびST5**ブロックと連携させるために必要な商品IDの設定を行うこともできます。

また、商品カード内のオプションを使用して、商品カードの複製、削除、順序変更を行うこともできます。
Product editing panel: The "VISIBILITY" dropdown, "PRODUCT EXTERNAL ID" field, and product actions at the bottom.
商品予約
商品カタログで在庫数を設定できます。そのため、お客様が購入を開始すると、その商品が予約され、在庫数が減ります。決済システムによって、各支払いの期限は異なります。

商品が購入されるまで(決済システムから通知が届くまで)商品を確保しておくオプションを設定したり、商品を購入すべき期間を設定したりすることができます。この設定は、「サイト設定」→「決済システム」→「一般的な決済設定」→「商品の確保」で行えます。
In Site Settings > Payment Systems: the "Edit Settings" button under the "GENERAL PAYMENT SETTINGS" section.
Online store settings: "BOOK A PRODUCT" dropdown menu, the "Do not create orders with zero price" option, and "Save" button.
セクションも参照のこと。
購入者の興味を引く可能性のある商品を表示するセクションを追加することができます。商品ページを表示すると、追加の要素が表示され、店舗の他の商品が購入者に提案されます。

この要素を有効にするには、カタログから商品を連携させた後、ブロックの「設定」タブ → 「関連商品」セクション → 商品を表示したいカテゴリを選択 → 要素内に表示する商品数とセクションのタイトルを設定 → 変更を保存してください。
  • 質問
    商品数に制限はありますか?
    回答
    パーソナルプランでは最大5,000点、ビジネスプランでは最大50,000点の商品を追加でき、どちらのプランでもカタログに最大1,000のカテゴリを追加できます。
商品を手動で追加する
To add products manually, add any product card block without the Catalog label to the page. For example, ST350.
In the Block Library, the "Store" category on the left and the ST350 block "Product cards with buttons + Pop-up with product details".
「コンテンツ」ボタンをクリックしてブロックエディタを開き、新しい商品カードを作成してください。
In the ST305N block panel: the "Content" button in the upper-left corner of the block.
「新しいアイテムを追加」ボタンをクリックし、商品カードの各項目を入力してください:画像リスト(1枚または複数の画像をアップロード)、説明、テキスト(商品カードのポップアップに表示される内容)、商品・サービスの価格、旧価格、ボタンのタイトル、ボタンのリンク、および商品カード。
「ボタンおよび商品カードのリンク」フィールドでは、ブロック内の商品をクリックした際の3つのアクションを選択できます。「ページ内のリンク」— 別のページが開きます。「商品情報の詳細を表示」— 詳細情報が記載されたポップアップが開きます。「カートに追加」— 商品がすぐにショッピングカートに追加されます。
2つ目のボタン、商品のSKU、またはパラメータを追加するには、「詳細を表示:2つ目のボタン、ラベル、オプション」というハイパーリンクをクリックしてください。追加の入力欄が表示されますので、必要に応じて入力してください。
The "Show more: second button, label, options" link at the bottom of a product card in the "Content" panel of a store block.
ブロックからカタログへ商品を移行したい場合は、商品が表示されているブロックのコンテンツ内で、「このブロックから商品カタログへ商品をコピーする」というハイパーリンクをクリックしてください。
To display products from Catalog, use the ST340 and ST340A–E blocks.
写真をアップロードし、説明文を追加し、価格を設定しました。これで商品の準備は完了です。

オンライン決済を受け付ける場合は、次にショッピングカートを追加し、決済システムを連携させる必要があります。
よくある質問
Q
無料プランに切り替えた場合、製品はどうなりますか?
A
「カタログ」機能は有料プランでのみご利用いただけます。無料プランに切り替えた場合、商品はTilda 保存されます。この期間が終了した後も有料プランに戻さない場合、商品は復元不能な形で削除されます。商品を保存しておくには、あらかじめ商品リストをCSVまたはYML形式でダウンロードしておくことをお勧めします。
製造元
Tilda