> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 商品レコメンデーションブロックを作成する

> ウィジェットに商品レコメンデーションブロックを追加、構成、スタイル付けして、パーソナライズされた商品提案を表示します。

本記事では、次の方法を学びます。

* レコメンデーションブロックの追加
* レコメンデーションブロックの編集
* レコメンデーションブロックの配置

## レコメンデーションブロックを追加する

レコメンデーションブロックを追加するには:

1. 左サイドバーで **Add element** をクリックします。
2. リストで **Product recommendation** > **Product recommendation** をクリックします。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-a-product-recommendation-block/Screenshot-2024-01-19-at-6.17.11PM.png)
</Frame>

3. **General** > **Block** をクリックして、ウィジェットに追加したいブロックを選択します。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-a-product-recommendation-block/block-preview-1536x960.png)
</Frame>

**Settings** では、レコメンデーションブロックを表示するために必要な最小商品数を設定できます。また、ウィジェットが表示される商品ページから商品 ID を取得する方法も指定できます。レコメンデーションブロックでアルゴリズム「Similar products」または「Products usually purchased with this product」を使用している場合、この設定は必須です。

## レコメンデーションブロックを編集する

ブロックのサイズと位置を編集するには、**Design** をクリックします。CSS も編集できます。拡大アイコンをクリックしてカスタムコードセクションを開きます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-a-product-recommendation-block/edit-design.png)
</Frame>

**Block** をクリックして、背景色、ボーダープロパティ、シャドウ効果などの追加設定をカスタマイズします。ブロックのホバー状態も作成できます。