Seções para Express

O conteúdo do tema é criado usando blocos personalizáveis de conteúdo que determinam o layout e a aparência de diferentes páginas da loja virtual e são denominados seções.

As seções estáticas aparecem em locais predeterminados da loja virtual e não podem ser removidas ou reorganizadas. São ocupadas por cabeçalhos, rodapés, seções de navegação ou seções de conteúdo em páginas como páginas de produto e páginas de coleção. Por exemplo, a seção Produto determina a aparência de cada página de produto da loja virtual.

As seções dinâmicas são opcionais e servem para personalizar a página inicial. O layout é criado com até 25 seções dinâmicas, que podem ser adicionadas, reorganizadas e removidas.

Você pode saber mais sobre a seleção exclusiva de seções de Express e aprender a personalizá-las para se adequarem à sua empresa.

Seções estáticas

O Express inclui as seguintes seções estáticas:

  • Cabeçalho
  • Rodapé
  • Produto
  • Recomendações de produtos

Seções dinâmicas

O Express inclui as seguintes seções dinâmicas:

  • Coleções em destaque
  • Produto em destaque
  • Conteúdo personalizado
  • Imagem com texto

Cabeçalho

O cabeçalho do tema é a seção que aparece no topo de todas as páginas de sua loja.

Personalize os seguintes itens no cabeçalho:

  • Logotipo
  • Barra de avisos
  • Menu
  • Pesquisa

Adicionar um logotipo personalizado

Adicione uma imagem de logotipo personalizado ao cabeçalho de sua loja. O melhor formato é um arquivo .png com fundo transparente. A largura máxima do logotipo é 180px. É possível redimensionar a imagem aumentando ou diminuindo a largura.

  1. Clique em Cabeçalho. 5. Na área Imagem do logotipo, clique em Selecionar imagem e siga um destes procedimentos: * Para selecionar uma imagem já carregada no admin da Shopify, clique na aba Biblioteca. * Para selecionar uma imagem no computador local, clique em Biblioteca > Carregar. 6. Use o controle deslizante Largura do logotipo personalizado para personalizar esse valor. 8. Clique em salvar.

Adicionar uma barra de comunicados

Para exibir uma mensagem aos clientes, adicione uma barra de comunicados ao cabeçalho. O texto é personalizável e pode incluir informações de contato, eventos, promoções ou o slogan da loja.

  1. Clique em Cabeçalho. 5. Na área Barra de comunicados, marque a opção Exibir comunicado. 6. Digite o texto do comunicado. 7. Opcional: insira uma URL para adicionar um link ao comunicado. 8. Opcional: no menu Ícone, selecione um ícone para exibir na barra de comunicados. O ícone tem a mesma cor do texto do comunicado. 9. Para alterar a cor do plano de fundo da barra de comunicados, escolha uma opção na amostra de cores Barra. 10. Para alterar a cor do texto do comunicado, escolha uma opção na amostra de cores Texto. 11. Clique em salvar.

Adicionar um menu

Adicione um menu ao cabeçalho para exibir todos os links e use essa função para destacar as páginas que os clientes acessam com mais frequência. Por exemplo, adicione um menu que contenha links para as coleções.

  1. Clique em Cabeçalho.

  2. Para selecionar um menu, clique em Alterar. Selecione um menu na lista ou clique em Criar menu para gerar um novo.

  3. Para editar o menu, clique em Editar menu.

  4. Clique em salvar.

Habilitar pesquisa

Adicione uma opção de pesquisa ao cabeçalho para que os clientes localizem itens rapidamente na loja.

  1. Clique em Cabeçalho. 2. Marque Exibir pesquisa. 3. Clique em salvar.

Rodapé

O rodapé do tema é a seção que aparece na parte inferior de todas as páginas de sua loja. Adicione os seguintes recursos ao rodapé:

  • ícones de pagamento
  • um menu
  • uma assinatura da newsletter
  • Uma seção de texto com informações sobre sua empresa
  • ícones de redes sociais
  • um seletor de idioma

Adicionar ícones de pagamento

No rodapé, é possível exibir ícones das formas de pagamento aceitas. Nessa área são exibidos os ícones associados ao provedor de pagamento habilitado na seção Configurações de pagamento do admin.

  1. Clique em Rodapé.

  2. Marque a opção Exibir ícones de pagamento.

  3. Clique em salvar.

