Metafields - Preset choices, select multiple values

[tom_maavee]

Hi everyone!

I would like to pick the experts' brains regards metafields. We want to use Product metafields with pre-populated values.

The use case is that we will manage thousands of products linked to multiple categories. We want our product managers to be able to pick from a set list of values instead of typing in values into a free text box to avoid errors. 

I found that the Product metafield 'text' - 'Single line text' supports to add values via 'Limit to preset choices'  but this option only allows to select 1 value only. We need to select multiple values. 

Does anyone have recommendations how to best manage this case? I'd like to avoid using more 3rd party Apps but we are open for any suggestions. 

Thanks everyone!

Tom

[SaberStuff]

I'm curious myself, as I'm in the same boat as you where I want to select multiple metafield values, but I don't know how (it doesn't appear to let you).

Just watching this post to see if anyone knows....

[DutchMudMen]

Same question over here. 

[Wyatt_Jones]

I've got the same issue. Trying to use it automotive where a product may fit a 2018 and 2019... but how can I have it tied to both selections.

[nachoparty]

Once you click Add Item, it will create another field for you to add more choices. You can click on the right to remove a previous choice, and you can continue adding choices and it will add a drop-down selector in your Product Metafield options. You can save and return to add or remove choices later.

[NikolajDTAILS]

While adding multiple options to the meta fields setup is possible and quite intuitive - an option to select multiple values on a product level seems to be left out or missing. This means you can’t have a shirt that is red and blue, both show up in filtering for blue and/or red and have both filter options show that same product. There are tons of use cases for this scenario and quite honestly, no reason not to have that option available. Ie. When you create multiple values, a simple “allow multiple” checkbox would so.

[nachoparty]

I see - those looking to add multiple and then also select multiple. Basically similar functionality to tagging. 

[_SMETS]

I'm also looking for a solution to add multiple options with pre-set values. I hope this is possible soon. 

[soymarketing]

Looking for the same functionality here... This could previously be achieved using tags, but for some reason, tags are not available to use for "storefront filtering" (or at least I have not found a way to do so).

Please Shopify, we need the option to select multiple values!

[DylanUurainen]

I am looking for this functionality as well. @Shopify  A much needed feature for Storefront filtering.

[DylanUurainen]

Hi everyone, I came up with a solution for this issue today that involves some additional liquid and custom Javascript. While this code will not be a copy paste fix for you, I hope it gives you an idea of how to add this functionality to your theme.

While looping through your collection filters, on "list" type filters, you can add something like this:

<div id="{{ filter_group.label | handleize }}" class="filter-collapse collapse show" aria-labelledby="{{ filter_group.label | handleize }}-heading">
                <div class="filter-body">
                  {% if filter_group.label == 'Origin' %}
                    <div class="mock-filters">
                      {% assign mockFilterProperties = '' %}
                      {% for filter in filter_group.values %}
                        {% capture mockFilterProperties %}{{mockFilterProperties}}{{filter.value}}, {% endcapture %}
                      {% endfor %}
                      {% assign mockFilterProperties = mockFilterProperties | split: ', ' | uniq | sort %}
                      {% for filter in mockFilterProperties %}
                        <div class="form-group form-check order-{{ order }}">
                          <input name="{{ filter_group.label | handleize }}"
                            value="{{ filter }}"
                            id="Mock-Filter-{{ filter }}"
                            class="form-check-input mock-filter"
                            type="checkbox"
                          >
                          <label for="Mock-Filter-{{ filter }}" class="form-check-label">{{ filter }}</label>
                        </div>
                      {% endfor %}
                    </div>
                  {% endif %}
                  <div class="filters">
                    {% for filter in filter_group.values %}
                      <div class="form-group form-check">
                        <input name="{{ filter.param_name }}"
                          value="{{ filter.value }}"
                          id="Filter-{{ filter.param_name }}-{{ filter.label }}"
                          class="form-check-input"
                          type="checkbox"
                          {% if filter.active %}checked{% endif %}
                        >
                        <label for="Filter-{{ filter.param_name }}-{{ filter.label }}" class="form-check-label">{{ filter.label }}</label>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>

The code above with create a set of filter checkboxes that look at the metafield values, and break them up into individual values (separated by comma). 

Next you'll need some JS to tie the mock checkboxes to the real checkboxes. Here is a function to do that (Vanilla JS): 

