O tema

O que cada tema compilado contém, e cada seção e configuração que o lojista alcança no editor da Shopify.

Recursos

Recurso	O que faz	Sem JavaScript
Carrinho lateral	Adicionar ao carrinho desliza o carrinho pela lateral com quantidades, remoção e checkout	Vai para a página do carrinho
Busca preditiva	Produtos e coleções sugeridos enquanto você digita; `/` abre	Vai para a página de busca
Filtros de coleção	Disponibilidade, preço e cada filtro que a loja configurou, com contagens, sem recarregar, mantidos no endereço	Um formulário
Adição rápida	Direto ao carrinho a partir do cartão; um pequeno seletor quando há opções	A página de produto
Amostras	Pontos de cor nos cartões e na página de produto, das configurações de amostras da Shopify ou da cor no valor da opção	O mesmo
Adicionar ao carrinho fixo	O botão fica ao alcance enquanto a página de produto rola	O botão principal
Submenus	Listas suspensas ou mega menu com colunas e imagem; aninhados no painel do celular	Links simples
Guia de tamanhos	Uma página aberta em um modal a partir da página de produto	Um link
Mídia	Vídeo, vídeo hospedado e modelos 3D na galeria	Imagens de capa

Cada um deles é uma chave no grupo Recursos do painel de design e uma configuração real do tema.

Seções

Página inicial: destaque, coleção em destaque, lista de coleções, imagem com texto, texto formatado, multicolunas, depoimentos, barra de logos, perguntas frequentes, newsletter, formulário de contato. Grupo do cabeçalho: barra de anúncios, cabeçalho. Rodapé. Cada template — coleção, produto, carrinho, busca, blog, artigo, página, 404, senha e todas as páginas de cliente — tem sua própria seção principal.

Nenhum controle do navegador

Todo menu, seletor, ordenação e escolha do tema é do próprio tema, estilizado a partir dos mesmos tokens, com navegação por teclado. O único controle nativo que resta é a lista de países da Shopify no formulário de endereço do cliente.

Referência

Abaixo, cada seção com suas configurações, como o lojista as vê em Personalizar, geradas a partir do próprio tema.

Lido por máquinas

Cada página leva JSON-LD. Uma página de produto declara o produto inteiro e cada uma de suas variantes — preço, moeda, disponibilidade, condição, SKU, código de barras, e cor, tamanho ou material quando os nomes das opções permitem — e não só aquela que o comprador selecionou, então um buscador ou um agente de compras lê a linha inteira numa passada. As coleções listam seus produtos em ordem, os artigos levam autor e data, as páginas de produto levam migalhas, e cada página declara a loja e uma ação de busca. É isso que rende os resultados enriquecidos, e é isso que os agentes de IA leem quando compram em nome de alguém.

tema 0.8.0 · 36 seções

Header

Cabeçalho e rodapé

Layout: choice — Logo left, menu centre · Logo centre, menu split · Logo above menu
Menu: menu
Logo file in theme assets: text
Logo file width: number
Logo file height: number
Submenus: choice — Dropdown · Mega menu
Mega menu image: image
Mega menu image caption: text
Mega menu image link: link

Announcement bar

Cabeçalho e rodapé

Text: text
Link: link

Hero

Seção da página inicial

Layout: choice — Text over image · Image beside text · Text above image
Image: image
Eyebrow: text
Heading: text
Text: text
Button label: text
Button link: link
Second button label: text
Second button link: link
Height: choice — Short · Medium · Tall
Content position: choice — Bottom left · Centre

Featured collection

Seção da página inicial

Layout: choice — Grid · One scrolling row · Two large, then small
Collection: collection
Heading: text
Text: text
Products: number
Columns: choice — 2 · 3 · 4
Show view all: on / off

Collection list

Seção da página inicial

Heading: text
Text: text

Bloco: Collection

Collection: collection

Image with text

Seção da página inicial

Image: image
Eyebrow: text
Heading: text
Text: rich text
Button label: text
Button link: link
Layout: choice — Image first · Text first

Rich text

Seção da página inicial

Eyebrow: text
Heading: text
Text: rich text
Button label: text
Button link: link
Alignment: choice — Left · Centre

Multicolumn

Seção da página inicial

Heading: text
Text: text
Columns: choice — 2 · 3 · 4

Bloco: Column

Image: image
Heading: text
Text: rich text
Link text: text
Link: link

Testimonials

Seção da página inicial

Heading: text
Text: text

Bloco: Testimonial

Quote: rich text
Name: text
Detail: text
Stars: number

Logo bar

Seção da página inicial

Heading: text

Bloco: Logo

Image: image
Text if no image: text
Link: link

FAQ

Seção da página inicial

Heading: text
Text: text
Open the first question: on / off

Bloco: Question

Question: text
Answer: rich text

Contact form

Seção da página inicial · sem configurações

Footer

Cabeçalho e rodapé

Layout: choice — Columns · One line · Newsletter first
Newsletter heading: text
Short description: text
First menu: menu
Second menu: menu
Show newsletter signup: on / off
Show payment icons: on / off
Language and country selectors: on / off

Product grid

Seção de página

Show filters: on / off
Products per page: number
Columns: choice — 3 · 4

Product

Seção de página

Layout: choice — Gallery beside details · Gallery above details · Thumbnails down the side
Show vendor: on / off
Show quantity selector: on / off
Show dynamic checkout button: on / off
Sticky add to cart: on / off

Bloco: Size guide

Page: page
Link text: text

Bloco: Detail

Heading: text
Text: rich text

Cart

Seção de página

Show order note: on / off

Cart drawer

Recurso · sem configurações

Predictive search

Recurso · sem configurações