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.

productCatalogAnnouncement

Type: Boolean | undefined
Default: true

When false, all instances of Product Catalog will not include the 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.

productCatalogAvailable

Type: Boolean | undefined
Default: true

When false, all instances of Product Catalog will not include the 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.

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 Main 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-announcement

Type: Boolean
Default: true

When true, Product Catalogs will render an instance of the 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 for more information.

data-vs-available

Type: Boolean
Default: true

When true, Product Catalogs will render an instance of the 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.

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 Announcement and Available In components, if included in this component instance.