Entrar
Documentação

Sistema de temas

Visão geral

Como os temas funcionam e qual nível de personalização usar.

Existem três formas de mudar a aparência da loja. Comece pela mais simples que resolve o seu caso.

Nível Onde Quando usar
Customização Customizar Trocar cores, adicionar CSS e JavaScript em todo o site, barras de aviso e efeito de neve.
Páginas Editor HTML Criar uma página solta, como uma landing page.
Temas Templates Redesenhar a vitrine inteira em Liquid.

O que é um tema#

Um tema é uma pasta de arquivos. A vitrine combina esses arquivos com os dados da loja a cada visita.

Texto
routes/routes.json            rotas: URL para arquivo em pages/
layouts/theme.liquid          cabeçalho, rodapé e {% block content %}
snippets/product-card.liquid  card de produto
pages/index.liquid            home
pages/product.liquid          /product/:id e /product/:id/:variant
pages/category.liquid         /category/:id
pages/categories.liquid       /categories
pages/terms.liquid            /terms
assets/theme.css              estilos do tema
assets/theme.js               scripts do tema

Todo tema novo já nasce com esses arquivos, funcionando. É o melhor ponto de partida para aprender.

Todo .css do tema é juntado em um só arquivo, e o mesmo vale para os .js, sempre em ordem de caminho.

Rotas#

O arquivo routes/routes.json liga cada URL a um arquivo em pages/:

routes/routes.json
{
  "/": "pages/index.liquid",
  "/product/:id/:variant": "pages/product.liquid",
  "/product/:id": "pages/product.liquid",
  "/category/:id": "pages/category.liquid",
  "/categories": "pages/categories.liquid",
  "/terms": "pages/terms.liquid",
  "/sobre": "pages/sobre.liquid"
}
  • Um trecho com : é um parâmetro, lido em route.params. Em /category/:id, use route.params.id.
  • Rota sem parâmetro vence rota com parâmetro: /product/novo ganha de /product/:id.
  • As variáveis de product só existem nas rotas que começam com /product/ e têm :id.

Exemplo mínimo#

Uma página própria usa o layout, define o título e preenche o bloco de conteúdo:

pages/sobre.liquid
{% layout 'layouts/theme' %}
{% assign page_title = "Sobre a loja" %}
{% block content %}
  <section class="section container">
    <h1>Sobre {{ store.name }}</h1>
    {% if store.description %}<p>{{ store.description }}</p>{% endif %}
    <p>Temos {{ catalog.products.size }} produtos no ar.</p>
  </section>
{% endblock %}

Fluxo de trabalho#

  1. Crie um tema#

    Em Templates, na Biblioteca de temas, crie um tema novo. Ele fica fora do ar até ser publicado.

  2. Edite#

    Use o editor do painel ou trabalhe no seu computador com o editor local.

  3. Corrija os problemas#

    Em tema não publicado, salvar sempre grava e mostra os problemas como aviso.

  4. Publique#

    Publicar troca o tema no ar. Só um tema fica publicado por vez, e o anterior continua guardado na biblioteca.

Paleta de cores#

A paleta de Customizar chega ao tema como variáveis CSS. Use-as nos seus estilos para o tema acompanhar as cores da loja:

assets/theme.css
.card {
  background: var(--color-container);
  border: 1px solid var(--border-border);
  color: var(--text-paragraph);
}
Grupo Variáveis
Cores --color-container, --color-primary, --color-background, --color-sub, --color-reverse, --color-green, --color-blue, --color-yellow, --color-red, --color-pink
Texto --text-title, --text-paragraph, --text-reverse
Bordas --border-border, --border-focus
Botão --button-color, --button-text, --button-text-reverse

Limites#

Item Limite
Extensões aceitas .liquid, .json, .css, .js, .svg, .txt
Tamanho de um arquivo 256 KB
Arquivos por tema 300
Tamanho do tema 5 MB
Temas por loja 20
Tempo de render 500 ms por página
Saída de uma página 2 MB

Cada card do tema inicial custa cerca de 0,5 ms. Uma página com milhares de {% render %} passa do limite, então pagine ou filtre. Quando o render falha ou passa do limite, a vitrine mostra a página padrão no lugar.

Cache#

As páginas são guardadas por 60 segundos para visitantes anônimos, por loja e caminho. Salvar no painel limpa o cache na hora. Mudança de produto ou categoria leva até cerca de 1 minuto para aparecer.

Quem pode fazer o quê#

Ação Permissão no cargo
Ver temas Ver templates
Criar e editar tema fora do ar Editar templates
Publicar, despublicar e editar o tema no ar Publicar templates

Próximos passos#