Configurando o TOGE

TOGE é um tema para pequenas marcas de criadores: uma história por produto, notas sobre tecidos, fotos de campo e drops. Um tema só pode carregar seu layout e textos de exemplo. Seus produtos, fotos, menus e metacampos vivem na sua loja, por isso uma instalação nova parece vazia. Este guia percorre o que adicionar, na ordem que faz mais diferença.

Tudo abaixo é feito no admin da Shopify. Nada precisa de código. Quando um passo é trabalho comum da Shopify, este guia leva à Central de Ajuda da Shopify em vez de repeti-lo.

1. Termos usados neste guia

Termo	Significado
Editor de tema	A tela em que você altera as configurações e o conteúdo do tema: Loja virtual → Temas → Personalizar.
Seção	Uma faixa de uma página no editor de tema (hero, novidades, rodapé…). Cada uma tem suas próprias configurações.
Template	O layout que uma página usa. O TOGE traz templates para as páginas Sobre, de suporte, de contato e de políticas. Você escolhe o template de uma página no editor da página, em "Modelo de tema".
Handle	A última parte do URL de uma página ou coleção, como `about-us`. A Shopify o define a partir do título; você pode alterá-lo no quadro "Listagem em mecanismos de pesquisa" do editor da página. O tema encontra algumas páginas pelo handle.
Metacampo	Um campo extra que você adiciona a produtos, coleções ou publicações do blog, em Configurações → Dados personalizados. O tema lê alguns deles.
Metaobjeto	Um registro que você mesmo define, com seus próprios campos, para o qual os produtos podem apontar. O TOGE usa um para tecidos.
Drop	O lançamento de um produto em uma data marcada. Antes dela, a página do produto mostra a data em vez do botão do carrinho.

2. Os primeiros dez minutos

Enviar o tema: Loja virtual → Temas → Adicionar tema → Fazer upload de arquivo zip. Mantenha-o não publicado até a página inicial ficar do jeito certo; "Personalizar" permite visualizar um tema não publicado.
Logo: Editor de tema → Cabeçalho. Envie a imagem do seu logo, ou deixe vazio para mostrar o nome da loja em texto. (A marca da montanha na página inicial é o logo do próprio TOGE. Para substituí-la, edite snippets/logo.liquid ou desative "Logo sobre a imagem" na seção Hero.)
Menu principal: Conteúdo → Menus → Menu principal. O cabeçalho mostra o menu que você escolher na seção Cabeçalho (padrão: main-menu). Menus aninhados abrem como menus suspensos, até três níveis.
Hero da página inicial: Editor de tema → Hero. Adicione uma foto larga (2:1, 2400 px de largura é mais que suficiente). Adicione uma foto 4:5 separada para celulares se o corte ficar errado. Se a foto for clara, defina "Cor do texto sobre a foto" como Tinta.

Isso já dá uma loja com aparência de pronta.

3. Configurações do tema

Editor de tema → Configurações do tema. Valem em todo lugar.

Configuração	O que faz
Cores	Dois esquemas de cores: o esquema 1 é claro, o esquema 2 é escuro. Seções como a faixa de newsletter escolhem um deles. Cada esquema tem cores de fundo, texto, borda, superfície, destaque, link e botão.
Tipografia	Fonte do corpo e fonte dos títulos. Cada uma vem com os pesos normal, médio e negrito. Qualquer fonte da Shopify funciona.
Layout	Largura máxima da página e a margem nas laterais.
Raio dos cantos dos campos	Arredondamento dos cantos de campos e botões.
Favicon	O ícone pequeno na aba do navegador. Quadrado, 32 px ou maior.

4. Menus e páginas que o tema procura

O rodapé e as páginas de suporte encontram as coisas pelo handle. Crie-as com estes handles e elas aparecem sozinhas. Deixe-as de fora e essa parte simplesmente não é exibida.

O quê	Onde	Handle
Colunas de menu do rodapé	Conteúdo → Menus	quaisquer menus; escolha-os em Rodapé → blocos
Journal	Publicações do blog	blog `news`
Página Sobre	Páginas, template `page.about`	`about-us`
Página de suporte	Páginas, template `page.support`	`support`
Página de contato	Páginas, template `page.contact`	`contact`
Páginas legais exibidas no rodapé	Configurações → Políticas	Privacidade, Termos, Reembolso, Frete
Páginas legais extras (Japão)	Páginas, template `page.policy`	`tokushoho`, `cancellation`

Para criar uma página, vá em Loja virtual → Páginas → Adicionar página. Dê um título, escolha o template em "Modelo de tema" à direita e confira o handle em "Listagem em mecanismos de pesquisa".

As páginas legais vêm de Configurações → Políticas; o rodapé leva às que você tiver preenchido.