Adicionar um menu, uma assinatura da newsletter ou um texto

  1. Clique em Rodapé.

  2. Adicione um bloco de conteúdo na área Conteúdo, clicando em Adicionar conteúdo. Selecione uma das seguintes opções de bloco de conteúdo:

  • Menu
  • Newsletter
  • Texto

    É possível adicionar até quatro blocos de conteúdo.

    Para remover um bloco de conteúdo, clique no bloco e, depois, clique em Remover conteúdo.

    Para personalizar um bloco de conteúdo, clique no bloco e edite as configurações.

  1. Clique em salvar.

Adicionar ícones de redes sociais

  1. Clique em Configurações do tema.

  2. Clique em Redes sociais.

    1. Para carregar uma imagem de compartilhamento em redes sociais, na área Imagem de compartilhamento em redes sociais, clique em Selecionar imagem ou Acessar imagens gratuitas.
  3. Para adicionar botões de compartilhamento em redes sociais a produtos e posts do blog, marque uma ou todas as seguintes opções:

- Compartilhar no Facebook - Publicar tuíte no Twitter - Fixar no Pinterest (indisponível para compartilhamento em posts do blog)

  1. Insira os links para suas contas nas redes sociais nos campos em Contas. Digite os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

    1. Para alterar o estilo dos botões de compartilhamento, selecione Personalizado com a marca ou Somente com o logotipo no menu Estilo do botão.
  2. Clique em salvar.

Adicionar um seletor de idioma

Adicione um seletor de idiomas apenas se você tiver habilitado vários idiomas da loja.

  1. Clique em Seções.

  2. Clique em Rodapé.

  3. Em Seletor de idiomas, escolha a opção Mostrar seletor de idiomas.

  4. Clique em salvar.

Produto

A página do produto é exibida quando o comprador clica em uma coleção em destaque. Nela, você vê a descrição, o preço, as variantes e as imagens do produto. É possível escolher entre direcionar os usuários a uma nova página ou mostrar as informações do produto em uma sobreposição na página inicial. Essa configuração é definida nas configurações de tema. Se a opção Exibir as páginas de produto em uma sobreposição estiver habilitada, a página do produto aparece como uma sobreposição quando o cliente clicar em um produto em uma coleção em destaque.

A seção "Produto" apresenta as seguintes configurações:

  • Exibir seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Exibir fornecedor: exibe a marca ou o fornecedor na página do produto. Adicione um fornecedor ao produto para usar essa configuração.
  • Exibir o botão de checkout dinâmico: deixe os clientes pularem o carrinho e irem direto para o checkout na seção de produto em destaque.
  • Exibir as páginas de produto em uma sobreposição: selecione essa opção para mostrar as informações do produto em uma camada sobreposta à página atual. A sobreposição aparece quando um produto é selecionado em uma coleção em destaque.
  • Exibir botões de compartilhamento em redes sociais: mostre botões que possibilitam aos clientes compartilhar produtos nas redes sociais. É possível definir os botões usando as configurações do tema.

Editar as configurações do produto

  1. Clique em Produto. 2. Use as configurações para personalizar a página do produto. 3. Clique em salvar.

Recomendações de produtos

Você pode Exibir produtos recomendados em páginas de produto para facilitar aos clientes a descoberta de outros produtos que possam interessá-los.

Quando a opção Exibir as páginas de produto em uma sobreposição está habilitada na página do produto, os produtos acessados nessa seção aparecem em uma camada sobreposta à página atual.

Habilitar recomendações de produtos

  1. Selecione Páginas de produtos.

  2. Clique na seção Recomendações de produto.

  3. Marque a opção Exibir recomendações dinâmicas para mostrar recomendações nas páginas de produtos.

  4. Opcional: para alterar o título que aparece acima dos produtos recomendados, insira outro no campo Título.

    1. Opcional: se você quiser que os clientes adicionem produtos ao carrinho diretamente da seção Recomendações de produtos, selecione Habilitar botão "Compra rápida".
    2. Opcional: para mostrar ou ocultar os fornecedores nas descrições do produto, use a caixa de seleção Exibir fornecedor.
  5. Clique em salvar.

