Metafields - Preset choices, select multiple values

Metafields - Preset choices, select multiple values

tom_maavee
Visitor
1 0 9

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

Replies 20 (20)

SaberStuff
Tourist
11 0 13

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
Tourist
8 0 5

Same question over here. 

Wyatt_Jones
Visitor
3 0 0

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
Tourist
6 0 22

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
Shopify Partner
4 0 3

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
Tourist
6 0 22

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

_SMETS
Shopify Partner
20 0 23

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

soymarketing
Shopify Partner
11 0 16

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
Excursionist
11 1 19

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

Co-owner and Lead Developer
Digital Mammoth - digitalmammoth.ca

DylanUurainen
Excursionist
11 1 19

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!

Co-owner and Lead Developer
Digital Mammoth - digitalmammoth.ca

dimawebstaff
Shopify Partner
1 0 1

illyilly
Tourist
6 0 4

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
Shopify Partner
11 0 16

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
Shopify Partner
38 0 11

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?

 

Screenshot-2022-05-02-at-14.33.13.jpg

 

 

aliaz-
Excursionist
24 2 7

Hi,

 

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

The pessimist sees only the tunnel; the optimist sees the light at the end of the tunnel; the realist sees the tunnel and the light - and the next tunnel.
april-sg
Visitor
1 0 0

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
Tourist
8 0 10

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

 

list of values.png

 

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.

 

multiple options.png

 

Hope this helps!

artorijin
Visitor
1 0 0

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

Khushkar
Visitor
2 0 0

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 

Khushkar_0-1676618453170.png

Khushkar_1-1676618512552.png

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

Drewottawa
Tourist
3 0 1

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!