--- updatedAt: 2026-10-09T20:15:45.000Z agentTools: projectIndex: https://developer.vinoshipper.com/llms.txt --- # Settings Configuration settings for the Product Catalog component. # Configuration Settings The following settings are set in the [Injector Configuration settings](https://developer.vinoshipper.com/docs/injector-configuration) and apply globally to your website. If not defined, the default value will apply. ## `productCatalogAnnouncement` Type: Boolean | undefined
Default: `true` When `false`, all instances of Product Catalog *will not* include the [Announcement](https://developer.vinoshipper.com/docs/injector-announcement) component across all instances of Product Catalog. You will be responsible for including the component manually on your site. This global setting can be overwritten by the HTML tag. See [`data-vs-announcement`](#data-vs-announcement). ## `productCatalogAvailable` Type: Boolean | undefined
Default: `true` When `false`, all instances of Product Catalog *will not* include the [Available In](injector-available-in) component across all instances of Product Catalog. You will be responsible for including the component manually on your site. This global setting can be overwritten by the HTML tag. See [`data-vs-available`](#data-vs-available). ## `productCatalogStyle` Type: Boolean | undefined
Default: `true` When `false`, style will ***NOT*** be included for all instances of Add To Cart. This allows you to add styles from a clean slate. If you plan to use [Advanced Styling](injector-product-catalog-styling), do not define this setting. # HTML Element Settings The following settings can be set for each individual HTML code [and are reactive](https://developer.vinoshipper.com/docs/injector-attribute-reactivity). ## `data-vs-cards` Type: Boolean
Default: `false` When `false`, Product Lists will render in the [Lists](https://developer.vinoshipper.com/docs/injector-product-catalog-layouts#list-default) layout.
When `true`, Product Catalogs will render in the [Cards](https://developer.vinoshipper.com/docs/injector-product-catalog-layouts#cards) Layout. See [Product Catalog: Layouts](injector-product-catalog-layouts) for more information. ## `data-vs-list` Type: Number
Default: `undefined` When `undefined`, the Product Catalog will render the Main Catalog for the producer. When a number is given, the Product Catalog will render products from that Catalog. See [Product Catalog: Types](injector-product-catalog-types) for more information. ## `data-vs-announcement` Type: Boolean
Default: `true` When `true`, Product Catalogs will render an instance of the [Announcement](https://developer.vinoshipper.com/docs/injector-announcement) component before any other component. When `false`, the Announcement component will not render. This is useful if you already include the standalone component elsewhere. See [Announcement](https://developer.vinoshipper.com/docs/injector-announcement) for more information. ## `data-vs-available` Type: Boolean
Default: `true` When `true`, Product Catalogs will render an instance of the [Available In](https://developer.vinoshipper.com/docs/injector-available-in) component. If the catalog contains more than 7 products, the Available In component will display above the products. Otherwise the component will render below the products. When `false`, the component will not render. This is useful if you wish to include the component at a specific location on the page. Note: [Display Information Settings](https://developer.vinoshipper.com/docs/injector-available-in-settings#display-information-settings) may also be included to Product Catalog and will be passed down to the Available In instance. See [Available In](https://developer.vinoshipper.com/docs/injector-available-in) for more information. ## `data-vs-available-ships-to` Type: Boolean
Default: `true` When enabled, displays the list of states the producer is able to ship alcoholic products to. ## `data-vs-available-other-delivery` Type: Boolean
Default: `true` When enabled, displays other delivery information when enabled by the producer account. This includes pick-up and/or local delivery options. ## `data-vs-available-restricted` Type: Boolean
Default: `true` When enabled, displays the list of states where some alcoholic products are restricted. ## `data-vs-available-not-ships-to` Type: Boolean
Default: `false` When enabled, displays list of states that are unavailable to ship alcoholic products to. ## `data-vs-tooltips` Type: Boolean
Default: `undefined` (falls back to global `tooltip` setting, which defaults to `true`) When `true`, tooltips for the Available In component will display on hover/focus. When `false`, all tooltips will not display. This will only effect the Available In component rendered inside the Product Catalog. ## `data-vs-desc-force` Type: Boolean
Default: `false` When `false`, the Product Catalog will render the "Show/Hide Description" actions, except when in list layout and the element is larger than 504px. When `true`, the Product Catalog will always show the full description of each product and not render the "Show/Hide Description" actions, regardless of the layout and the width of the Product Catalog element. ## `data-vs-theme` Type: String | undefined
Default: `undefined` Overwrites the global theme setting for the particular component instance. Includes setting the theme for the Announcement and Available In components, if included in this component instance.