Coleções em destaque

É possível colocar várias coleções em destaque em uma seção da página inicial. Elas aparecem em abas navegáveis.

Quando um cliente adiciona um ou mais produtos de uma coleção em destaque ao carrinho, a quantidade adicionada é exibida como um selo no produto.

Uma seção de coleção em destaque que contém várias coleções. Os nomes das coleções são exibidos como abas que podem ser clicadas na parte superior da seção.

A seção de coleção em destaque apresenta as seguintes configurações:

  • Coleção: escolha as coleções que você quer incluir na seção "Coleções em destaque".
  • Tamanho da lista de coleções: escolha o número de produtos a serem exibidos por padrão. Essa configuração se aplica a todas as coleções na seção Coleções em destaque. - Pequena - 6 produtos

    • Média - 18 produtos
    • Grande - 36 produtos
  • Estilo da imagem: escolha o estilo de corte das imagens do produto nas coleções. Essa configuração se aplica a todas as coleções da seção.

Adicionar uma seção de coleção em destaque à página inicial

  1. Clique em Adicionar seção. 2. Clique em Coleções em destaque e, depois, em Selecionar. 3. Na área de conteúdo, selecione um bloco Coleção ou clique em Adicionar coleção. 4. Clique em Selecionar coleção. 5. Na lista Coleção, selecione aquela que você quer exibir na aba e clique em Selecionar.
To add a collection, click the **Add collection** link to open the [**Create collection**](/manual/products/collections) page in a new tab.

To add or remove products from the selected collection, click the **Edit collection** link to open the **Collections** page in a new tab.
  1. Siga novamente as etapas de 3 a 5 para adicionar mais coleções à seção.
  2. Clique em salvar.

Produto em destaque

É possível destacar um produto na página inicial. Essa é uma ótima maneira de promover um produto novo ou algum item em promoção. As setas para a direita e para a esquerda abaixo da imagem servem para o cliente ver outras fotos.

A seção de produto em destaque apresenta as seguintes configurações:

  • Produto: escolha o produto que você quer exibir na página inicial.
  • Exibir seletor de quantidade - permita que os usuários especifiquem uma quantidade a adicionar ao carrinho.
  • Exibir fornecedor - exiba a marca ou o fornecedor do produto na seção de produto em destaque. Para exibir uma marca ou fornecedor, você precisa adicionar um fornecedor ao produto.
  • Exibir botões de checkout dinâmico - deixe os clientes pularem o carrinho e irem diretamente para o checkout na seção de produto em destaque.
  • Exibir botões de compartilhamento em redes sociais: mostre botões que possibilitam aos clientes compartilhar produtos nas redes sociais. É possível definir os botões usando as configurações do tema.
  • Estilo de imagem: escolha se deseja adicionar um corte quadrado ou redondo às imagens do produto em destaque.

Adicionar uma seção de produto em destaque

  1. Clique em Adicionar seção. 2. Clique em Produto em destaque e, depois, em Selecionar. 3. Use as configurações para personalizar a seção do produto em destaque. 4. Clique em salvar.

Conteúdo personalizado

A seção Conteúdo personalizado permite o agrupamento de vários blocos de conteúdo. A largura e o alinhamento de cada bloco podem ser ajustados para criar um layout personalizado.

A seção Conteúdo personalizado apresenta as seguintes configurações:

  • Título: o título da seção.
  • Layout para dispositivo móvel: o layout dos blocos quando a loja é visualizada em um dispositivo móvel. Escolha entre estas opções: - Grade: os blocos com até 50% de largura aparecem na mesma linha. Contêineres acima de 50% de largura aparecem em uma linha individual.
    • Empilhado: cada bloco aparece em uma linha individual.
    • Deslizante: os blocos são recolhidos em uma única seção no estilo de apresentação de slides. Os clientes podem clicar nas setas de navegação para ver os blocos adicionais.

Os seguintes tipos de blocos estão disponíveis para você escolher.

Tipos de blocos de conteúdo personalizado
Tipo de bloco Configurações
Texto

Título: adicione um título ao bloco.

Texto: adicione e formate o texto personalizado.

Etiqueta de botão: adicione um botão com uma etiqueta de texto ao bloco.

