javascript - How to add custom textbox field on shopify product page that also shown in cart under product description

Solution:

first create a new text field on the product page: In your Shopify dashboard, go to "Online Store > Themes" and click the "Actions" button next to the theme you want to edit. Click the "Edit HTML/CSS" button. In the "Templates" directory, click on the "product.liquid" file to edit it. Find the section of the template where you want to add the textbox field, and add the following code:

<div class="form-field form-field--required">
  <label for="product-custom-text">Custom Text</label>
  <textarea id="product-custom-text" name="properties[Custom Text]"></textarea>
</div>
Copy code

This will add a textbox field to the product page where customers can enter custom text.

Save the changes to the "product.liquid" template.

Display the custom text in the cart:

In the "Templates" directory, click on the "cart.liquid" file to edit it. Find the section of the template where you want to display the custom text, and add the following code:

{% if item.properties['Custom Text'] %}
  <p>Custom Text: {{ item.properties['Custom Text'] }}</p>
{% endif %}
Copy code

This will display the custom text entered by the customer in the cart, under the product description.

Save the changes to the "cart.liquid" template.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.