Adding an extra field to select more options in Shopify within a product

Tiempo de lectura: 3 minutos

We will learn today how to add more options in Shopify to avoid the error of «you have exceeded 100 product combinations».

We will start by creating a custom metadata field.

To that we’ll go to Configuration > Metacampos and Metaobjects

NEXT we’ll create the new thing that will serve us to personalize our product attributes extra.

Vamos a Configuración de metacampo > productos

You will create a new one by clicking on Add Definition.

Now we are going to fill it up like this:

We add a name (this will appear on the screen). In my case, I am going to put Long leg, since I want to add the length of the pants.

Luego voy a editarr el metacampo llamandolo custom.leg_length

And I will now edit the metadata calling it custom.leg_length

And now I select a single-line text.

And I select a drop-down list of values.

Finally we ensure that it has activated: Access to the Storefront API

And now we can add it to our products.

Now let’s go to a product and download our Product Metacampos

Now we add the meta fields, in my case I add 3 (puts add article).

Finally and with added, we are going to add the code that will make magic.

We’re going to configure the theme and click on “Personalize > Products > Product Default (or the one we want)

Now we’re going to add a liquid custom with this content:

{% if product.metafields.custom.leg_length != blank %} <div class="product-form__input"> <label for="leg_length" id="leg_length" style="font-size: 1.2em; font-weight: bold; display:block; margin-bottom: 8px;"> Leg length </label> <select id="leg_length" name="properties[Leg length]" required style="font-size: 1.0em; padding: 10px 14px; width: 100%; max-width: 300px; border-radius: 6px; border: 1px solid #ccc;"> {% for option in product.metafields.custom.leg_length.value %} <option value="{{ option }}" {% if forloop.first %}selected{% endif %}> {{ option }} </option> {% endfor %} </select> </div> {% endif %}

We will only get this where we have products with these custom fields added.

This is it, now we need to send it along with the product.

To do that, we need to modify a theme file.

We select our theme and click on edit code.

We search for the script that handles products, in my case assets/product-info.js (using the Craft theme).

You add the following, at the end of the class and file:

 document.addEventListener('DOMContentLoaded', () => { const hiddenInput = document.getElementById('hidden-leg-length'); const visualSelector = document.getElementById('leg_length'); if (hiddenInput && visualSelector) { // if it's a  visualSelector.addEventListener('change', (e) => { //alert(e.target.value); hiddenInput.value = e.target.value; }); // if they are buttons visualSelector.querySelectorAll('button').forEach((btn) => { btn.addEventListener('click', () => { hiddenInput.value = btn.dataset.value; // optional: highlight the selected button visualSelector.querySelectorAll('button').forEach((b) => b.classList.remove('selected')); btn.classList.add('selected'); }); }); } });
You also have to add a hidden field that will collect this value and send it with the product form, in my case I have to go to the file snippets/buy-buttons.liquid and add inside <product-form this hidden form which will be filled with the script above.
 {% if product.metafields.custom.leg_length.value %}  {% endif %}

You get the following result:

And when sent to the cart: