Adding custom fields to specific products using metafields in Origin theme

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

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

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.

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.

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?

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