Documentação do tema Helm

1. 1

   Adicione o Helm à sua loja

   O Helm é distribuído pela Shopify Theme Store. Depois de adicionado, ele aparece na sua biblioteca de temas, em Online Store no seu admin da Shopify.

2. 2

   Abra o editor de temas

   No cartão do Helm, clique em Edit theme. A página inicial abre com a composição padrão: um hero, uma linha de números, um como funciona, cartões de coleção, perguntas frequentes e uma chamada para ação, cada um em uma seção Canvas.

3. 3

   Defina suas cores e fontes

   Clique no ícone Theme settings. Em Colors, ajuste os esquemas de cores; em Typography, escolha as fontes de títulos, texto e destaque.

4. 4

   Conecte seus menus e publique

   Crie seus menus em Content > Menus, escolha o menu principal nas configurações da seção Header e depois substitua os textos e as imagens de exemplo. Publique o tema quando suas páginas estiverem prontas.

Os rótulos do admin da Shopify estão escritos aqui em inglês, como a central de ajuda da Shopify os escreve. Seu admin os mostra no próprio idioma. As configurações próprias do Helm aparecem em inglês no editor de temas: a versão 1.0.8 traz os rótulos do editor só em inglês.

O preset Helm

O preset define os valores iniciais de Theme settings. Mude o que quiser depois: o preset é só o ponto de partida da loja.

Presets da seção Canvas

Quando você adiciona uma seção, o editor oferece estas composições de Canvas. Todas, menos o Canvas vazio, vêm com seus blocos e um texto de exemplo.

• Adicionar uma seção. Na barra lateral do editor, clique em Add section e escolha Canvas ou um dos seus presets.
• Adicionar um bloco. Passe o cursor sobre uma seção Canvas e clique em Add block. O Canvas aceita todos os blocos de tema e os blocos de app.
• Reorganizar. Arraste um bloco ou uma seção pela alça e clique em Save.
• Ocultar sem excluir. Passe o cursor sobre o nome de um bloco ou de uma seção e clique em Hide.
• Configurações da seção. Cada seção Canvas define sua largura, o espaço entre seus blocos, o espaçamento superior e inferior no computador e no celular, seu esquema de cores e um ID de âncora para links.
• Blocos dentro de blocos. Estes blocos recebem outros blocos: Group, Columns, Split, Hero, Slide, Tab, Accordion item.

Blocos com um comportamento que vale conhecer

• Heading. O nível do título e o tamanho visual são duas configurações separadas, então um título pequeno pode continuar sendo o título principal da página. Mantenha um só título principal por página.
• Button. Estilos Primary, Secondary e Ghost, tamanhos Small, Medium e Large. Link relationship aplica nofollow, sponsored, ugc ou noreferrer só a esse link; Default segue Theme settings.
• Video. Envie um vídeo para a Shopify ou cole uma URL do YouTube ou do Vimeo, depois ajuste reprodução automática, repetição, som desligado e controles.
• Icon. Escolha um dos 18 ícones, depois o tamanho, a cor e o alinhamento.
• Countdown. Faz a contagem regressiva até a data definida em End date, a mesma para todos. Não mostra nada sem uma data futura, e se oculta quando a data já passou.
• Email capture. Cria um cliente na Shopify com a tag definida em Customer tag, leadmagnet por padrão, para sua ferramenta de e-mail segmentar por ela.
• Review card. Vincule-o a uma entrada de um metaobjeto product_review, com os campos title, review, rating, author_name e author_avatar, ou preencha à mão. Os metaobjetos ficam em Content > Metaobjects.
• Product rating. Mostra estrelas a partir dos metacampos de produto reviews.rating e reviews.rating_count, e nada enquanto estiverem vazios.
• Step list. Preencha HowTo name (for SEO) e a lista também emite dados estruturados HowTo para os seus passos.
• Store location. Endereço, horário de funcionamento, telefone, coordenadas e faixa de preço. O bloco também emite dados estruturados LocalBusiness.
• Product price. Mostra o preço da variante escolhida, com o preço comparativo e o preço unitário, e acompanha a variante que o cliente seleciona. A retirada na loja e o banner do Shop Pay Installments também a acompanham.
• Product bundle. Lista a primeira variante disponível de cada produto escolhido pelo preço real, depois o total real, sem desconto. Um botão adiciona todos ao carrinho; produtos esgotados ficam de fora.

