Basics: product selector

        
  <metavrs-viewer
  id="ex3"
  company-eid="-5286354827860524208"
  viewer-eid="-2858267086817596446"
  sku="demowatch%gold"
  fallback-poster="https://api.metav.rs/static/company/-5286354827860524208/file/8976010479029864051.jpg"
  ></metavrs-viewer>

  <metavrs-viewer-selector id="ex3-selector" for="ex3">
    <metavrs-asset sku="demowatch%gold" color="#bf8432" label="Or 19k 750" />
    <metavrs-asset sku="demowatch%steel" color="#9da6a8" label="Acier" />
  </metavrs-viewer-selector>

  <style>
  /* Custom selector theme example */
  .metavrs-viewer-selector {
    display: flex;
    gap: 1em;
  }
  .metavrs-selector-item {
    background-color: transparent;
    padding: 0.5em;
    position: relative;
    width: 6em;
    text-align: center;
    flex-grow: 0; flex-shrink: 0;
  }
  .metavrs-selector-item.current {
    border: 1px solid currentColor;
    box-shadow: 0 0 1em color-mix(in srgb, currentColor 33%, transparent);
  }
  .metavrs-selector-item > button {
    border: none; cursor: pointer; display: block;
  }
  .metavrs-selector-item-color {
    width: 100%; aspect-ratio: 16 / 9;
  }
  .metavrs-selector-item-label {
    width: 100%; text-align: center;
    height: max-content;
    font-family: inherit;
    font-weight: bold;
    padding: 0.75rem 0 0 0;
    background: none;
    font-size: 0.8em;
  }
  </style>