tokushoho e cancellation são páginas que a lei japonesa exige de lojas virtuais. Se você não vende no Japão, pule-as. O template page.policy mostra qualquer página no mesmo estilo das políticas.

As páginas Sobre, de suporte e de contato são montadas com seções, então seus textos e fotos são editados no editor de tema, não na própria página. O formulário de contato envia para o e-mail de remetente da loja. A faixa de newsletter adiciona os inscritos em Clientes com a tag newsletter.

5. Página inicial

Seção	Do que precisa
Hero	Uma foto (veja acima). Título, texto de introdução e link são configurações da seção.
Faixa de destaque	Coleções com o metacampo Mostrar no destaque da página inicial ativado (veja §8). Com uma coleção é uma faixa estática; com duas a cinco vira um carrossel. Sem nenhuma, a seção usa suas próprias configurações de texto e foto.
Novidades	Escolha uma coleção na seção. Três produtos no desktop, quatro em celulares.
História	Uma foto, ou um vídeo curto em loop (mp4 enviado em Conteúdo → Arquivos; é reproduzido sem som). O texto fica sobre a imagem; desative "Texto sobre a imagem" para colocá-lo abaixo.
Journal	Escolha o blog. As três publicações mais recentes.
Vistos recentemente	Preenche-se sozinho a partir do navegador do visitante. Nada a configurar.

Você pode adicionar mais seções à página inicial com "Adicionar seção": Produto em destaque (um produto com suas fotos, opções e botão do carrinho), FAQ, Guia de suporte, Formulário de contato, e outra História, Coleção em destaque, Novidades ou Journal. A faixa de newsletter fica no rodapé, por isso aparece em todas as páginas.

6. Produtos

A página do produto funciona com um produto simples: título, preço, fotos, opções. Cada item abaixo adiciona mais uma parte da página. Tudo é opcional, e a página oculta o que está vazio.

O que há na página

De cima para baixo: foto principal e frase de efeito → nome, opções, preço, carrinho e o acordeão de detalhes → combina com → fotos do produto → história → capítulo do tecido → nota → fotos de campo → produtos relacionados → vistos recentemente. Tudo a partir de "Combina com" é uma seção própria no editor de tema, então você pode reordená-la ou removê-la.

A seção Página do produto tem configurações que controlam a parte de cima:

Bloco Cor e tamanho: qual opção é a cor e qual é o tamanho (veja abaixo), o limite de "Últimas unidades", o rótulo de tamanho e uma página de guia de tamanhos.
Bloco Quantidade: quantidade máxima por pedido (0 significa sem limite) e uma nota abaixo do campo.
Bloco Carrinho: botões de checkout dinâmico (Shop Pay e similares) e o formulário de destinatário para cartões-presente.
Blocos Acordeão: cada um é uma linha nos detalhes. Uma linha pode mostrar uma política da loja, a descrição do produto, o guia de cuidados, a tabela de tamanhos ou o material e a origem.

Opções e fotos

Cor e tamanho são escolhidos pela posição, não pelo nome, então a opção pode se chamar Cor, Color ou カラー. Defina "Posição da opção de cor" e "Posição da opção de tamanho" (1 a 3) na seção Página do produto se as suas forem diferentes de 1 e 2.
Uma terceira opção (comprimento, caimento…) também é exibida como botões. Nada a configurar.
Amostras de cor usam a foto da primeira variante de cada cor (retrato 4:5, 1080 × 1350 funciona bem). Dê a todas as variantes de uma cor a mesma foto.
Foto principal: a imagem grande no topo é o metacampo custom.hero_image, ou então a primeira foto do produto. Ela deve ser a imagem de "universo", não uma foto de produto.
Galeria: as fotos do produto que não são usadas como amostras de cor são dispostas abaixo da história. Vídeos, links do YouTube e do Vimeo e modelos 3D adicionados ao produto também aparecem ali.

Metacampos que a página do produto lê

Crie-os em Configurações → Dados personalizados → Produtos → Adicionar definição. Dê à definição o nome que quiser; o que precisa coincidir é o namespace e a chave (digite como namespace.key no formulário da definição) e o tipo. Assim que uma definição existe, cada produto ganha um campo para ela no fim da página de edição.

