> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/blog/elemente/produkte.md).

# Products

Show matching shop products directly in the post as product tiles.

The **Products** element shows the shop products you have assigned to the current post – as product tiles directly in the article. This connects content and shop and invites your readers to buy matching items.

{% hint style="info" %}
Which products appear is defined in each post (alternatively per category or blog – the element automatically picks up the assignment of the open page). See [Posts](/cms-bundle/en/blog/verwaltung/beitraege.md).
{% endhint %}

Use Shopware's **element picker** (the **Replace element** button) to add the **Products** element at the desired position – the field outlined in red.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-8aebc0caa6ce06d632648a09921f56e180331c8a%2Fblog-produkte-auswahl.webp?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-298ba955e436fcfd76f7430acd3261a73b8c2a2a%2Fblog-produkte-beispiel.webp?alt=media" alt=""><figcaption><p>Example in the storefront: assigned products as tiles</p></figcaption></figure>

### General

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-cb30ca035bad9291ba834dabf985eed559eecb88%2Fblog-produkte-allgemein.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Headline (1)</td><td>Optional headline above the products, e.g. "Goes well with".</td></tr><tr><td>Limit items (0 = show all) (2)</td><td>Maximum number of products shown. <strong>0</strong> shows all assigned products.</td></tr></tbody></table>

### Layout

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-135d09f54711fd22abd1cc853c14d73905a0d02e%2Fblog-produkte-layout.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Display (1)</td><td><strong>Grid</strong> shows the products as a tile grid, <strong>Slider</strong> as a horizontally scrollable row. For the grid you set the number of columns per device on the <strong>Items per row</strong> tab.</td></tr></tbody></table>

{% content-ref url="/pages/kXnecx9xgMjluse3dktl" %}
[Elements per Row](/cms-bundle/en/elemente/konfigurationsbausteine/elemente-pro-reihe.md)
{% endcontent-ref %}

### SEO

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/en/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}