Configuration Settings

The following settings are set in the Injector Configuration settings and apply globally to your website. If not defined, the default value will apply.

`productCatalogAvailable`

Type: Boolean | undefined
Default: true

When false, all instances of Product Catalog will not include the Available In widget across all instances of Product Catalog. You will be responsible for including the Available In widget manually on your site.

This global setting can be overwritten by the HTML tag. See 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, do not define this setting.

HTML Element Settings

The following settings can be set for each individual HTML code and are reactive.

`data-vs-cards`

Type: Boolean
Default: false

When false, Product Lists will render in the Lists layout.
When true, Product Catalogs will render in the Cards Layout.

See Product Catalog: Layouts for more information.

`data-vs-list`

Type: Number
Default: undefined

When undefined, the Product Catalog will render the Default Catalog for the producer.

When a number is given, the Product Catalog will render products from that Catalog.

See Product Catalog: Types for more information.

`data-vs-available`

Type: Boolean
Default: true

When true, Product Catalogs will render an instance of the Available In widget. If the catalog contains more than 7 products, the Available In widget will display above the products. Otherwise the Available In widget will render below the products.

When false, the Available In widget will not render. This is useful if you wish to include the Available In widget at a specific location on the page.

See Available In for more information.

`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 Available In widget, if included in this component instance.