Basic Theming

By default, the theme variable defined in Configuration is used with every widget; no additional configuration needed.

Basic Theming by Element

You can overwrite an individual Product Catalog theme by setting the vs-theme attribute. Note: If you change your global theme configuration, the change will not reflect on widgets with custom theme defined.

<div class="vs-products" data-vs-theme="red"></div>

Responsive Design

The responsive behavior of the Product Catalog is based on the element's width using container-type: inline-size. This is not the same as the viewport width.

Advanced Theming

Product Catalog renders as HTML on your page without an iFrame, so it will assume most styles applied to your website.

In addition, you can define CSS Variables to customize the look based on our themes. This allows your style to stay the same as Vinoshipper adds more functionality. Below defines all available settings with the default settings.

For styling the "Add To Cart" buttons, please see Add To Cart: Styling.

For styling the Available In component, please see Available In: Styling.

.vs-products {
    --vs-products-margin-bottom: 1rem;
    --vs-products-spacer: var(--vs-spacer, 1rem);
    --vs-products-gap: var(--vs-gap, 1.5rem);

    --vs-products-card-min-width: 325px;
    --vs-products-card-max-width: 400px;
    --vs-products-list-card-max-width: 578px;

    --vs-products-img-wrapper-width: 324px;
    --vs-products-img-wrapper-height: 276px;
    --vs-products-img-width: 100%;
    --vs-products-img-height: 276px;
    --vs-products-list-md-img-width: 450px;

    --vs-products-font-family: var(--vs-font-family, 'Proxima Nova', sans-serif);
    --vs-products-font-weight: var(--vs-font-weight, normal);
    --vs-products-font-size: 1.3125rem;
    --vs-products-line-height: 1.2;

    --vs-products-header-font-family: var(--vs-header-font-family, inherit);
    --vs-products-header-font-weight: var(--vs-header-font-weight, 600);

    --vs-products-color: #212529;
    --vs-products-background-color: #ffffff;
    
    --vs-products-secondary-color: #6c757d;

    --vs-products-border-color: #ced4da;
    --vs-products-border-width: 1px;
    --vs-products-border-style: solid;
    --vs-products-border-radius: 0.3rem;

    --vs-products-act-border-radius: var(--vs-products-border-radius, 0.3rem);
    --vs-products-form-control-height: inherit;
    --vs-products-form-control-inline-height: 3rem;

    --vs-products-padding: calc(var(--vs-products-spacer, var(--vs-spacer, 1rem)) * 1.5);

    --vs-badge-padding-x: 0.65em;
    --vs-badge-padding-y: 0.35em;
    --vs-badge-font-size: 0.75em;
    --vs-badge-font-weight: 700;
    --vs-badge-color: #000000;
    --vs-badge-background-color: rgba(207, 227, 250, 1);
    --vs-badge-border-radius: 50rem;
}