Namespace.chave	Tipo	Exibido como
`descriptors.subtitle`	Texto de linha única (padrão)	A frase de uma linha abaixo da foto principal
`descriptors.care_guide`	Texto de várias linhas (padrão)	"Cuidados" no acordeão de detalhes
`custom.hero_image`	Arquivo (imagem)	Foto principal no topo; também a foto de hover nos cartões de produto
`custom.hero_video`	Arquivo (vídeo)	Reproduzido no lugar da foto principal, sem som, em loop
`custom.gender`	Texto de linha única	Rótulo pequeno ao lado do nome do produto. Leva à coleção com o mesmo handle, se essa coleção tiver produtos
`custom.gender_collection`	Referência de coleção	Para onde o rótulo leva em vez disso, se os handles forem diferentes
`spec.material`	Texto de linha única	"Material" nos detalhes
`spec.origin`	Texto de linha única	"Feito em" nos detalhes
`spec.size_table`	Texto de várias linhas	Tabela de tamanhos. Uma linha por linha, células separadas por `\|`. A primeira linha é o cabeçalho: `Tamanho \| Comprimento \| Peito \| Manga`, depois `S \| 66 \| 50 \| 20`. É impressa como digitada, sem transpor
`color.names`	Texto de linha única	Nomes de exibição das cores, como pares `CODE:Name` separados por `\|`: `SUMI:Tinta\|SAND:Areia`. O código é o valor da opção
`drop.mode`	Texto de linha única	`pre` para um drop que ainda não abriu: o carrinho fica oculto e o painel "avise-me" aparece no lugar
`drop.next_at`	Data	Data do próximo drop, exibida no painel "avise-me"
`drop.label`, `drop.qty`, `drop.note`	Texto de linha única	Texto do botão e a linha curta abaixo dele antes de um drop
`drop.end_variants`	Texto de linha única	Combinações descontinuadas como `Color / Size`, separadas por `\|`: `SAND / XS\|SAND / XL`
`nav.parent`	Texto de linha única	Handle da coleção a mostrar na navegação estrutural (veja abaixo)
`story.gallery`	Lista de arquivos (imagens)	Fotos de "campo": a faixa horizontal de fotos de estilo de vida
`story.fabric`	Referência de metaobjeto → Tecido	O capítulo do tecido (veja §7)

A maioria deles também existe como configurações da seção Página do produto (imagem principal, frase de efeito, gênero, material, origem, nomes das cores, combinações descontinuadas, status de venda). A configuração da seção vale para todos os produtos e o metacampo tem prioridade sobre ela, então uma loja com um ou dois produtos pode dispensar os metacampos por completo.

A navegação estrutural acima do nome do produto é decidida nesta ordem: tags bread1-apparel, bread2-tops (o tema procura coleções com os handles apparel e tops; sem elas, as palavras são exibidas sem links) → o metacampo nav.parent → a primeira coleção à qual o produto pertence. A tag bread1- também decide quais produtos aparecem em "Produtos relacionados".

A história em si é a descrição do produto. Títulos (h3), parágrafos e imagens são tudo de que ela precisa; o tema adiciona a lista de conteúdo à direita a partir dos títulos.

7. Capítulo do tecido (metaobjetos)

O capítulo do tecido é uma parte da página do produto que conta a história de um tecido: nome e introdução, uma linha de números grandes (gramatura, espessura…), fotos do direito e do avesso, três etapas de "como funciona" e gráficos comparativos. É um metaobjeto por tecido, compartilhado entre produtos. Só o nome é obrigatório; cada uma das outras partes aparece quando seu campo está preenchido.

Crie as definições em Configurações → Dados personalizados → Metaobjetos com estas chaves de campo. Os nomes e o próprio nome da definição podem ser quaisquer; o tema segue a referência story.fabric do produto e lê os campos pela chave. Crie primeiro as definições pequenas, pois as maiores fazem referência a elas: Linha do tecido → Gráfico do tecido, Etapa do tecido, Estatística do tecido → Tecido.

Tecido (o que você anexa aos produtos)

Chave	Tipo
`name`, `eyebrow`, `headline`	Texto de linha única
`lead`	Rich text
`stats`	Lista de Estatística do tecido
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Texto de linha única
`views_body`, `face_body`, `back_body`	Rich text
`face_image`, `back_image`	Arquivo (imagem)
`how_heading`	Texto de linha única
`how_body`	Rich text
`steps`	Lista de Etapa do tecido
`charts`	Lista de Gráfico do tecido
`note`	Texto de várias linhas

Estatística do tecido: value, unit, label, prefix (todos de linha única). Exibida como a linha de números grandes, ex.: value 90, unit g/㎡, label Peso.

Etapa do tecido: image (arquivo), title (linha única), body (rich text). Três etapas formam a faixa "como funciona".

Gráfico do tecido: title (linha única), body (rich text), axes (lista de linha única), rows (lista de Linha do tecido), note (linha única). Com axes preenchido, o gráfico é uma tabela de avaliação com cinco pontos; sem ele, são barras horizontais.

Linha do tecido: label (linha única), value (decimal), display (linha única, o que imprimir no lugar do valor bruto, ex.: cerca de 30 min), scores (lista de inteiros, um por eixo, 1 a 5), highlight (booleano, marca o seu próprio tecido).

Os gráficos animam quando entram na tela ao rolar. Os números contam a partir do zero.

8. Coleções

Em Configurações → Dados personalizados → Coleções:

