Text

<div class="necklace-name-field">

  <label for="necklace-name">
    Necklace Name <span>*</span>
  </label>

  <input
    type="text"
    id="necklace-name"
    class="necklace-name-input"
    maxlength="50"
    autocomplete="off"
  >

  <div class="necklace-name-error">
    Please enter a necklace name.
  </div>

</div>

<style>
.necklace-name-field {
  width: 100%;
  margin: 18px 0 20px;
}

.necklace-name-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #222;
}

.necklace-name-field label span {
  color: #222;
}

.necklace-name-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  background: #fff;
  color: #222;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.necklace-name-input:focus {
  border-color: #222;
}

.necklace-name-input.error {
  border-color: #e00000;
}

.necklace-name-error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #e00000;
}
</style>

<script>
(function () {

  function setupNecklaceField() {

    var input = document.querySelector('.necklace-name-input');
    var error = document.querySelector('.necklace-name-error');

    if (!input) return;

    /*
     * Find Shopify's product form.
     */
    var productForm = document.querySelector(
      'form[action*="/cart/add"]'
    );

    if (!productForm) {
      productForm = document.querySelector(
        'form[action="/cart/add"]'
      );
    }

    if (!productForm) return;

    /*
     * Create a hidden Shopify line-item property.
     */
    var hiddenInput = productForm.querySelector(
      'input[name="properties[Necklace Name]"]'
    );

    if (!hiddenInput) {

      hiddenInput = document.createElement('input');

      hiddenInput.type = 'hidden';
      hiddenInput.name = 'properties[Necklace Name]';

      productForm.appendChild(hiddenInput);
    }

    /*
     * Keep hidden field updated.
     */
    input.addEventListener('input', function () {

      hiddenInput.value = input.value.trim();

      input.classList.remove('error');

      if (error) {
        error.style.display = 'none';
      }

    });

    /*
     * Validate before adding to cart.
     */
    productForm.addEventListener('submit', function (event) {

      var name = input.value.trim();

      if (name === '') {

        event.preventDefault();

        input.classList.add('error');

        if (error) {
          error.style.display = 'block';
        }

        input.focus();

        return false;
      }

      hiddenInput.value = name;

    });

  }

  /*
   * Run when page loads.
   */
  document.addEventListener(
    'DOMContentLoaded',
    setupNecklaceField
  );

  /*
   * Also run after Shopify/Avone dynamic updates.
   */
  setTimeout(setupNecklaceField, 500);
  setTimeout(setupNecklaceField, 1500);

})();
</script>