function checkMockFilters () {
    var originFilterContainer = document.getElementById('origin');
    if (originFilterContainer) {
      var originMockFilters = originFilterContainer.querySelectorAll('.mock-filters input');
      var originFilters = originFilterContainer.querySelectorAll('.filters input');
      var activeOriginFilters = [];

      for (i = 0; i < originMockFilters.length; ++i) {
        if (originMockFilters[i].checked == true) {
          activeOriginFilters.push(originMockFilters[i].value);
        }
      }
      
      for (i = 0; i < originFilters.length; ++i) { // Uncheck all filters
        originFilters[i].checked = false;
      }

      for (i = 0; i < originFilters.length; ++i) { // Loop through mock filters, check all filters that contain the mock filter values
        for (ii = 0; ii < activeOriginFilters.length; ++ii) {
          if (originFilters[i].value.includes(activeOriginFilters[ii])) {
            originFilters[i].checked = true;
          }
        }
      }
    }
  }

The last part with be to add some CSS to hide the default checkboxes and show the mock checkboxes.

.mock-filters + .filters {
  display: none;
}

Hope this helps out some of you. Advanced knowledge of Liquid and Javascript will be required for this to work and modification will be required so it works in your specific theme. You can take it further than I did to make it more flexible, but I only needed this functionality for a single filter parameter called Origin. 

Available for hire if anyone needs further help.

Cheers!

[dimawebstaff]

This might help: https://shopify.dev/apps/metafields/types#list-types

[illyilly]

It looks like Shopify has recently solved this problem in their April 6th changelog by allowing to create multiple values for the single line text field.

Changelog summary here: https://changelog.shopify.com/posts/metafield-improvements-metafield-lists

Update definition in Shopify Help Center: https://help.shopify.com/en/manual/metafields/metafield-definitions/metafield-types#metafield-lists 

This should work out of the box for all 2.0 themes.

[soymarketing]

Nice! The only problem for me now is that it uses "OR" instead of "AND" for filtering when selecting multiple options, so I cannot use it to narrow down my options which was the intended purpose. We have a large inventory and was looking to create filters so that people could find for example, all the products that are "Organic" + "Vegan". With this setup, when a user clicks those 3 filters it will display, for example, Organic Turkey Bacon, which is clearly not vegan.

Another issue is the difficulty to deal with a large product catalog, as there is no way to edit in bulk 😕

[KuznetsEnvy]

Is there a way to edit product metafield lists in bulk? 
When the product metafield has the type "Single line" and "Accepts multiple values" – if values are not empty – they are shown in bulk editor as ["Value 1","Value 2"].
Also if they're not empty – bulk editor  accepts values in this JSON format and overwrites them successfully. 

But if those values are not specified, bulk editor doesn't accept a JSON string: it says "1 Invalid value found. Update the invalid value, then save again".

Is there a way to initialize values for metafield lists in bulk, without loading every single product edit page and specifying the first value in the list manually?

[aliaz-]

Hi,

Im 100% sure what you want to do but I’m quite sure that hextom bulk edit app will work for that.

[april-sg]

Did they take away this "Accepts multiple values" option on single-line product metafields?!  I am trying to figure out how to select/add multiple values on my admin product page, but I don't see a checkbox under the metafield properties page (when adding the metafield) to allow multiple values.

[dappernotes]

When setting up your Single Line Text metafield, make sure you use the "List of values" option. 

Then when you're attaching values to it by a customer or product or wherever your single line text metafield is being used, you'll see either a select dropdown (if you have it set to "Limit to preset choices") or a text input box.

And right under the dropdown or text input you'll now see an "Add item" button for attaching more values.

Hope this helps!

[artorijin]

Thank you. This method worked for me. I appreciate your post.

[Khushkar]

Hi, I was facing same problem like I want to show one product in multiple filter
In my store I have to add one product in more then one Occasion like product can wear in Diwali and Navratri also.

You have to select list option 

I want to thanks link :  https://www.youtube.com/watch?v=E_H1z5wa9og&t=129s

[Drewottawa]

Same here.

For example for all of a certain product category, I want to include the exact same information for blacks of hundreds of products and variants about, say custom ordering, the properties and materials used in the work, etc.  I may have hundreds of products sharing these values and I don't want to fill it in for each value.  I just want to select pre-formatted and prepared text from a drop-down for each of these fields.  It could be many paragraphs long even!