VvebOIDC/public/themes/solutry/product/product-options.html

<div id="options" class="product-options mt-4" data-v-component-product-options>
  <div data-v-if="count > 0">
    <hr class="border opacity-50">

    <h6>Available Options</h6>

    <div class="form-group image" data-v-option>
      <label class="form-label" data-v-option-name>Color</label>

      <div data-v-if="option.type = 'radio'">
        <div class="radio" data-v-value>
          <label>
            <input type="radio" name="option[1]" value="1" data-v-value-input>
            <div>
              <img src="img/demo/blue.gif" alt="Blue" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Blue</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
        <div class="radio" data-v-value>
          <label>
            <input type="radio" name="option[1]" value="2" data-v-value-input>
            <div>
              <img src="img/demo/green.gif" alt="Green" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Green</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
        <div class="radio" data-v-value>
          <label>
            <input type="radio" name="option[1]" value="3" data-v-value-input>
            <div>
              <img src="img/demo/navy.gif" alt="Navy" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Navy</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
      </div>

      <div data-v-if="option.type = 'checkbox'">
        <div class="checkbox mb-2" data-v-value>
          <label class="form-check-label form-control">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" name="option[2]" value="1" data-v-value-input>
              <img src="img/demo/blue.gif" height="32" alt="Blue" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Blue</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
        <div class="checkbox mb-2" data-v-value>
          <label class="form-check-label form-control">
            <div>
              <input type="checkbox" class="form-check-input" name="option[2]" value="2" data-v-value-input>
              <img src="img/demo/green.gif" height="32" alt="Green" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Green</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
        <div class="checkbox mb-2" data-v-value>
          <label class="form-check-label form-control">
            <div>
              <input type="checkbox" class="form-check-input" name="option[2]" value="3" data-v-value-input>
              <img src="img/demo/navy.gif" height="32" alt="Navy" data-v-if="value.image" data-v-value-image>
              <span data-v-value-name>Navy</span>
              <span data-v-if="value.price > 0">
                (<span data-v-value-price_formatted>+$50</span>)
              </span>
            </div>
          </label>
        </div>
      </div>

      <div data-v-if="option.type = 'select'">
        <select class="form-select" data-v-option-input>
          <option value="" data-v-value>Option 1</option>
          <option value="" data-v-value>Option 2</option>
          <option value="" data-v-value>Option 3</option>
        </select>
      </div>


      <div data-v-if="option.type = 'text'">
        <input type="text" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'number'">
        <input type="number" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'email'">
        <input type="email" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'textarea'">
        <textarea class="form-control" name="option[1]" data-v-option-input></textarea>
      </div>

      <div data-v-if="option.type = 'file'">
        <input type="file" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'date'">
        <input type="date" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'time'">
        <input type="time" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>

      <div data-v-if="option.type = 'datetime'">
        <input type="datetime-local" class="form-control" name="option[1]" value="" data-v-option-input>
      </div>
    </div>

    <div class="form-group" data-v-option>
      <label class="form-label">Size</label>

      <div>
        <div class="radio">
          <label>
            <input type="radio" name="option[240]" value="62">
            <div>XS</div>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="option[240]" value="60">
            <div>M</div>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="option[240]" value="63">
            <div>L</div>
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="option[240]" value="61">
            <div>XL</div>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>