---
updatedAt: 2025-08-15T23:59:18.000Z
agentTools:
  projectIndex: https://developer.vinoshipper.com/llms.txt
---

# Styling

Product Item generates native HTML that the host site can style. Our defaults include a basic set of styles, but producer’s developers can modify further.

# Basic Theming

By default, the `theme` variable defined in [Configuration](injector-configuration) is used with every widget; no additional configuration needed.

## Basic Theming by Element

You can overwrite an individual Product Item 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.

```html
<div class="vs-product-item" data-vs-product-id="000" 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries). This is not the same as the viewport width.

# Advanced Theming

Product Item 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](https://developer.vinoshipper.com/docs/injector-add-to-cart-styling).

```css
.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;
}
```