How can I add a pop-up option like the one below?

[zenir_official]

Hi everyone, I wanted to ask you about a problem I'm having with product options.
I want to run a name embroidery service on clothes as shown in the picture and want to add the same popup options functionality but I don't know how to do it, do I need a separate app?

Kind regards,
Zenir

[BlackCro]

There are several ways to do this, below is some code you can place inside main-product.liquid where you want to box to display on the product page. It uses a metafield to ensure it only displays on the products you need it to, so go to Settings, Custom Data, Products and click Add definition. The namespace and key should be custom.name_field and under Select Type pick True or False. Now you will see an option to toggle this on under Metafields in product pages.

{% if product.metafields.custom.name_field %}
  <div class= "Custom-name-input"> 
    <label class= "form__label"> Name </label>
      <div class= "field" >
        <input class="field__input" type= "text" name= "properties[Name]" form="{{ product_form_id }}">
      </div>
  </div>
{% endif %}

Depending on the theme you're using the form element may be different, but that ensures the data is visible at checkout and contained within the order on the backend. 

Hope this helps