The Product Catalog works with the "Product-> Catalog" functionality on the Producer’s Vinoshipper dashboard to generate a list of products with add to cart buttons.

HTML Element

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

<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:

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

See 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.

<!-- "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 for more information.