How to add custom fields to the order data on the product page

In the third article of #4weeksShopifyDev, I'll be talking about how to add custom fields to the order data in the product page

I'll adding engraving custom field in product page and display the output of the customer in order page (Shopify Admin)

Demo Image

How to add custom fields to the order data in the product page

Note: I'm using the Debut theme, you may have different architecture

Create a product template

First, we need to create a custom product Shopify template and called product-custom.liquid

How to add custom fields to the order data in the product page

Create a new Shopify section and called product-custom-template and paste the code from the product-template section

How to add custom fields to the order data in the product page

On the product page , change the template suffix to the product.custom

How to add custom fields to the order data in the product page

Create Custom Fields

Create a new custom field

How to add custom fields to the order data in the product page

Copy the generated code

How to add custom fields to the order data in the product page
  • Paste the code before <button type="submit"

Now, you can test it by adding the product to the cart and add the custom field value and process the checkout.

Et voila, the custom field value appear on the checkout page and order page

How to add custom fields to the order data in the product page
Subscribe below to get notified of new posts.

Related Posts

Convert your Shopify store to PWA for better performances (conversion)

On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking Why you should convert your Shopify store to PWA for better performances?

What benefits of being a Shopify partner and make money using it?

On the 15th of the #4WeeksOfShopifyDev challenge, I’ll be talking about what benefits of being a Shopify partner?

Why developers should invest in learning the Shopify App or Theme development?

On the 14th of the #4WeeksOfShopifyDev challenge, I’ll be talking about why developers should invest in learning and becoming a Shopify developer.

Let's Build Something Together

Feel free to reach out if you're looking for a developer, have a question, or just want to connect.

Email:contact@iliashaddad.com

© Ilias Haddad 2021. All rights reserved.

Made with ❤️ in Morocco 🇲🇦