Skip to content
vviinn DocsDocs Beta

Customization Overview

vviinn widgets offer three powerful ways to customize appearance and content. This guide helps you choose the right approach for your needs.

Customization methods

Section titled “Customization methods”

CSS Variables

Section titled “CSS Variables”

Theme-level styling: colors, fonts, spacing. Use for:

  • Change brand colors (primary, hover)
  • Change font family globally
  • Style product card appearance (alignment, borders)

Target Styling

Section titled “Target Styling”

Precise element control with the ::part() selector. Use for:

  • Style a specific button or element
  • Change element positioning or layout
  • Apply complex CSS (animations, transforms)

Custom Content

Section titled “Custom Content”

Replace default content with your own HTML. Use for:

  • Replace button text or labels
  • Add custom icons
  • Inject custom HTML/markup

Quick start examples

Section titled “Quick start examples”

CSS Variables: change primary color

Section titled “CSS Variables: change primary color”
vviinn-vps-button {
  --color-primary: #078688;
  --color-primary-hover: #056b67;
}

Target Styling: style upload button

Section titled “Target Styling: style upload button”
vviinn-vps-button::part(upload-photo_button) {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
}

Custom Content: replace button text

Section titled “Custom Content: replace button text”
<style>
  vviinn-vps-button [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>


<vviinn-vps-button token="YOUR_READ_ONLY_TOKEN">
  <span slot="vviinn-image-upload-button-text">Upload Image</span>
</vviinn-vps-button>

The widget copies slotted content into its own markup, so hide the original elements with the [slot] rule, as in the Custom Content examples.

Combining methods

Section titled “Combining methods”

You can use multiple customization methods together for maximum flexibility.

Combining all three methods

Section titled “Combining all three methods”
Find your best match Upload Image