ヘルプセンター
    ヘルプセンター
  1. サイトの作成
  2. 高度な機能
  3. CMS
  4. CMSと他のWix製品の併用
    5. CMS：店舗の商品ページにコレクション・コンテンツを表示する

CMS：店舗の商品ページにコレクション・コンテンツを表示する

8分で読める
With the CMS (Content Management System), you can now display content from your collection directly on a Stores Product page. This gives you the ability to personalize and enhance your product listings with additional information, creating a richer experience for your customers.

First, you create a collection that references your Stores Wix app collection. This is where you'll save the additional info you want to integrate into your Product page. Then, set up the datasets on your page, connecting them to your Stores Wix app collection and your 'Details' CMS collection. Finally, connect supported elements, like the Rich Content element, to your 'Details' collection to display the additional information. 

This can be a game-changer for your online business. Imagine being a boutique owner who wants to give customers a more in-depth look at your products. With this process, you can easily add extra details, such as a product's backstory or specific care instructions, right on the Product page.
Screenshot of a details dataset on the Product page.
始める前に

Step 1 | Create a collection that references your Wix app collection

  1. Create a Multiple items (Default) collection where you will keep the additional info you want to integrate into your Product page. 
  2. Click + Add Item to add items for each product you want to save additional details about. 
  3. Click + Add Field to add fields for each type of content you want to save (e.g. Rich Content). 
  4. Click the relevant cells to add your content to each item. 
  5. Add a Reference field type and connect it to the Stores Wix app collection: 
    1. Click Manage Fields then click + Add Field. 
    2. Select Reference and click Choose Field Type.
      Tip: Select the Multi-reference field if you want to use an item's content for more than one product. 
    3. Enter the Field name.
    4. (Velo only) If necessary, update the Field ID, which is used in the site's code. You cannot update this ID later. 
    5. Click the Referenced Collection drop-down and select Products under Stores. 
    6. (Optional) Enter help text to include a tooltip in your collection next to the field name.
    7. Click Save
Screenshot of creating a reference field in a 'Details' CMS collection that references the Products Stores Wix app collection
  1. For each item, click the reference field and select the relevant product. You can select multiple products if you added a multi-reference field in the previous step. 
Screenshot of selecting the corresponding products in the Details collection reference field.

Step 2 | Set up the datasets on your page

Datasets link your page elements to the collection so the elements can display your Stores Wix app collection content. You need two datasets on your page, one connected to your Stores Wix app collection, and the other connected to your 'Details' CMS collection.

  • Wix app collection dataset: This reads product info that is stored and managed within your Wix Stores app. Add a URL slug filter to this dataset. You can connect supported elements to the dataset to show content from Wix Stores.  
  • Details dataset: This reads the additional content you've stored about your products from your own CMS collection. Add a filter to the dataset that filters your reference or multi-reference field. Connect elements, such as the Rich Content element, to this dataset to display the additional content you've added to your CMS 'Details' collection. 
Screenshot of the datasets needed for this feature.
Wixエディター
スタジオエディター
  1. 編集者のところに行ってください。
  2. Go to your Product page:
    1. クリック ページ＆メニュー  エディターの左側にある
    2. Click Store Pages and select the Product Page. 
  3. Add a dataset that connects to your 'Details' CMS collection:
    1. クリック CMS  左側 
    2. コンテンツ要素の追加をクリックします。 
    3. Click Dataset. 
    4. Click the Choose a collection drop-down and select your 'Details' collection. 
    5. Edit the Dataset name if needed and click Create. 
  4. Add a dataset that connects to your Stores Wix app collection:
    1. Click Add a Dataset at the bottom of the panel on the right. 
    2. Click the Choose a collection drop-down and select the Products collection under Stores. 
    3. Edit the Dataset name if needed and click Create.
Screenshot of creating a dataset that connects to the Stores Wix app collection.
  1. Add a URL slug filter to your Stores/Products dataset:
    1. をクリックする。 その他のアクション アイコン  next to your Stores/Products dataset and select Dataset settings.
    2. Click + Add Filter under Filter. 
    3. Click the Field drop-down and select Slug (Text). 
    4. Leave is selected as the Condition. 
    5. Under Value source, select URL Slug. 
    6. Add Filterをクリックします。 
Screenshot of adding a URL slug filter to the Wix app collection.
  1. Add a reference filter to your 'Details' dataset:
    1. Click All page datasets at the top of the Dataset Settings panel on the right. 
    2. をクリックする。 その他のアクション アイコン  next to your 'Details' dataset and select Dataset settings.
    3. Click + Add Filter under Filter. 
    4. Click the Field drop-down, select your Reference (Products) field or Multi-Reference (Products) field, then click Add Filter. 
Screenshot of adding a reference filter to your 'Details' dataset.
  1. Add the supported elements that you want to display details from your CMS 'Details' collection. For example, you could add the Rich Content element or a Pro Gallery. 
  2. Connect the elements to the relevant fields in your 'Details' dataset. 
Screenshot of connecting a Rich Content element to the Rich Content field.
  1. Use the Preview toolbar to test the connections for the relevant products. 
  2. Publish your site when you are ready to make the changes go live. 

これは役に立ったか？

|

この記事では

  • Step 1 | Create a collection that references your Wix app collection
  • Step 2 | Set up the datasets on your page

関連コンテンツ

CMS: Adding Filters and Sorts to Datasets to Control Live Site Content
CMS：どのページにもWix Storesの商品を表示する
CMS：Wix Storesの商品をダイナミックリストページに表示する
CMS：ダイナミックリストページにWix Storesの商品カテゴリーを表示する
CMS：Wixストアのカテゴリーをどのページにも表示する

プロを雇う

あなたのサイトの目標達成をお手伝いするWixパートナーをご紹介します。
マッチング