Custom product options in the bundle
In the product menu in Shopify, you can add several options such as Size, Color, Material or Style. But in some cases it is necessary to specify additional options that are not provided by the standard Shopify functionality. For example, add a custom signature or even upload a picture.
If you want to collect more information on your product page, Shopify has a feature called Line Item Properties. Now such fields can be used for products in the bundle.
Custom data fields can only be used for bundles with their own product page.
Due to the compatibility of bundles with native Shopify functionality of properties fields, you can implement these fields for custom datain your store in two ways:
1. Using a third-party app designed to implement fields for custom product options.
2. By creating additional properties fields in the store theme manually:
This option may require some coding experience
Generate property code
You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your product page. You can add as many custom form fields to your cart form as you need.
Moreover, this tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.
Access Shopify UI Elements Generator
In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu.
If you want your theme to prevent customers from adding a product to the cart before they have filled in your form field, check 'Required'.
Fill-in your custom field
Copy the generated code from the box in the 'Grab your code' section by hitting to 'COPY TO CLIPBOARD':
To finish configuring new custom option fields, please follow these steps:
Find your product template
From Shopify Dashboard, navigate to your Theme editor:
In the 'Sections' directory, click choose any product template you want to add. In my case, it is default product-template.liquid
Add custom code
Find the code type=”submit” in the file (Hit Cmd+F or Ctrl+F on Windows). This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization.
You might need to use CSS code for best match with your design
If you require any help and advice from our team, do not hesitate to contact our support team support@makebecool.com
If you want to collect more information on your product page, Shopify has a feature called Line Item Properties. Now such fields can be used for products in the bundle.
Custom data fields can only be used for bundles with their own product page.
Due to the compatibility of bundles with native Shopify functionality of properties fields, you can implement these fields for custom datain your store in two ways:
1. Using a third-party app designed to implement fields for custom product options.
2. By creating additional properties fields in the store theme manually:
This option may require some coding experience
How to create custom option field manually:
Generate property code
You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your product page. You can add as many custom form fields to your cart form as you need.
Moreover, this tool was created by Shopify to help simplify the process of adding custom user interface elements, such as form fields and icons, to Shopify themes.
Access Shopify UI Elements Generator
In the Set your form field section, select the type of form element that you want to use from the Type of form field drop-down menu.
If you want your theme to prevent customers from adding a product to the cart before they have filled in your form field, check 'Required'.
Fill-in your custom field
Copy the generated code from the box in the 'Grab your code' section by hitting to 'COPY TO CLIPBOARD':
To finish configuring new custom option fields, please follow these steps:
Find your product template
From Shopify Dashboard, navigate to your Theme editor:
In the 'Sections' directory, click choose any product template you want to add. In my case, it is default product-template.liquid
Add custom code
Find the code type=”submit” in the file (Hit Cmd+F or Ctrl+F on Windows). This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the form fields for your product customization.
You might need to use CSS code for best match with your design
If you require any help and advice from our team, do not hesitate to contact our support team support@makebecool.com
Updated on: 04/12/2023
Thank you!