Seções para Express

As seções são blocos de conteúdo personalizáveis que determinam o layout de diferentes páginas da loja virtual.

Você pode adicionar, reorganizar ou remover até 25 seções por página para criar seu layout. Além disso, é possível editar o cabeçalho e o rodapé, que são seções fixas.

Também é possível usar seções para determinar a aparência de um elemento na loja. Por exemplo, a seção de páginas do produto determina a aparência de cada produto na loja virtual.

Saiba mais sobre a seleção exclusiva de seções do Express e aprender a personalizá-las para se adequarem a sua empresa.

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
  • 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. Ao lado de Express, clique em Personalizar.

  2. Clique em Cabeçalho.

  3. Na área Imagem do logotipo, clique em Selecionar imagem e execute uma das seguintes ações:

- Para selecionar uma imagem já carregada no admin da Shopify, clique na aba Biblioteca. - Para usar uma imagem gratuita do Burst, clique em Imagens gratuitas. - Para selecionar uma imagem de seu computador local, clique em Biblioteca > Carregar.

  1. Use o controle deslizante de Largura do logotipo personalizado para personalizar a largura do logotipo.

  2. Clique em Salvar.

Adicionar uma barra de comunicados

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Cabeçalho.

  3. Na área Barra de comunicados, marque Exibir comunicado.

  4. Digite o texto do comunicado no campo Texto.

    1. Opcional: no menu Ícone, selecione um ícone para exibir na barra de comunicados. O ícone usa a mesma cor do texto do comunicado.
  5. Para alterar a cor do plano de fundo da barra de avisos, clique na amostra de cor da barra e escolha uma cor.

  6. Para alterar a cor do texto do comunicado, clique na amostra de cor do texto e escolha uma cor.

  7. Clique em Salvar.

Habilitar pesquisa

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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Cabeçalho.

  3. Marque Exibir pesquisa.

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

A seção de rodapé de um site que exibe dois blocos de texto e uma assinatura da newsletter.

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. Ao lado de Express, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

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

  5. Clique em Salvar.

Adicionar um menu, uma assinatura da newsletter ou um texto

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Rodapé.

  3. 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é 4 blocos de conteúdo.

    Para mover um bloco de conteúdo, clique no ícone ⋮⋮ e arraste o bloco para outro local.

    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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Rodapé.

  3. Clique na seção Configurações do tema.

  4. No campo de redes sociais relevantes, insira a URL para seu perfil.

  5. Clique em Salvar.

Adicionar um seletor de idioma

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

  1. Ao lado de Express, clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

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

  5. Clique em Salvar.

Coleções em destaque

É possível exibir várias coleções em uma única seção na página inicial. Como o Express não inclui um menu no cabeçalho, as coleções em destaque, junto com os produtos em destaque, são a maneira mais simples de exibir produtos usando esse tema.

Em cada seção das coleções em destaque, é possível exibir várias coleções. Elas aparecem como abas pelas quais os compradores podem navegar.

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.

Adicionar uma seção de coleções em destaque

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções > Adicionar seção.

  2. Clique em Coleções em destaque e depois em Adicionar.

  3. Na lista suspensa Tamanho da lista de coleções, é possível escolher a quantidade padrão de produtos a serem exibidos. 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

  1. Na lista suspensa Estilo da imagem, selecione o estilo de corte das imagens dos produtos nas coleções. Essa configuração se aplica a todas as coleções na seção Coleções em destaque.

  2. Na área do conteúdo, selecione um bloco de Coleção ou clique em Adicionar coleção.

  3. Clique em Selecionar coleção.

  4. Na lista Coleção, selecione a coleção que deseja exibir na aba e clique em Selecionar.

    Para adicionar uma coleção, clique no link Adicionar coleção para abrir a página Criar coleção em uma nova aba.

    Para adicionar ou remover produtos da coleção selecionada, clique no link Editar coleção para abrir a página Coleções em uma nova aba.

  5. Repita as etapas de 5 a 7 para adicionar mais coleções à seção.

  6. Clique em Salvar.

