Se já passou algum tempo a trabalhar com a Shopify, provavelmente já teve aquele momento em que queria que uma página de produto (Template) tivesse um aspeto completamente diferente das restantes. Talvez esteja a lançar uma "Promoção Relâmpago" e queira um banner vermelho impactante a chamar a atenção no topo da página. Ou talvez tenha uma secção de "Venda por grosso" e queira que ela seja minimalista — apenas o essencial, sem distrações.

Antigamente, usávamos o product.template_suffix para conseguir isto. Ainda funciona, mas a Shopify evoluiu. Agora, é no objeto template que a magia acontece.

Vamos explorar como pode usar o template.suffix para transformar completamente o aspeto da sua loja para produtos específicos, sem alterar todo o layout.

Primeiro, o que é afinal um "sufixo" de template? Sempre que cria um novo template na Shopify (como `product.premium-product.liquid`), a parte depois do ponto — premium-product — é o seu sufixo.

Esta pequena etiqueta diz à Shopify: “Ei, se alguém estiver a ver esta versão especial de uma página de produto, aplica-lhe estes estilos personalizados.”

Veja como fazíamos antigamente:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}

Funciona, mas torna-se rapidamente confuso. Hoje em dia, utiliza o objeto global template, que é muito mais flexível:

- {{ template.name }} fornece-lhe o tipo base (como 'product').
- {{ template.suffix }} fornece-lhe a parte personalizada (como 'wholesale').
- {{ template.directory }} ajuda-o a manter-se organizado se tiver subpastas.

Vamos falar sobre como pode realmente usar isto para estilização.

A base de tudo é a humilde if statement ou um case switch. Permitem-lhe alternar entre classes HTML ou CSS consoante o template que está a ser carregado.

Imagine que tem uma página de destino especial para o seu suplemento de Berberina e quer que o título se destaque, talvez para fins de rastreio ou apenas para mostrar algum estilo.

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

Se atribuir o seu produto ao template "premium-product", voilà — classe especial. Todo o resto mantém o estilo normal. Não precisa de sobrecarregar o seu CSS com uma série de anulações.

Se a sua loja tiver mais do que dois ou três tipos de páginas especiais — Premium, Promoção, Venda por grosso, o que for — as  if statements acumulam-se rapidamente. É aí que uma case tag mantém tudo organizado:

{% 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 %}

Lê-se como um menu. A Shopify verifica o sufixo e apresenta a versão certa.

Aqui fica uma boa dica: coloque o nome do template diretamente na sua etiqueta <body> no theme.liquid. Depois, pode direcionar o seu CSS para um template específico, sem ter de fazer edições Liquid sempre que quiser um novo estilo.

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

Assim, a Shopify gera algo como <body class="template-product-wholesale">. Agora, o seu CSS pode simplesmente aplicar-se a .template-product-wholesale h1 { color: blue; } e está feito.

Porque passar por tudo isto em vez de usar simplesmente um construtor de páginas? Bem, os construtores de páginas podem parecer simples, mas geralmente tornam o seu site mais lento. Algumas linhas de Liquid são:

- Mais rápidas. Sem JavaScript adicional a atrasar o carregamento.
- Mais limpas. O seu SEO mantém-se otimizado. Sem sobreposições confusas.
- Escaláveis. Configure uma vez e todos os produtos que atribuir a esse template funcionarão automaticamente.

Aqui fica um cenário real: tem um template de venda por grosso e quer ocultar a opção "Embalagem para presente". Use o sufixo para controlar o que é exibido:

{% if template.suffix == 'wholesale' %}
  <p>Preços por grosso aplicados: apenas envios em grandes quantidades.</p>
{% elsif template.suffix == 'gift' %}
  <p>Este produto inclui uma caixa de oferta gratuita!</p>
{% else %}
  <p>Aplicam-se as taxas de envio padrão.</p>
{% endif %}

Em suma: dominar o template.suffix abre um mundo de possibilidades de personalização para a sua loja. Poderá lançar promoções especiais, adaptar experiências para diferentes clientes e manter tudo rápido e organizado — sem necessidade de aplicações dispendiosas.

Portanto, da próxima vez que lançar uma promoção ou uma nova coleção, não se limite a aceitar o aspeto predefinido. Crie um sufixo e dê às suas páginas um toque especial. Os seus clientes vão notar.