Si has pasado algo de tiempo construyendo en Shopify, probablemente te hayas encontrado con un momento en el que quieres que una página de producto (Plantilla) no se parezca en nada a las demás. Quizás estés lanzando una "Oferta relámpago" y quieras un banner rojo llamativo gritando en la parte superior de la página. O tienes una sección de "Venta al por mayor" y quieres que esté simplificada: solo lo esencial, sin adornos.

Antiguamente, recurríamos a product.template_suffix para lograrlo. Todavía funciona, pero Shopify ha avanzado. Ahora, el objeto template es donde ocurre la magia.

Exploremos cómo puedes usar template.suffix para transformar por completo el aspecto de tu tienda para productos específicos, sin arruinar todo tu diseño.

En primer lugar, ¿qué es en realidad un "sufijo" de plantilla? Cada vez que creas una nueva plantilla en Shopify (como `product.premium-product.liquid`), la parte después del punto—premium-product—es tu sufijo.

Esta pequeña etiqueta le dice a Shopify: “Oye, si alguien está viendo esta versión especial de una página de producto, aplícale estos estilos personalizados.”

Así es como solíamos hacerlo:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Funciona, pero se vuelve engorroso rápidamente. Hoy en día, usas el objeto global template, que es mucho más flexible:

- {{ template.name }} te da el tipo base (como 'product').
- {{ template.suffix }} te entrega tu parte personalizada (como 'wholesale').
- {{ template.directory }} te ayuda a mantenerte organizado si tienes subcarpetas.

Hablemos de cómo usar esto realmente para el estilo.

La base aquí es la humilde declaración if o un case switch. Te permiten cambiar clases HTML o CSS dependiendo de qué plantilla esté cargada.

Imagina que tienes una página de destino especial para tu suplemento de Berberina y quieres que el título destaque, tal vez para seguimiento o simplemente para lucirte un poco.

{% if template.suffix == 'premium-product' %}
  
{{ product.title }}</h1>
{% else %}
  
{{ product.title }}</h1>
{% endif %}

Si asignas tu producto a la plantilla "premium-product", ¡bum!—clase especial. Todo lo demás mantiene el estilo regular. No es necesario sobrecargar tu CSS con un montón de anulaciones.

Si tu tienda tiene más de un par de páginas especiales—Premium, Oferta, Venta al por mayor, lo que sea—tus declaraciones  if se acumulan rápidamente. Ahí es donde una etiqueta case mantiene las cosas sanas:

{% case template.suffix %}
  {% when 'premium' %}
    <h1 style="color: gold;">{{ product.title }}</h1>
  {% when 'sale' %}
    <h1 style="color: red;">{{ product.title }}</h1>
  {% else %}
    <h1>{{ product.title }}</h1>
{% endcase %}

Se lee como un menú. Shopify comprueba el sufijo y sirve el sabor correcto.

Aquí hay un buen truco: pega el nombre de la plantilla directamente en tu etiqueta <body> en theme.liquid. Luego puedes dirigir tu CSS a una plantilla específica, no más ediciones de Liquid cada vez que quieras un nuevo estilo.

<body class="template-{{ template.name }}{% if template.suffix %}-{{ template.suffix }}{% endif %}">

Así que Shopify escupe algo como <body class="template-product-wholesale">. Ahora tu CSS puede simplemente golpear .template-product-wholesale h1 { color: blue; } y listo.

¿Por qué pasar por todo esto en lugar de simplemente usar un constructor de páginas? Bueno, los constructores de páginas pueden parecer simples, pero generalmente ralentizan tu sitio. Unas pocas líneas de Liquid son:

- Más rápido. Sin JavaScript adicional que arrastre las cosas.
- Más limpio. Tu SEO se mantiene afilado. Sin superposiciones desordenadas.
- Escalable. Configúralo una vez y cada producto que asignes a esa plantilla simplemente funciona.

Aquí hay un escenario de la vida real: tienes una plantilla de venta al por mayor, y quieres ocultar la opción de "Envoltorio para regalo". Usa el sufijo para controlar lo que se muestra:

{% if template.suffix == 'wholesale' %}
  <p>Precios al por mayor aplicados: Solo envío a granel.</p>
{% elsif template.suffix == 'gift' %}
  <p>¡Este producto incluye una caja de regalo de cortesía!</p>
{% else %}
  <p>Se aplican tarifas de envío estándar.</p>
{% endif %}

En resumen: familiarizarte con template.suffix abre un mundo de personalización para tu tienda. Podrás lanzar promociones especiales, adaptar experiencias para diferentes clientes, y mantener todo rápido y ordenado—sin necesidad de aplicaciones costosas.

Así que la próxima vez que estés lanzando una promoción o una nueva colección, no aceptes simplemente el aspecto predeterminado. Crea un sufijo y dale a tus páginas ese toque extra. Tus clientes lo notarán.