How to add custom text input Shopify product

by

In Shopify, if we have to sell a custom product, which we want to provide according to the requirement of Bueres, then how should we do it. Friends, we have two options to do this: either we add a paid app in our store or code. So let’s talk about these two today.

Custom text field with Shopify App

The function of the app is very easy, add the app and add more boxes to your project. Where do you have to install the app, I have found the link below, you can install it in your Shopify. You have a 3days free trial and after that, you and your client will be charged 3$ per month.

Textbox ‑ Custom Text field

Custom text field by Code in Shopify Login

To add custom text boxes from code, you need to go to the Shopify stock code editor. You must know how to go to the code editor, don’t you know? So it doesn’t matter. I will tell you how to go to the code editor and what to do. Let me put a snapshot for you so that you will be easy to understand how to get into the bug editor.

How to edit Shopify theme code

From the above snapshot, you must have understood very well how to play the theme editor. So let’s move on. You do not have to do much in this, you just have to open your theme. liquid file, and enter the code of the input box, you will be done. You have to put this code inside the form tag.

You have to find your add-to-cart code in which product file. Because it is a different place in different themes. By default, it is in the template folder or in the section folder. You will have to do some hard work. This section is in the folder in my theme. It took me some time to find it too but got it. Brother, if you want to save money, then you will have to work a little.

I have added a snap-shot, look carefully where you have to enter the code.

How to add custom text field in Shopify products

Let me add some code for you to add different types of input fields. You can do this code according to your need. Copy and paste the code below into your product. liquid file between the <form> and </form> tags. The form field will appear wherever you place the code.

Text fields 


<label for="your-name">Your name</label>
<input id="your-name" class="form-control" type="text" name="properties[Your name]">

Long Text fields 

<label for="your-name">Your name</label>
<textarea id="your-name" class="form-control" name="properties[Your name]"></textarea>

Radio Buttons 

<input id="your-name" class="form-check-input" type="checkbox" value="Your Value">
<label class="form-check-label" for="flexCheckDefault">
    Your Name
</label>

Select Box

<label>Your name</label><br>
  <select id="your-name" name="properties[Your name]" class="form-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

You can add fields according to you and you will get the input of the users in the order details. I think you must have gone to society how to do it. If you need any help then you can contact us and comment.

Leave a Comment