Añadir un campo extra para seleccionar más opciones en Shopify dentro de un producto

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo añadir más opciones en Shopify para evitar el error de «has superado el máximo de 100 combinaciones de producto».

Lo primero que haremos es crear un campo metadato personalizado.

Para eso vamos a Configuración > Metacampos y metaobjetos

Ahora vamos a crear el nuevo qué nos servirá para personalizar nuestros atributos de producto extra.

Vamos a Definidicones de metacampo > productos

Y aquí creamos uno nuevo pulsando en Agregar definición.

Ahora vamos a rellenarla de la siguiente forma:

Añadimos un nombre (este saldrá en la pantalla). En mi caso voy a poner Largo de pierna, ya que quiero añadir el largo de los pantalones.

Luego voy a editarr el metacampo llamandolo custom.leg_length

Y ahora en tipo elijo texto de una sola línea.

Y Lista de valores.

Finalmente nos aseguramos de que tiene activado: Acceso a la API Storefront

Y ya podemos añadirlo en nuestros productos.

Ahora vamos a un producto y bajamos a Metacampos de producto

Ahora añadimos los metacampos, en mi caso añado 3 (pone añadir artículo).

Finalmente y ya añadidos, vamos a añadir el código que hará la magia.

Vamos a configuración del tema y pulsamos en personalizar > Productos > Producto predeterminado (o la que queramos)

Ahora vamos a añadir un liquid personalizado con este contenido:

{% 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;">
      Largo de pierna
    </label>
    <select id="leg_length" name="properties[Largo de pierna]" 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 %}

Con esto solo nos saldrá dónde tengamos productos con estos metacampos añadidos.

Vale y ahora nos falta poder enviarlo junto con el producto.

Para ello tendremos que modificar un archivo del tema.

Elegimos nuestro tema y pulsamos en editar código.

Y dentro buscamos el script que se encarga de los productos, en mi caso assets/product-info.js (uso el tema Craft)

Y añadimos lo siguiente, al final de la class y del archivo:

document.addEventListener('DOMContentLoaded', () => {
  const hiddenInput = document.getElementById('hidden-leg-length');
  const visualSelector = document.getElementById('leg_length');

  if (hiddenInput && visualSelector) {
    // si es un <select>
    visualSelector.addEventListener('change', (e) => {
      //alert(e.target.value);
      hiddenInput.value = e.target.value;
    });

    // si son botones
    visualSelector.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        hiddenInput.value = btn.dataset.value;
        // opcional: marcar como seleccionado visualmente
        visualSelector.querySelectorAll('button').forEach((b) => b.classList.remove('selected'));
        btn.classList.add('selected');
      });
    });
  }
});

Y también tenemos que añadir un campo hidden que se encargará de recoger este valor y enviarlo con el form de producto, en mi caso tengo que ir al archivo snippets/buy-buttons.liquid y añadir dentro de <product-form este form oculto qué se rellenará con el script anterior.

 {% if product.metafields.custom.leg_length.value %}
    <input type="hidden" name="properties[Largo de pierna]" id="hidden-leg-length">
 {% endif %}

Y finalmente este es el resultado:

Y al enviar al carrito: