Personalizaciones Avanzadas en Shopify Online Store 2.0 Usando Solo Liquid

Condicionales con etiquetas de cliente ( customer.tags )

Una forma potente de personalizar una tienda Shopify es mostrar u ocultar contenido según el tipo de cliente. Shopify permite asignar etiquetas a cada cliente (por ejemplo, VIP, mayorista, distribuidor, etc.) desde el panel de administración. Con Liquid, podemos usar estas etiquetas mediante customer.tags para condicionar qué contenido ve cada usuario.

En este fragmento de código, el bloque <div> con el mensaje de bienvenida solo se renderiza si el objeto customer existe (es decir, si alguien ha iniciado sesión) y si entre las etiquetas de ese cliente ( customer.tags) se encuentra 'mayorista'. Para clientes sin esa etiqueta o visitantes no autenticados, este bloque no aparece en absoluto.

Cómo funciona: customer.tags devuelve una cadena con todas las etiquetas asignadas al cliente. Usando Liquid, comprobamos con contains si esa cadena incluye la etiqueta deseada. Es recomendable incluir la verificación customer al inicio de la condición para evitar evaluar etiquetas cuando no hay ningún usuario autenticado.

Otro escenario común de personalización es restringir información sensible solo a clientes registrados. Un ejemplo típico en tiendas B2B es ocultar los precios de los productos a usuarios anónimos, mostrando los precios únicamente cuando el cliente ha iniciado sesión. Con Liquid podemos lograr esto fácilmente comprobando si existe un objeto customer (lo que indica que hay sesión iniciada).

En este código, usamos {% if customer %} para verificar si hay un cliente autenticado. Si es así, dentro del <span> mostramos el precio del producto usando la variable product.price formateada con el filtro money. Si no hay cliente (es decir, customer es nil), entramos en el {% else %} y en lugar del precio mostramos un mensaje de aviso.

Dónde implementarlo: Puedes envolver la sección de precio en esta condicional dentro de la plantilla de producto ( product.liquid en un tema Vintage o la sección principal de producto en Online Store 2.0) o incluso en la plantilla de la cuadrícula de productos para colecciones. De este modo, en toda la tienda los precios solo serán visibles para usuarios registrados.

Personalización adicional: Este mismo patrón if customer/else se puede usar para cualquier elemento que quieras mostrar únicamente a usuarios logueados. Por ejemplo, un botón de "Añadir al carrito" que solo aparezca tras iniciar sesión, o un bloque de contenido premium visible tras autenticarte. Con Liquid, tienes control total sobre qué ven o no ven los visitantes anónimos versus los clientes con cuenta.

1. Definir el snippet: En el editor de código de tu tema, crea un nuevo archivo en la carpeta Snippets. Por ejemplo, podríamos crear promobar.liquid para un banner promocional reutilizable.

2. Agregar contenido al snippet: Escribe el código Liquid/HTML que conformará ese bloque. Por ejemplo, nuestro snippet promobar.liquid podría contener un mensaje de envío gratuito:

3. Incluir el snippet en plantillas: Donde quieras que aparezca este bloque, usa la etiqueta Liquid {% render 'promobar' %} para renderizar el snippet. Por ejemplo, podrías insertarlo en la plantilla de producto justo debajo del título, y también en la página de inicio. Cada vez que uses {% render %}, el contenido del snippet se inserta allí.

Una vez configurado, si necesitas actualizar el mensaje promocional, solo tienes que editar promobar.liquid una vez, y el cambio se reflejará en todos los lugares donde esté incluido. Esto es especialmente útil para bloques de información avanzada que podrían aparecer en varias páginas: políticas especiales, advertencias de producto, tablas de medidas, beneficios de un programa de fidelidad, etc.

Ejemplo práctico: Supongamos que deseas destacar en cada página de producto si ese producto tiene envío gratuito o alguna garantía especial. En lugar de escribir ese HTML en cada plantilla, puedes crear un snippet info-garantia.liquid con el contenido estructurado (iconos, texto de garantía, etc.) y luego incluirlo con {% render 'info-garantia' %} en la sección de descripción de producto. Así, cualquier ajuste en la presentación de la garantía se hace en un solo lugar.

Consejo: En Shopify Online Store 2.0, la etiqueta recomendada para estos fragmentos es {% render 'snippet-name' %} en lugar de {% include %} (que se usaba en versiones antiguas). render crea un ámbito propio de variables y evita efectos secundarios, lo que lo hace más seguro y predecible. Aprovecha los snippets para mantener tu código limpio y DRY (Don't Repeat Yourself).

Otra estrategia de personalización avanzada es condicionar el contenido en base a las propiedades del producto o la colección que se está visualizando. Shopify Liquid expone muchos atributos útiles, como el tipo de producto product.type, el proveedor o marca product.vendor, las colecciones a las que pertenece un producto product.collections, o en una página de colección, el identificador de esa colección collection.handle, entre otros. Con simples condicionales podemos aprovechar estos datos para mostrar información relevante en contexto.

En este ejemplo, verificamos product.type. Si el tipo coincide exactamente con la cadena "Zapatos", se muestra un cuadro con una guía de tallas. Para productos de otros tipos, ese bloque no se mostrará. Esto permite adaptar la información en la página según la categoría de producto, ofreciendo detalles relevantes solo donde aplican.

Por proveedor (vendor): Similar al caso anterior, puede que quieras personalizar contenido según la marca o proveedor del producto. Supongamos que la marca Nike ofrece una garantía extendida, y quieres resaltarlo en la página de cualquier producto cuyo product.vendor sea "Nike". Podrías añadir:

Aquí comprobamos la propiedad product.vendor. Si el proveedor del producto es exactamente "Nike", se inyecta una nota informativa sobre la garantía. Para otras marcas, el snippet no aparece. Puedes aplicar esto a cualquier vendor que necesites: por ejemplo, mostrar un logo especial, un mensaje de "Producto oficial de [Marca]", o instrucciones específicas del fabricante.

Por colección: También podemos condicionar el contenido en las páginas de colección en sí, utilizando la variable collection. Por ejemplo, supongamos que tienes una colección de ofertas cuyo handle (identificador) es "ofertas". Podrías querer mostrar un banner especial solo en esa colección:

En este fragmento, utilizamos collection.handle para verificar que la colección actual es "ofertas". También incluimos template.name == 'collection' para asegurarnos de que este código solo se evalúe en la plantilla de colección (y evitar conflictos si, por ejemplo, en la página de producto existe alguna variable de colección en contexto). El resultado es que solo en la URL de esa colección de ofertas se mostrará el banner promocional destacado.

Combinar condiciones: Puedes ser creativo y combinar múltiples condiciones según tus necesidades. Por ejemplo, usar elsif para establecer prioridades: primero checar tipo de producto, luego vendor, etc. Sin embargo, muchas veces es más claro mantener condiciones separadas para cada caso, como en los ejemplos anteriores, para facilitar la lectura y mantenimiento del código.

Ejemplo: Supongamos que deseas agregar un bloque de "Información adicional" en la página de producto, donde el contenido de ese bloque varía según el producto. Primero, crearías un metacampo para productos, por ejemplo con namespace custom y clave info_adicional (podría ser un campo de texto largo donde ingresas información HTML o texto enriquecido para cada producto). Luego, en la plantilla de producto (o sección correspondiente) incorporas algo como lo siguiente:

Aquí usamos product.metafields.custom.info_adicional para acceder al metacampo. La condición != blank verifica que el metacampo tenga algún valor definido para ese producto (es decir, que no esté vacío). Si tiene contenido, el tema renderiza un <div> con un título "Información adicional" y luego inserta el valor del metacampo mediante {{ }}. Así, cada producto puede mostrar un texto diferente en ese espacio, según lo que se haya guardado en su metacampo en el administrador.

Detalles técnicos: Los metacampos pueden ser de distintos tipos (texto, número, URL, archivo, referencia, etc.). En el ejemplo asumimos un texto enriquecido que se mostrará tal cual. Si fuera un metacampo de tipo imagen o archivo, podrías acceder a propiedades como product.metafields.custom.manual.url (si hubieras guardado, por ejemplo, un PDF de manual de usuario). La interfaz de Shopify 2.0 incluso permite enlazar estos metacampos a secciones sin tocar código, pero al usarlos directamente en Liquid tienes total control sobre la presentación.

Personalización de páginas de producto con plantillas alternativas ( template.suffix )

En Liquid, podemos identificar qué plantilla está siendo usada mediante el objeto template. En particular, template.suffix nos da el nombre del sufijo de la plantilla actual, si es que hay uno (si estás en la plantilla por defecto, el sufijo estará vacío o nil). Esto nos permite escribir código dentro de secciones o snippets que solo se ejecute para ciertas plantillas.

Ejemplo de uso: Supongamos que has creado una plantilla alternativa de producto llamada "producto.mayorista" (en términos de archivos, sería product.mayorista.json en la carpeta Templates de tu tema, asociada quizás a una sección principal de producto específica). Has asignado esta plantilla a algunos productos destinados a venta mayorista. Dentro de la sección de producto (por ejemplo, en main-product.liquid o similar en la carpeta Sections), puedes aprovechar template.suffix para introducir variaciones:

En este fragmento, estamos comprobando si el sufijo de la plantilla actual es "mayorista". Si es así, se muestra un bloque de alerta específico para esos productos especiales (quizás indicando alguna condición de venta al por mayor, como en el ejemplo). Si la página de producto se está renderizando con la plantilla estándar, template.suffix estará vacío o diferente, y por tanto ese bloque no se incluirá.

Cómo crear y asignar plantillas alternas: Para dar un poco más de contexto, crear una plantilla alternativa en Online Store 2.0 es tan sencillo como duplicar una plantilla existente. En la carpeta Templates puedes crear, por ejemplo, product.mayorista.json que cargue las secciones que desees. Luego, en el admin de Shopify, al editar un producto, puedes seleccionar "producto.mayorista" como plantilla. Automáticamente, ese producto usará la nueva disposición. Con la comprobación de template.suffix dentro de las secciones, pudiste agregar comportamientos especiales sin tener que crear secciones totalmente nuevas para cada caso, manteniendo el código más centralizado.

Ventaja: Esta técnica permite controlar variaciones de diseño o contenido de forma escalable. Si mañana necesitas otra plantilla para, digamos, "producto-digital" (productos digitales con diferente info), puedes crear product.digital.json, asignarla a ciertos productos, y en el código usar {% if template.suffix == 'digital' %} ... {% endif %} para manejar diferencias. Todo sin apps ni trucos externos, simplemente aprovechando la flexibilidad nativa de Liquid y Online Store 2.0.

Qué hace este código: Verifica primero que haya un customer logueado y que este tenga la etiqueta 'distribuidor' entre sus tags. Solo en ese caso renderiza el bloque <div class="distributor-block"> con un título, un texto descriptivo y un enlace de descarga. Puedes personalizar el contenido: en el ejemplo asumimos un PDF con la lista de precios mayoristas, pero podría ser un enlace a una página oculta, un formulario especial, imágenes de marketing, etc.

Mejorando la gestión: Puedes llevar esta idea un paso más allá combinándola con las plantillas alternativas. Por ejemplo, podrías crear un snippet llamado bloque-distribuidor.liquid con ese contenido, e incluirlo solo en la plantilla de producto asignada a distribuidores (usando {% render 'bloque-distribuidor' %} dentro de un {% if template.suffix == 'mayorista' %}, por ejemplo). Así mantienes el código de distribuidores aislado. Pero incluso sin usar una plantilla separada, la condición con customer.tags es suficiente para filtrar la audiencia.