Where you can achieve what your competitors can’t

Custom Text Box on Shopify product page

Code for All Products :

{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}

{%- assign onhow_studio_block_id = 'onhow-studio-custom-text-' | append: section.id -%}

<style>
  #{{ onhow_studio_block_id }} {
    width: 100%;
    margin: 1rem 0;
    font-family: inherit;
  }

  #{{ onhow_studio_block_id }} * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__heading {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: inherit;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input::placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input:focus {
    border-color: rgba(0, 0, 0, 0.8);
  }
</style>

<div id="{{ onhow_studio_block_id }}">
  <label class="onhow-studio-custom-text__heading" for="{{ onhow_studio_block_id }}-input">
    Personalization
  </label>
  <input
    type="text"
    id="{{ onhow_studio_block_id }}-input"
    class="onhow-studio-custom-text__input"
    placeholder="Enter your text here"
    autocomplete="off"
  >
</div>

<script>
  (function() {
    var container = document.getElementById('{{ onhow_studio_block_id }}');
    if (!container) return;
    
    var visibleInput = container.querySelector('.onhow-studio-custom-text__input');
    if (!visibleInput) return;
    
    var section = container.closest('.shopify-section') || document;
    
    var propertyName = "properties[Personalization]";

    function syncToForm() {
      var form = section.querySelector('form[action*="/cart/add"]');
      if (!form) return;

      var hiddenInput = form.querySelector('input[name="' + propertyName + '"][data-onhow-hidden]');

      if (!hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = propertyName;
        hiddenInput.setAttribute('data-onhow-hidden', 'true');
        form.appendChild(hiddenInput);
      }

      hiddenInput.value = visibleInput.value;
    }

    visibleInput.addEventListener('input', syncToForm);
    
    syncToForm();

    var observer = new MutationObserver(function(mutations) {
      syncToForm();
    });

    observer.observe(section, { childList: true, subtree: true });
  })();
</script>



____________________________________________________________________________________________


Code for Specific Products :

{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}

{% if product.tags contains 'custom' %}
{%- assign onhow_studio_block_id = 'onhow-studio-custom-text-' | append: section.id -%}

<style>
  #{{ onhow_studio_block_id }} {
    width: 100%;
    margin: 1rem 0;
    font-family: inherit;
  }

  #{{ onhow_studio_block_id }} * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__heading {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: inherit;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease;
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input::placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  #{{ onhow_studio_block_id }} .onhow-studio-custom-text__input:focus {
    border-color: rgba(0, 0, 0, 0.8);
  }
</style>

<div id="{{ onhow_studio_block_id }}">
  <label class="onhow-studio-custom-text__heading" for="{{ onhow_studio_block_id }}-input">
    Personalization
  </label>
  <input
    type="text"
    id="{{ onhow_studio_block_id }}-input"
    class="onhow-studio-custom-text__input"
    placeholder="Enter your text here"
    autocomplete="off"
  >
</div>

<script>
  (function() {
    var container = document.getElementById('{{ onhow_studio_block_id }}');
    if (!container) return;
    
    var visibleInput = container.querySelector('.onhow-studio-custom-text__input');
    if (!visibleInput) return;
    
    var section = container.closest('.shopify-section') || document;
    
    var propertyName = "properties[Personalization]";

    function syncToForm() {
      var form = section.querySelector('form[action*="/cart/add"]');
      if (!form) return;

      var hiddenInput = form.querySelector('input[name="' + propertyName + '"][data-onhow-hidden]');

      if (!hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = propertyName;
        hiddenInput.setAttribute('data-onhow-hidden', 'true');
        form.appendChild(hiddenInput);
      }

      hiddenInput.value = visibleInput.value;
    }

    visibleInput.addEventListener('input', syncToForm);
    
    syncToForm();

    var observer = new MutationObserver(function(mutations) {
      syncToForm();
    });

    observer.observe(section, { childList: true, subtree: true });
  })();
</script>
{% endif %}