---
updatedAt: 2026-10-09T18:17:06.000Z
agentTools:
  projectIndex: https://developer.vinoshipper.com/llms.txt
---

# Product Catalog

Generate a list of products with Add To Cart buttons.

The Product Catalog works with the "[Product-> Catalog](https://vinoshipper.com/ui/producer/products/catalogs)" functionality on the Producer’s Vinoshipper dashboard to generate a list of products with add to cart buttons.

<Image src="https://files.readme.io/35158b3-injector-product-catalog.png" alt="A Product Catalog in the default &quot;List&quot; layout." align="center" width="446px" />

# HTML Element

To include the default Product Catalog, which lists all products for sale that are not hidden, use this HTML code:

```html
<div class="vs-products"></div>
```

## Cards Layout

To use the "Cards" Layout, you will need to add the attribute `data-vs-cards="true"` to the HTML tag:

```html
<div class="vs-products" data-vs-cards="true"></div>
```

See [Layouts](injector-product-catalog-layouts) for more information.

## Custom & Brand Catalogs

To use a custom or brand catalog, include `data-vs-list="000"` and replace `000` with the catalog list ID.

We've included both List and Card layout as examples.

```html
<!-- "List" Layout -->
<div class="vs-products" data-vs-list="000"></div>

<!-- "Cards" Layout -->
<div class="vs-products" data-vs-list="000" data-vs-cards="true"></div>
```

See [Types](injector-product-catalog-types) for more information.

# Included Components

By default, Product Catalogs include two additional components: [Announcement](https://developer.vinoshipper.com/docs/injector-announcement) and [Available In](https://developer.vinoshipper.com/docs/injector-available-in).

You can use these components separately and turn off including them into your Product Catalogs. See [Settings](https://developer.vinoshipper.com/docs/injector-product-catalog-settings) to find out more about not including these components or changing their settings within Product Catalog.