O modelo de produto começa com o título, o preço, a avaliação, o seletor de variante, a quantidade, os botões de compra, a retirada na loja, o Shop Pay Installments e a descrição, depois os produtos complementares, diferenciais, uma garantia, os produtos relacionados, perguntas frequentes e a barra fixa de adicionar ao carrinho.

Não há modelo customers: a Shopify hospeda as contas de cliente, e o ícone de conta no cabeçalho abre o login.

• Os produtos do carrinho, com a quantidade e um botão para remover.
• Uma barra de progresso até o frete grátis, quando o limite é maior que zero.
• Os descontos já aplicados ao carrinho, como descontos automáticos. Não há campo de código de desconto: os clientes informam os códigos no checkout.
• Uma observação do pedido, quando Show order note está ativado.
• Os dados do destinatário de um cartão-presente, abaixo da linha correspondente.
• Recomendações de produtos, definidas na seção Cart drawer.

Com outro Cart type, o ícone do carrinho leva à página do carrinho.

Indexação

• Fora da busca por padrão. O carrinho, os resultados de uma busca, as coleções filtradas por tag e cada página depois da primeira são marcados como noindex.
• Modelos de destino. Auto-noindex landing pages, ativado no preset, marca como noindex os modelos cujo nome contém landing, leadmagnet ou advertorial.
• Página por página. Um metacampo de texto seo.robots em uma página, um produto, um artigo ou uma coleção substitui o valor para esse item, por exemplo noindex,follow.
• Mecanismos de IA. Quando Allow AI engines to read your content está desativado, o Helm adiciona tags noindex dirigidas a GPTBot, ClaudeBot, PerplexityBot, CCBot e Google-Extended.
• Links para outros sites. Os botões, os links de imagem, a barra de avisos, o rodapé e o endereço de loja adicionam nofollow, noreferrer e uma nova aba aos links que saem da sua loja, conforme as configurações de SEO. Um botão ou uma imagem pode mudar isso com o seu Link relationship.

Dados estruturados

O JSON-LD que o Helm emite, e o que aciona cada tipo.

• Organization. Em todas as páginas, com seu logo, a descrição da sua loja e as contas sociais de Theme settings. A página inicial acrescenta WebSite com uma ação de busca.
• Product. Nas páginas de produto, com a oferta da variante escolhida.
• BlogPosting. Nos artigos.
• CollectionPage. Nas páginas de coleção.
• BreadcrumbList. Onde a trilha de navegação é exibida.
• FAQPage. A partir do metacampo de página faq.items, uma lista de metaobjetos com uma pergunta e uma resposta, nas páginas que usam page.faq ou têm esse metacampo.
• HowTo. A partir de um Step list com o HowTo name preenchido.
• LocalBusiness. A partir de cada bloco Store location.

• Nenhum script de rastreamento. O Helm não adiciona nenhum script de análise nem de publicidade. Conecte seus pixels em Settings > Customer events, ou pelos apps que os oferecem.
• Consentimento. O Helm lê o consentimento dos visitantes da Customer Privacy API da Shopify. Ative o banner de cookies em Settings > Customer privacy.
• Preferências de cookies. O bloco Cookie preferences, no rodapé por exemplo, reabre as escolhas de privacidade do visitante.
• Um script seu. Use uma seção ou um bloco Custom Liquid nos modelos que precisam dele.

• Traduções da loja. Os textos da loja vêm em inglês, francês, espanhol e alemão.
• Adicionar um idioma. Adicione e publique um idioma em Settings > Languages. Para um idioma que o Helm não traz, traduza com o app Translate & Adapt da Shopify ou outro app de tradução.
• Editor de temas. Os rótulos das configurações do Helm estão só em inglês, seja qual for o idioma do admin.
• Da direita para a esquerda. Para árabe, hebraico, persa, urdu e os outros idiomas escritos da direita para a esquerda, o Helm inverte a direção da página.