Link de botão: adicione o texto a ser exibido no botão.

Tamanho do texto: defina o tamanho do texto.

Largura do contêiner: defina a largura do bloco.

Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Alinhamento horizontal: defina a posição horizontal do conteúdo no bloco.

Imagem

Imagem: adicione a imagem a ser exibida no bloco. Ela pode ser carregada por você ou selecionada entre as imagens gratuitas do Burst.

Largura do contêiner: defina a largura do bloco.

Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Produto

Produto: escolha um produto para destacar no bloco. O nome, a imagem e o preço do produto são exibidos. Caso não haja uma imagem, será mostrado o título do produto.

Largura do contêiner: defina a largura do bloco.

Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Quando a opção Exibir as páginas de produto em uma sobreposição está habilitada na página do produto, os produtos aparecem em uma camada sobreposta à página atual quando acessados nessa seção.

Coleção

Coleção: escolha uma coleção para destacar no bloco. O título da coleção e a imagem em destaque são exibidos. Caso não haja uma imagem em destaque, será mostrada a imagem do primeiro produto da coleção. Se os produtos da coleção não tiverem imagens, será apresentado o título da coleção.

Largura do contêiner: defina a largura do bloco.

Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Menu

Menu: selecione um menu para exibir no bloco.

Título: adicione um título ao menu.

Largura do contêiner: defina a largura do bloco.

Alinhamento vertical: defina a posição vertical do conteúdo no bloco.

Alinhamento horizontal: defina a posição horizontal do conteúdo no bloco.

Adicionar conteúdo personalizado à página inicial

  1. Clique em Adicionar seção.

  2. Clique em Conteúdo personalizado e em Selecionar.

  3. Selecione e configure os blocos de conteúdo que você quer incluir na seção.

  4. Clique em salvar.

Imagem com texto

Com o Express, é possível adicionar uma imagem com texto exibido à direita ou à esquerda da imagem. Você também pode adicionar um botão com link para outra página.

Você pode usar uma seção de imagem com texto para anunciar uma coleção ou produto específico.

A seção de imagem com texto apresenta as seguintes configurações:

  • Imagem: adicione a imagem a ser incluída na seção. É possível fazer o upload de uma imagem, usar uma carregada anteriormente ou selecionar uma imagem gratuita no banco do Burst.
  • Título: adicione o texto primário que estará junto da imagem.
  • Texto: adicione o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
  • Etiqueta de botão: adicione o texto que você quer exibir no botão.
  • Link de botão: defina a URL ou a página que você quer vincular ao botão. Cole a URL ou selecione uma página no menu. Se você não quiser incluir um botão na seção, deixe esse campo em branco.

Opções de layout

  • Computador: escolha se a imagem na seção aparecerá à esquerda ou à direita quando exibida em um computador. Para exibir a imagem à esquerda, selecione Imagem primeiro.
  • Dispositivo móvel: escolha se a imagem na seção aparecerá primeiro ou depois quando exibida em um dispositivo móvel.
  • Plano de fundo secundário: escolha se quer adicionar uma cor de fundo secundária à seção. Selecione Parcial para adicioná-la aos 60% superiores da seção. A cor pode ser modificada nas configurações do tema.
  • Tamanho do texto: selecione o tamanho relativo do título e do texto na seção.
  • Manter proporção da imagem - selecione esta opção para impedir que a imagem selecionada seja cortada. Se você deixar esta opção desmarcada, ela será cortada em um quadrado.
  • Habilitar cor de texto secundário: selecione esta opção para usar a cor de texto do plano de fundo secundário para o título e o texto. Esta cor pode ser modificada nas configurações do tema.

Adicionar uma seção de imagem com texto à página inicial

  1. Clique em Adicionar seção. 2. Clique em Imagem com texto e, depois, em Selecionar. 3. Na área Imagem, clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem que você já enviou para o admin da Shopify, clique na aba Biblioteca.
    • Para selecionar uma imagem do banco da Burst, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
    • Para selecionar uma imagem no computador local, clique na aba Biblioteca e, depois, em Carregar.
  2. Use as configurações para personalizar a seção. 5. Clique em salvar.

Pronto para começar a vender com a Shopify?

Experimente de graça