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 seções para criar seu layout. Até 25 seções são permitidas na página, além de seções de cabeçalho e rodapé, que não podem ser removidas nem reorganizadas.

Também é possível usar seções para determinar a aparência de um elemento em sua loja. Por exemplo, a seção de páginas do produto determina a aparência de cada janela modal de 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

Você pode adicionar 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.

Adicione uma barra de anúncios no cabeçalho que pode ser usada para exibir uma mensagem a seus clientes. A mensagem é totalmente personalizada e pode incluir informações de contato, eventos ou vendas da loja, o slogan ou a mensagem de branding de sua loja.

Adicionar um logotipo personalizado

<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 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 Cabeçalho.

  2. 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 anúncios

<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 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 Cabeçalho.

  2. Na área da Barra de avisos, marque Mostrar anúncio.

  3. Digite o texto do anúncio no campo Texto.

  4. Opcional: no menu Ícone, selecione um ícone para exibir na barra de anúncios. O ícone usa a mesma cor do texto do anúncio.

  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 anúncio, clique na amostra de cor do texto e escolha uma cor.

Rodapé

Na seção de rodapé, edite o conteúdo exibido na parte inferior das páginas da loja. Adicione os seguintes recursos ao rodapé:

  • ícones de pagamento
  • links rápidos
  • uma assinatura da newsletter
  • Uma seção de texto com informações sobre sua empresa
  • ícones de redes sociais

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

Adicionar ícones de pagamento

Você pode exibir ícones para as formas de pagamento aceitas no rodapé. Esta área exibe os ícones associados ao provedor de pagamento que você habilitou na seção Configurações de pagamento do admin.

<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 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. Marque Ícones de pagamento.

  4. Clique em Salvar.

<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 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 até 4 blocos de conteúdo ao rodapé na área Conteúdo. Para adicionar um bloco de conteúdo, clique em Adicionar conteúdo. Selecione uma das seguintes opções de bloco de conteúdo:

- Links rápidos - Newsletter - Texto

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 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.

Coleções em destaque

Você pode destacar 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.

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 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. Esta 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. Esta 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 em sua página inicial. Destacar um produto é uma ótima maneira de promover um produto novo ou algo que está em promoção.

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 à imagem de seu 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 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.

Janela modal do produto

A janela modal do produto é exibida quando um comprador clica em um produto de uma coleção em destaque. Ela mostra a descrição, o preço e as variantes do produto. O comprador pode adicioná-lo ao carrinho diretamente na janela modal.

A seção de janela modal de 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 do produto na janela modal. Para exibir uma marca ou fornecedor, é preciso 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 os compradores podem usar para compartilhar seus produtos nas redes sociais.

Edite as configurações de janela modal 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 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 janela modal de seu 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 produto em destaque 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.
  • 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.
  • Título - o texto primário que estará junto da imagem.
  • Tamanho do texto - selecione o tamanho relativo do título e do texto na seção.
  • Texto - o texto secundário que estará junto da imagem. Ele é exibido abaixo do título.
  • Configurações - Plano de fundo secundário - selecione se deseja adicionar uma cor de fundo secundária à seção. Escolha Parcial para adicionar a cor de fundo aos três quintos superiores da seção. Esta cor pode ser modificada nas configurações do tema.

    • 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.
  • Alinhamento da imagem: - Computador - selecione se a imagem na seção aparece à esquerda ou à direita quando é exibida em um computador. Para exibir a imagem à esquerda, selecione Imagem primeiro.

    • Dispositivo móvel - selecione se a imagem na seção aparece na parte superior ou inferior quando é exibida em um dispositivo móvel.

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 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