Adding custom fields to the product page (passed to the app and to the cart).
You can add your own fields to the product page, before the customer clicks the "Customize" button. For example: a name to engrave, a text field for delivery instructions, a dropdown to choose a gift box or a checkbox. The values the customer enters are sent to Qstomizer and, when the customized product is added to the cart, they are added to the cart item. They are shown in the cart, at checkout and in the order in your Shopify admin.
These fields use the standard Shopify feature called line item properties. You don't need any extra app. You only need to add a small piece of code to your product page.
Requirements
- The "Customize" button must be added with the Qstomizer App Block (see Setting the Customize button: App Block).
- The name of each field must start with properties[. The text between the brackets is the label shown in the cart. For example, name="properties[Engraving text]" is shown as Engraving text: John.
- Each field must belong to the product form (the form that adds the product to the cart). It can be placed inside the form, or anywhere on the page if it has the attribute form="ID-OF-THE-PRODUCT-FORM".
Step 1. Add a "Custom Liquid" block to the product page
- In your Shopify admin, go to Online Store > Themes and click Customize.
- At the top of the editor, open the product page template (Products > Default product, or the template used by your customizable product).
- In the product information section, click Add block and choose Custom Liquid.
- Drag the block to the place where you want to show the fields (for example, just above the "Customize" button).
Step 2. Paste the code of the fields
Paste this example in the Custom Liquid block and change the labels and options as you need. It adds a text field, a dropdown and a checkbox:
{%- assign qsmz_form_id = 'product-form-' | append: section.id -%}
<p>
<label for="engraving-text">Engraving text</label><br>
<input id="engraving-text" type="text" maxlength="40"
name="properties[Engraving text]" form="{{ qsmz_form_id }}">
</p>
<p>
<label for="gift-box">Gift box</label><br>
<select id="gift-box" name="properties[Gift box]" form="{{ qsmz_form_id }}">
<option value="No">No</option>
<option value="Black box">Black box</option>
<option value="White box">White box</option>
</select>
</p>
<p>
<input id="rush-order" type="checkbox" value="Yes"
name="properties[Rush order]" form="{{ qsmz_form_id }}">
<label for="rush-order">Rush order</label>
</p>Save the changes in the theme editor.
About the form ID
The attribute form="..." links each field to the product form, even if the block is not inside the form. In Dawn and in most official Shopify themes the ID of the product form is product-form- followed by the section ID, and that is what the first line of the code builds.
If your theme uses a different ID, the fields will not be sent. To find the correct ID:
- Open a product page in Chrome, right-click on the "Add to cart" button and select Inspect.
- In the Elements panel, look above the button for the <form tag whose action ends in /cart/add.
- Copy the value of its id attribute and use it in the first line of the code instead of 'product-form-' | append: section.id. For example: {%- assign qsmz_form_id = 'my-product-form' -%}.
You can see how to use the Chrome Developer Tools step by step in this article.
Step 3. Test it
- Open the product page in your store, fill the fields and click Customize.
- Make a design and add the product to the cart.
- Open the cart. Below the product you should see the values: Engraving text: John, Gift box: Black box, and so on. The same values will appear in the order in your Shopify admin.
Hidden fields
If the name of a field starts with an underscore, for example properties[_Internal code], Shopify saves the value in the order but does not show it to the customer in the cart or at checkout. This is useful for internal information.
Important things to know
- Fill the fields before clicking "Customize". The values are sent when the customer clicks the button. They cannot be edited inside the customization tool. If the customer wants to change them, they must go back to the product page, change them and click "Customize" again.
- The attribute required does not block the "Customize" button. The customer can open the tool with a required field empty. If a field is mandatory, make it clear in the label.
- The values are added to every item of the customization. If the customer adds several sizes or variants from the tool, all of them get the same values.
- These fields do not change the price. To change the price depending on the design, see Custom prices.
- File upload fields are not supported. The customer can upload images inside the customization tool instead.
- Keep the values short. The values travel in the address of the page, so very long texts can fail. Use maxlength in text fields.
- Do not use these names: properties[Custom Image] or any name starting with properties[_custom. Qstomizer uses them to save the design in the cart item, and your field would replace them.
- The quantity of the product page is not used. The quantity is selected inside the customization tool (see Quantity from product page is not transferred to the app).
Product options apps
Many product options apps create their fields with names that start with properties[. In that case they work in the same way, and their values are also passed to the cart. If an app uses other names, or does not link its fields to the product form, those values will not be passed to Qstomizer. See Compatibility of Qstomizer with other apps.
Please note: Code modifications are not included in any free service. Depending on the complexity and scope of the required changes, additional fees will apply.
