How to add custom input fields to specific products using metafields in Origin theme?
I’ve create the metafields, but I don’t know how to display the text fields into the product page?
I need to be able to choose which products to display the input fields into.
Also some input fields should not be displayed in some products.
For example:
Product one: Take the name and date from the user
Product two: only takes the name
Product three: no input from the user
tim_1
April 19, 2024, 6:05pm
2
You’d need to use the “Custom liquid” block in “Product information” section.
Not sure how your metafield is defined and how many option you want but here is the general idea:
{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% case product.metafields.namespace.key %}
{% when 'name-only" %}
{% when 'name-and-date' %}
...
{% endcase %}
You may use Shopify UI Elements generator to generate the HTML code, however you would need to add form=“{{ product_form_id }}” attribute to each input/select/textarea otherwise your input would not make it to the cart.
Thank you for your reply here are the metafields
Thank you for your reply,
Yes this is what I am looking to, adding Custom Liquid to the product template, Here are the definitions
tim_1
April 19, 2024, 6:54pm
5
I’d probably re-define them as Boolean and call them needsName and needsDate – you’d only need to check a checkbox when creating your products.
Then the code will be like
{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
{% endif %}
{% if product.metafields.custom.needsDate.value %}
{% endif %}
This result will look like this:
2 Likes
Thank you very much,
I’ve pasted the code exactly as yours, but it didn’t work. The fields are not showing.
tim_1
April 20, 2024, 8:39am
7
Have you re-defined the metafields with type boolean and names matching the code? Have you checked the metafield values for those products?
Yes, I’ve redefined the metafields,
and changed the values as needed for the product, but nothing appears in the product page.
tim_1
April 21, 2024, 4:19pm
9
Pay attention – metafield ‘Name’ is not the same as ‘key’ – we use ‘key’ in code. And it is case-sensitive.
Just re-did everything in my test shop:
Thank you very much for your effort.
The fields appear on the product page, but when I add to the cart, they will not appear there?
tim_1
April 22, 2024, 5:51am
11
Ok, it’s probably time for you to share a link to your site (preview link if not published/storefront password if not live).
In my test environment it works fine as shown on screenshots.
There is a small typo in my code (does not really break anything) so here is the updated version for perfectionists:
{%- assign product_form_id = 'product-form-' | append: section.id -%}
{% if product.metafields.custom.needsName.value %}
{% endif %}
{% if product.metafields.custom.needsDate.value %}
{% endif %}
1 Like
Thank you very much,
I’ve accepted your answer as solution,
The problem was that an app for customization was already installed, when i uninstalled it the metafields I created appeared in the cart.
1 Like