Replace Widget Content

Want to change “Add to Basket” to “Add to Cart”? Use your own icons? Slots let you replace default text and content with your own HTML.

Add your content with the slot attribute to place it inside the widget. Learn more about Slots.

Available in these widgets

• Discovery Slider
• Discovery Set
• Search Modal
• Filters
• Product List

Discovery

Here are slots that can be used for the Discovery Slider, Discovery Set and One-Click Discovery widgets.

Discovery Slider slots

• vviinn-recommendations-title — Recommendations title text
• vviinn-basket-button-text — Text of Add to Basket button
• vviinn-energy-label-data-sheet-text — Text of the data sheet link for the energy label
• vviinn-basket-button-icon — Icon of Add to Basket button
• vviinn-basket-button-text-pressed — Text of pressed Add to Basket button
• vviinn-basket-button-icon-pressed — Icon of pressed Add to Basket button
• vviinn-favorite-icon — Icon of Favorite button
• vviinn-favorite-icon-pressed — Icon of pressed Favorite button

Preview

Custom Title Add to Cart

Code

<style>
  vviinn-vpr-widget [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>

<vviinn-vpr-widget
  token="YOUR_READ_ONLY_TOKEN"
  product-id="YOUR_PRODUCT_ID"
  mode="grid"
  block-title=""
  add-to-basket-show="true"
  product-details-new-tab="true"
>
  <span slot="vviinn-recommendations-title">Custom Title</span>
  <span slot="vviinn-basket-button-text">Add to Cart</span>
</vviinn-vpr-widget>

One-Click Discovery Slider slots

In addition to Discovery Slider slots, the icon of the One-Click Discovery button can be changed.

Preview

Custom Title Add to Cart

Code

<style>
  vviinn-vpr-button [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>

<vviinn-vpr-button
  token="YOUR_READ_ONLY_TOKEN"
  product-id="YOUR_PRODUCT_ID"
  mode="grid"
  add-to-basket-show="true"
  product-details-new-tab="true"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M23.6 4.57C20.39 4.19 19.88 3.68 19.42 0.37C19.38 0.15 19.22 0 19.01 0C18.8 0 18.63 0.15 18.59 0.37C18.12 3.66 17.63 4.13 14.41 4.57C14.17 4.61 14.01 4.77 14.01 5C14.01 5.23 14.17 5.39 14.41 5.42C17.63 5.81 18.14 6.31 18.59 9.62C18.63 9.84 18.8 10 19.01 10C19.22 10 19.39 9.84 19.42 9.62C19.89 6.31 20.39 5.81 23.6 5.42C23.84 5.38 24 5.22 24 5C24 4.78 23.83 4.6 23.6 4.57Z" fill="#161616"/><path d="M7 8H5C4.45 8 4 8.45 4 9C4 9.55 4.45 10 5 10H7V11C7 11.55 7.45 12 8 12C8.55 12 9 11.55 9 11V7C9 6.45 8.55 6 8 6C7.45 6 7 6.45 7 7V8Z" fill="#161616"/><path d="M17 16H19C19.55 16 20 15.55 20 15C20 14.45 19.55 14 19 14H17V13C17 12.45 16.55 12 16 12C15.45 12 15 12.45 15 13V17C15 17.55 15.45 18 16 18C16.55 18 17 17.55 17 17V16Z" fill="#161616"/><path d="M16 9C16 8.45 15.55 8 15 8H10V10H15C15.55 10 16 9.55 16 9Z" fill="#161616"/><path d="M4 15C4 15.55 4.45 16 5 16H14V14H5C4.45 14 4 14.45 4 15Z" fill="#161616"/></svg>
  <span slot="vviinn-recommendations-title">Custom Title</span>
  <span slot="vviinn-basket-button-text">Add to Cart</span>
</vviinn-vpr-button>

Discovery Set slots

• vviinn-recommendations-title — Recommendations title text
• vviinn-recommendations-subtitle — Recommendations subtitle text
• vviinn-energy-label-data-sheet-text — Text of the data sheet link for the energy label
• vviinn-basket-button-text — Text of Add to Basket button
• vviinn-basket-button-icon — Icon of Add to Basket button
• vviinn-basket-button-text-pressed — Text of pressed Add to Basket button
• vviinn-basket-button-icon-pressed — Icon of pressed Add to Basket button
• vviinn-favorite-icon — Icon of Favorite button
• vviinn-favorite-icon-pressed — Icon of pressed Favorite button
• vviinn-update-button-text — Text of Update Button on the top
• vviinn-update-button-icon — Icon of Update Button

Preview

Custom Title Custom Subtitle Add to Cart Custom Update Pressed

Code

<style>
  vviinn-vpr-widget [slot] {
    visibility: hidden;
    position: absolute;
  }

  vviinn-vpr-widget::part(update-button-item) {
    width: 28px;
    height: 28px;
  }
</style>

<vviinn-vpr-widget
  token="YOUR_READ_ONLY_TOKEN"
  product-id="YOUR_PRODUCT_ID"
  mode="set"
  campaign-type="VCS"
  product-details-new-tab="true"
>
  <span slot="vviinn-recommendations-title">Custom Title</span>
  <span slot="vviinn-recommendations-subtitle">Custom Subtitle</span>
  <span slot="vviinn-basket-button-text">Add to Cart</span>
  <span slot="vviinn-update-button-text">Custom Update</span>
  <span slot="vviinn-basket-button-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V8C4 7.45 4.19583 6.97917 4.5875 6.5875C4.97917 6.19583 5.45 6 6 6H8C8 4.9 8.39167 3.95833 9.175 3.175C9.95833 2.39167 10.9 2 12 2C13.1 2 14.0417 2.39167 14.825 3.175C15.6083 3.95833 16 4.9 16 6H18C18.55 6 19.0208 6.19583 19.4125 6.5875C19.8042 6.97917 20 7.45 20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V8H16V10C16 10.2833 15.9042 10.5208 15.7125 10.7125C15.5208 10.9042 15.2833 11 15 11C14.7167 11 14.4792 10.9042 14.2875 10.7125C14.0958 10.5208 14 10.2833 14 10V8H10V10C10 10.2833 9.90417 10.5208 9.7125 10.7125C9.52083 10.9042 9.28333 11 9 11C8.71667 11 8.47917 10.9042 8.2875 10.7125C8.09583 10.5208 8 10.2833 8 10V8H6V20ZM10 6H14C14 5.45 13.8042 4.97917 13.4125 4.5875C13.0208 4.19583 12.55 4 12 4C11.45 4 10.9792 4.19583 10.5875 4.5875C10.1958 4.97917 10 5.45 10 6Z" fill="#161616"/></svg>
  </span>
  <span slot="vviinn-basket-button-text-pressed">Pressed</span>
  <span slot="vviinn-basket-button-icon-pressed">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V8C4 7.45 4.19583 6.97917 4.5875 6.5875C4.97917 6.19583 5.45 6 6 6H8C8 4.9 8.39167 3.95833 9.175 3.175C9.95833 2.39167 10.9 2 12 2C13.1 2 14.0417 2.39167 14.825 3.175C15.6083 3.95833 16 4.9 16 6H18C18.55 6 19.0208 6.19583 19.4125 6.5875C19.8042 6.97917 20 7.45 20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM6 20H18V8H16V10C16 10.2833 15.9042 10.5208 15.7125 10.7125C15.5208 10.9042 15.2833 11 15 11C14.7167 11 14.4792 10.9042 14.2875 10.7125C14.0958 10.5208 14 10.2833 14 10V8H10V10C10 10.2833 9.90417 10.5208 9.7125 10.7125C9.52083 10.9042 9.28333 11 9 11C8.71667 11 8.47917 10.9042 8.2875 10.7125C8.09583 10.5208 8 10.2833 8 10V8H6V20ZM10 6H14C14 5.45 13.8042 4.97917 13.4125 4.5875C13.0208 4.19583 12.55 4 12 4C11.45 4 10.9792 4.19583 10.5875 4.5875C10.1958 4.97917 10 5.45 10 6Z" fill="red"/></svg>
  </span>
  <span slot="vviinn-update-button-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.42 1.37C18.88 4.68 19.39 5.19 22.6 5.57C22.83 5.6 23 5.78 23 6C23 6.22 22.84 6.38 22.6 6.42C19.39 6.81 18.89 7.31 18.42 10.62C18.39 10.84 18.22 11 18.01 11C17.8 11 17.63 10.84 17.59 10.62C17.14 7.31 16.63 6.81 13.41 6.42C13.17 6.39 13.01 6.23 13.01 6C13.01 5.77 13.17 5.61 13.41 5.57C16.63 5.13 17.12 4.66 17.59 1.37C17.63 1.15 17.8 1 18.01 1C18.22 1 18.38 1.15 18.42 1.37ZM10.57 22.47C10.51 22.78 10.3 23 10 23C9.7 23 9.49 22.78 9.44 22.47C8.58 16.21 7.73 15.37 1.55 14.56C1.22 14.53 1 14.29 1 13.99C1 13.69 1.22 13.46 1.55 13.43C7.74 12.74 8.63 11.78 9.44 5.51C9.49 5.21 9.7 5 10 5C10.3 5 10.51 5.2 10.57 5.51C11.38 11.78 12.26 12.74 18.46 13.43C18.78 13.46 19 13.68 19 13.99C19 14.3 18.78 14.53 18.46 14.56C12.26 15.25 11.38 16.21 10.57 22.47Z" fill="#161616"/></svg>
  </span>
</vviinn-vpr-widget>

One-Click Discovery Set slots

In addition to Discovery Set slots, the icon of the One-Click Discovery button can also be changed.

Preview

Custom Title Custom Subtitle Add to Cart Custom Update IC Button Pressed IP I

Code

<style>
  vviinn-vpr-button [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>

<vviinn-vpr-button
  token="YOUR_READ_ONLY_TOKEN"
  product-id="YOUR_PRODUCT_ID"
  mode="set"
  campaign-type="VCS"
  product-details-new-tab="true"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.42 1.37C18.88 4.68 19.39 5.19 22.6 5.57C22.83 5.6 23 5.78 23 6C23 6.22 22.84 6.38 22.6 6.42C19.39 6.81 18.89 7.31 18.42 10.62C18.39 10.84 18.22 11 18.01 11C17.8 11 17.63 10.84 17.59 10.62C17.14 7.31 16.63 6.81 13.41 6.42C13.17 6.39 13.01 6.23 13.01 6C13.01 5.77 13.17 5.61 13.41 5.57C16.63 5.13 17.12 4.66 17.59 1.37C17.63 1.15 17.8 1 18.01 1C18.22 1 18.38 1.15 18.42 1.37ZM10.57 22.47C10.51 22.78 10.3 23 10 23C9.7 23 9.49 22.78 9.44 22.47C8.58 16.21 7.73 15.37 1.55 14.56C1.22 14.53 1 14.29 1 13.99C1 13.69 1.22 13.46 1.55 13.43C7.74 12.74 8.63 11.78 9.44 5.51C9.49 5.21 9.7 5 10 5C10.3 5 10.51 5.2 10.57 5.51C11.38 11.78 12.26 12.74 18.46 13.43C18.78 13.46 19 13.68 19 13.99C19 14.3 18.78 14.53 18.46 14.56C12.26 15.25 11.38 16.21 10.57 22.47Z" fill="#161616"/></svg>
  <span slot="vviinn-recommendations-title">Custom Title</span>
  <span slot="vviinn-recommendations-subtitle">Custom Subtitle</span>
  <span slot="vviinn-basket-button-text">Add to Cart</span>
  <span slot="vviinn-update-button-text">Custom Update</span>
  <span slot="vviinn-basket-button-icon">IC</span>
  <span slot="vviinn-basket-button-text-pressed">Button Pressed</span>
  <span slot="vviinn-basket-button-icon-pressed">IP</span>
  <span slot="vviinn-update-button-icon">I</span>
</vviinn-vpr-button>

Search Modal

Slots that can be used for the Search Modal widget.

Search Modal slots

• default slot (unnamed) — Replaces the default search button icon. Can contain any HTML content including text, SVG icons, or other elements
• vviinn-teaser-text — Text on the widget’s main screen
• vviinn-image-upload-button-text — Title of Upload Button
• vviinn-image-upload-icon — Icon of Upload Button
• vviinn-camera-button-text-start — Title of Start Camera button (for Desktop)
• vviinn-camera-button-text-stop — Title of Stop Camera button (for Desktop)
• vviinn-camera-icon — Icon of Camera Button
• vviinn-text-search-icon — Icon of the text search block
• vviinn-privacy-badge-text — Text content of privacy notification block
• vviinn-image-search-modal-title — Image search modal title
• vviinn-energy-label-data-sheet-text — Text of the data sheet link for the energy label

Preview

Custom Text Custom Button Text

Code

<style>
  vviinn-vps-button [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>

<vviinn-vps-button
  token="YOUR_READ_ONLY_TOKEN"
  text-search-show="true"
  locale="en-US"
  add-style="true"
>
  <svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z"
      fill="#008080"
    />
  </svg>
  <span slot="vviinn-teaser-text">Custom Text</span>
  <span slot="vviinn-image-upload-button-text">Custom Button Text</span>
</vviinn-vps-button>

Text button example

Example showing how to use text content in the default (unnamed) slot to create a text button instead of an icon button.

Preview

Search Now

Code

<vviinn-vps-button
  token="YOUR_READ_ONLY_TOKEN"
  add-style="false"
>
  <span style="background-color: lightgreen; padding: 8px 16px;">Search Now</span>
</vviinn-vps-button>

Filters

Slots that can be used for the Extended Filters component.

Filters slots

• vviinn-extended-filters-title — Text on widget’s header
• vviinn-extended-filters-apply — Title of Apply Button
• vviinn-extended-filters-reset — Title of Reset Button

Preview

Custom Title Custom Apply Custom Reset

Code

<style>
  vviinn-extended-filters [slot] {
    visibility: hidden;
    position: absolute;
  }
</style>

<vviinn-extended-filters locale="en-US">
  <span slot="vviinn-extended-filters-title">Custom Title</span>
  <span slot="vviinn-extended-filters-apply">Custom Apply</span>
  <span slot="vviinn-extended-filters-reset">Custom Reset</span>
</vviinn-extended-filters>

Product List

Slots that can be used for the Product List component.

Product List slots

These slots are used when one-click-discovery-mode is set to modal, append-grid or append-slider in the Product List component.

• vviinn-results-vpr-icon — Discovery main slot to change the One-Click Discovery icon
• vviinn-favorite-icon — Icon of Favorite button
• vviinn-favorite-icon-pressed — Icon of pressed Favorite button
• vviinn-basket-button-text — Text of Add to Basket button
• vviinn-basket-button-icon — Icon of Add to Basket button
• vviinn-basket-button-text-pressed — Text of pressed Add to Basket button
• vviinn-basket-button-icon-pressed — Icon of pressed Add to Basket button