Hello Everyone! So today I want to take a little time to explain how I was able to add a ‘Custom Field’ onto a product page on Shopify. Now this was for my first Shopify site and I imaged it would be an easy implementation as Shopify is a real all inclusive platform. That did not end up being the case and all of the plugins or extensions that I found required monthly payments, which for me at the time trying to launch a business idea with 0 monthly income I was trying to do with little costs as possible.
Now after I did this implementation I did get a response on a forum of a user mentioning a free plugin that would complete my desired actions but I did not attempt to go back and test. This extension was
“Hi Nick,
Hugh here from Shopify. If you were interested, there is a great app that can help you achieve this, instead of tampering with the code extensively.
It is called Infinite Options, free to use, and very easy to use! It will allow you to put entry fields on the product page, and the entered data will come in as a note on the order. I hope that helps.
Please let me know if you had any other questions about this!
Hugh“
So for starters, this is the Shopify blog post that I was following when attempting to add these custom fields to my product page: https://help.shopify.com/themes/customization/products/get-customization-information-for-products. While it did help me to get some of the needed structure set up, it definitely did not get me to the end goal that I needed being a CUSTOM FIELD ON MY PRODUCT PAGE! Ok, that was a little dramatic. But it does not get you 100% of the way there. For this I had to work with a co-worker / developer to iron out the little details. What I am going to give you is a mix of the aforementioned blog from Shopify with the additional work that I had to do to get it to display and pass on through the checkout process and into my backend orders.
Adding Custom Fields to Shopify Product Page
What we are going to do today is allow you to have a text box on your product detail page which will allow you to collect customization information from your customer. Whether this is a monogram, size details, custom notes, color specifications, etc. Shopify calls these ‘line item properties’ and will be passed throughout the checkout process for the shop owner to be able to view per line item in the order details.
From Shopify: You can add form fields to a product page to collect this customization information from customers. Your store will show customized products as independent items in the cart. For example, if a customer orders two shirts, one with the monogram AMH and the other with the monogram CAR, the two shirts will appear as different line items in the customer’s cart.
In order to get this custom information from our customers, we will need to follow a few steps to customize our products and product templates:
- Step 1: Create a template for customizable products
- Step 2: Create a customized section to add custom fields
- Step 3: Add customization form fields
- Step 4: Set customizable products to use the new template
- Optional: Make customization form fields required
- Optional: Allow file uploads
Step 1: Create a template for customizable products
Chances are you don’t need customization options on all of your products, only a select few. For this reason we will create a separate customized template in which you can apply to a select few products to give them your chosen customized fields and keep your other products with a default template.
- From your Shopify admin, click Online Store, and then click Themes (or press G W T).
- Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.
- In the Templates section, click Add a new template.
- In the Add a New Template dialog, choose product from the drop-down menu and name the template customizable:
- Click Create template. This creates a copy of your product.liquid template called product.customizable.liquid.
Next, we need to add forms to our customized product template to specify which details our customers should provide.
Step 2: Create a customized section to add custom fields
Now this is where in the Shopify instructions things got a bit jumbled up and did not appear as I was seeing in my Shopify backend which lead me to do some research of my own. From here on out I will be giving you the correct information on how to add these fields!
- From your Shopify admin, click Online Store, and then click Themes (or press G W T).
- Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.
- In the Sections section, click product.template.liquid to open the product template section in the code editor.
- Copy all of the information within this code editor, all of it!
- In the Sections section, click Add a new section.
- In the Add a New Section dialog name the template product-customized
- Paste the code copied from the product.template.liquid into the new section and save.
Step 3: Add customization form fields
- From your Shopify admin, click Online Store, and then click Themes (or press G W T).
- Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.
- In the Sections section, click product-customizable.liquid to open the customizable section template in the code editor.
- In your product.customizable.liquid template, find the form tag containing the code action=”/cart/add”. This is the code for the Add to cart button. On a new line above the code for the Add to cart button (but inside the form tag), add the form fields for your product customization.
For example, the following form fields add a Monogram field where customers can enter text for a monogram:
<div>
<label for=“monogram”>Monogram</label>
<input type=“text” id=“monogram” name=“properties[Monogram]”>
</div>
You can alter the above code to fit the type of product customization you want. For example, replace all instances of monogram with engraving to let customers add an engraving note to the product. Similarly, you can add the code multiple times with different customization types to let the customer add multiple customizations.
Tip
The Shopify UI Elements Generator can help you quickly generate the form field code for a line item property.
The line where you place the above code determines where the form field will appear on your product page. Since each theme displays the product page differently, you may need to experiment with putting the code in different places to find what works for you.
As you can see in my example, I added the div below the add to cart text but within the form.
- Click Save to confirm changes to your custom section.
Step 4: Have your customized product template reference the customized product section
- From your Shopify admin, click Online Store, and then click Themes (or press G W T).
- Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.
- In the Templates section, click product.customizable.liquid to open the customizable template in the code editor.
- Within the new template you should see {% section ‘product-template’ %}, this is referencing the generic product template so we need to reference the new template. Replace ‘product-template’ with ‘product-customized’. This will allow your new customized template to pull the customized code within the section.
- Hit Save.
Step 5: Set customizable products to use the new template
- From your Shopify admin, click Products (or press G P P):
- Click the name of the product that will use your new template.
- In the Theme templates section, choose product.customizable from the Product template menu.
- Click Save to confirm the changes to the product.
The customization form fields that you created will now appear on that product’s page. Repeat the steps to enable the template on multiple products. You can use the bulk editor to enable your template on many products at once.
Your customers can now add customization information to any products that use your customizable template.
Thank you for reading!
Keep on learning.