Namespace.chave	Tipo	Exibido como
`toge.home_feature`	Verdadeiro/falso	Coloca esta coleção na faixa de destaque da página inicial
`toge.feature_heading`	Texto de linha única	A linha grande na faixa e no topo da página da coleção
`toge.feature_image`	Arquivo (imagem)	Foto da faixa, se diferente da imagem da coleção
`toge.feature_video`	Arquivo (vídeo)	Reproduzido na faixa no lugar da foto
`nav.parent`	Texto de linha única	Handle da coleção-mãe, para a navegação estrutural (`all` para "todos os produtos")

A descrição da coleção é o texto curto abaixo do título. Filtros, ordenação e o número de produtos por página são configurações da seção Coleção.

9. Barra de avisos

A barra bem no topo é controlada por publicações do blog, então você pode escrever, agendar e retirar avisos como qualquer publicação.

Em Configurações → Dados personalizados → Publicações do blog, crie toge.announce (verdadeiro/falso) e toge.announce_text (texto de linha única).
Na publicação, ative announce. A barra mostra announce_text, ou o título da publicação, e leva à publicação.
A publicação mais recente com a marcação prevalece. Sem nenhuma, não há barra.

Os visitantes podem fechar a barra. Ela fica fechada por sete dias, ou até o texto mudar.

10. O que aparece sozinho

Estas partes do tema seguem as configurações da sua loja. Não há nada a configurar no tema.

Parte	Aparece quando
Seletor de país e idioma (rodapé)	A loja tem mais de um mercado ou idioma
"Impostos incluídos" ao lado dos preços	Os preços incluem impostos (Configurações → Tributos e taxas).
Nota de frete abaixo do preço	O mercado tem um metacampo `custom.shipping_note` (texto ou valor monetário)
Disponibilidade de retirada na página do produto	Um local oferece retirada local e o produto tem estoque lá.
Parcelamento do Shop Pay	A loja é elegível para o Shop Pay Installments
Formulário de destinatário do cartão-presente	O produto é um cartão-presente.
Follow on Shop (rodapé)	O Shop Pay está ativado e a configuração correspondente na seção Rodapé está ativada
Ícone de conta no cabeçalho	As contas de cliente estão ativadas (Configurações → Contas de cliente)
Sugestões de pesquisa enquanto se digita	O idioma da loja é um dos que a pesquisa preditiva da Shopify oferece (o japonês ainda não)

11. Tamanhos de imagem

Onde	Tamanho
Hero da página inicial	2:1, 2400 px de largura. Os celulares cortam para 4:5, ou usam a imagem separada para celular
História da página inicial	2:1, 2400 px de largura. Os celulares cortam para 4:5
Faixa de destaque de coleções	16:9, 1600 px de largura ou mais. Os celulares cortam para 4:3
Foto principal do produto (`custom.hero_image`)	3:2, 2000 px de largura. Os celulares cortam para 4:5
Fotos das variantes (amostras de cor)	4:5, 1080 × 1350. Os cartões de produto e a galeria mostram 4:5; a amostra de cor corta um quadrado do centro
Fotos do produto (galeria)	4:5
Fotos de campo (`story.gallery`)	2:3, retrato
Direito e avesso do tecido	Qualquer formato, mas o mesmo para os dois; 1200 px de largura
Etapas do tecido	Desenhos sobre fundo branco; o branco se mistura com a página
Imagem da publicação do blog	4:3 na lista do journal, 1600 px de largura ou mais
Favicon	Quadrado, 32 px ou maior

A Shopify redimensiona tudo para cada tela, então maior não é problema.

12. Idiomas

Todos os textos de exemplo do tema estão em inglês. Os rótulos do próprio tema (botões, carrinho, busca) e o editor de tema vêm em inglês, japonês, alemão, francês, espanhol, português (Brasil), italiano, chinês tradicional, chinês simplificado e coreano; a loja segue o idioma configurado.

O seu próprio conteúdo, como textos de seções, produtos e páginas, é traduzido com o app gratuito Translate & Adapt da Shopify. App

13. Atualizando o tema

Quando uma nova versão é lançada, Loja virtual → Temas mostra um aviso de atualização no tema. A atualização mantém as configurações do editor de tema e o seu conteúdo. As edições no código do tema não são mantidas, então anote as alterações que você fez antes de atualizar.

14. O que o tema não traz

Fotos e vídeos. Temas da Shopify não podem incluir mídia, e as fotos da demonstração são licenciadas para a demonstração. Onde falta uma foto, você vê um desenho cinza de placeholder.
Produtos, publicações, páginas, definições de metacampos. Esses são dados da loja. Este guia lista tudo o que o tema pode usar.
Apps. Nenhum é necessário. O Translate & Adapt só é preciso para idiomas adicionais, e um app de assinaturas só se você vende assinaturas.