Adicionar uma coleção a uma seção de coleções em destaque

  1. Ao lado de Express, clique em Personalizar.

  2. Clique em Seções.

  3. Selecione a seção de coleções em destaque que você deseja modificar.

  4. Na área do conteúdo, selecione um bloco de Coleção ou clique em Adicionar coleção.

  5. Clique em Selecionar coleção.

  6. Na lista Coleção, selecione a coleção que deseja exibir na aba e clique em Selecionar.

    Para adicionar uma coleção, clique no link Adicionar coleção para abrir a página Criar coleção em uma nova aba.

    Para adicionar ou remover produtos da coleção selecionada, clique no link Editar coleção para abrir a página Coleções em uma nova aba.

  7. Siga novamente as etapas de 3 a 5 para adicionar mais coleções à seção.

  8. 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 - selecione o produto que você deseja 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 - exiba os botões de compartilhamento em redes sociais na seção de produto em destaque.
  • 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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções > Adicionar seção.
  2. Clique em Produto em destaque e depois em Adicionar.
  3. Utilize as configurações para personalizar a seção de produto em destaque.
  4. Clique em Salvar.

Página de produto

Ao clicar num produto de uma coleção em destaque, o comprador vê a página desse produto com a descrição, o preço, as variantes e as imagens. Você decide se os usuários são direcionados a uma nova página ou se as informações do produto aparecem em uma sobreposição na página inicial. O cliente pode adicionar o produto ao carrinho diretamente da página.

A seção de páginas do 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 sobreposição na página inicial quando ele é selecionado numa coleção em destaque.
  • Exibir botões de compartilhamento em redes sociais - mostre botões que os compradores podem usar para compartilhar seus produtos nas redes sociais.

Editar as configurações da página do produto

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções.

  2. Clique em Páginas do produto.

  3. Use as configurações para personalizar a página do produto.

  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 - a imagem a ser incluída na seção. Você pode carregar uma imagem, usar uma carregada anteriormente ou selecionar uma imagem gratuita no banco do Burst.
  • Título - o texto primário que estará junto da imagem.
  • Texto - o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
  • Etiqueta de botão: o texto que você quer exibir no botão.
  • Link de botão: a URL ou a página à qual você quer vincular o 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

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal"><li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li><li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li><li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li></ul></div><div class="desktop active changeable-content"><ol>
<li>No admin da Shopify, acesse <strong>Loja virtual</strong> &gt; <strong>Temas</strong>.
</li></ol></div><div class="iphone changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div><div class="android changeable-content"><ol>
<li>No <a href="https://www.shopify.com/install/detect">app da Shopify</a>, toque em <strong>Loja</strong>.
</li><li>Na seção <strong>Canais de vendas</strong>, toque em <strong>Loja virtual</strong>.
</li><li>Toque em <strong>Gerenciar temas</strong>.
</li></ol></div>
</div>



1. Ao lado de **Express**, clique em **Personalizar**.
  1. Clique em Seções > Adicionar seção.
  2. Clique em Imagem com texto e em Adicionar.
  3. Na área Imagem, clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem já carregada no admin da Shopify, clique na aba Biblioteca.

    • Para usar uma imagem gratuita do Burst, clique em Imagens gratuitas.
    • Para selecionar uma imagem de seu computador local, clique em Biblioteca > Carregar.
  4. Use as configurações para personalizar a seção.

  5. Clique em Salvar.

Painel deslizante do carrinho

O Express apresenta um painel deslizante do carrinho que permite que os compradores visualizem rapidamente o conteúdo do carrinho e continuem comprando.

Com o Express, é possível permitir que seus clientes insiram instruções no pedido ao habilitar observações do pedido no painel deslizante do carrinho.

Habilitar observações do pedido no painel deslizante do carrinho

  1. Navegue até o painel deslizante do carrinho no editor de temas adicionando um produto ao carrinho.

  2. Clique na aba Seções.

  3. Clique na seção Página do carrinho.

  4. Marque Exibir observação do carrinho.

  5. Clique em Salvar.

Pronto para começar a vender com a Shopify?

Experimente de graça