Narrative

Narrative é um tema de boutique projetado para contar histórias visuais. O que torna o Narrative único é o que seu foco está no uso das imagens para contar uma história. Como padrão, a página inicial exibe uma apresentação de slides com largura total, uma imagem com texto e um vídeo. Esse layout proporciona um alto impacto visual e permite que você conte a história da sua marca sem o uso excessivo de texto.

Exemplo de loja virtual usando o Narrative

O tema Narrative é ideal se você deseja:

  • usar imagens e vídeos para contar a história da sua marca
  • compartilhar uma mensagem impactante sobre a visão, missão e valores da sua loja
  • destacar o design exclusivo de um determinado produto ou de um estoque pequeno.

Seções As seções são blocos personalizáveis de conteúdo que determinam o layout de sua loja virtual. Cada tema inclui seções estáticas e seções dinâmicas. ### Seções estáticas As seções estáticas estão sempre em locais específicos na sua loja virtual. Você pode editar seções estáticas, mas não pode reorganizá-las ou removê-las. Cada tipo de página na sua loja virtual inclui diferentes seções estáticas.

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

  • Cabeçalho
  • Apresentação de slides
  • Rodapé
  • Páginas de produtos
  • Páginas de Coleções
  • Página da lista de coleções
  • Blog
  • posts
  • Página do carrinho

Seções dinâmicas Você pode adicionar, reorganizar e remover seções dinâmicas para personalizar o layout da sua página inicial. Cada tema tem um conjunto exclusivo de seções dinâmicas para escolher.

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

  • Postagens no blog
  • Lista de coleções
  • Coleção em destaque
  • Galeria
  • Destaque
  • Imagem com texto
  • Imagem com sobreposição de texto
  • Produto em destaque
  • Newsletter
  • Mapa
  • Rich text
  • Depoimentos
  • Vídeo
  • Conteúdo personalizado
  • Controle deslizante para destaques

Cabeçalho

A seção Cabeçalho apresenta o conteúdo exibido na parte superior de todas as páginas da sua loja. O Narrative permite que você selecione dois menus de navegação que os clientes podem acessar clicando em um ícone de navegação:

Também é possível alterar a aparência do cabeçalho da loja, tornando-o transparente, para que ele use o mesmo fundo da seção abaixo dele:

Para personalizar a seção Cabeçalho:

  1. Clique na aba Seções.

  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 que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. No campo Altura personalizada do logotipo (em pixels), insira a altura em pixels do logotipo.

  2. Na lista Ícone do carrinho de compras , selecione se você deseja exibir o ícone de uma bolsa ou de um carrinho no cabeçalho.

  3. Se você desejar tornar transparente o cabeçalho de sua loja, siga os passos abaixo:

    1. Clique em Habilitar cabeçalho transparente na página inicial.
    2. Selecione a imagem a ser exibida sobre o fundo transparente. Talvez seja preciso selecionar um logotipo diferente do escolhido anteriormente para ser exibido no cabeçalho. Por exemplo, talvez você precise de um logotipo branco para usar contra um fundo escuro.
    3. Clique na paleta de cores Ícones para cabeçalho transparente e selecione uma cor para a imagem do logotipo e para os ícones de navegação e carrinho.
  4. Na lista Navegação primária , selecione o menu primário exibido quando o cliente clicar no ícone de navegação:

  5. Na lista Navegação secundária , selecione o menu secundário:

  6. Clique em Salvar.

Apresentação de slides

Na parte superior da página inicial do Narrative, há uma apresentação de slides em tela inteira na qual os clientes podem clicar e visualizar uma seleção de imagens e vídeos. É melhor usar imagens muito grandes. Por exemplo, use imagens de 4000 x 2200 px ou maiores, desde que você não exceda os limites de envio da Shopify. É possível escolher como os botões e os textos serão exibidos na apresentação, que comporta até cinco imagens e vídeos.

Para incentivar os clientes a clicar na apresentação de slides, esse tema exibe botões na parte inferior da apresentação. É possível inserir uma etiqueta própria nesses botões e criar um título para cada slide:

Para adicionar uma apresentação de slides:

  1. Clique em Seções.

  2. Clique em Apresentação de slides.

  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 da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem em seu computador local, clique na guia Biblioteca e, em seguida, clique em Fazer upload da imagem.

  1. No campo Etiquetas de botão , insira o texto que deve ser exibido nos botões da apresentação de slides.

  2. Para exibir uma sobreposição, que aplica um filtro de cor na apresentação de slides, selecione Exibir sobreposição.

  3. Clique na paleta de cores para selecionar uma Cor de sobreposição e uma Cor de texto.

  4. Na lista Opacidade , selecione um nível de transparência para a sobreposição de cor.

Para adicionar um slide de imagem:

  1. Na área Conteúdo , clique em Adicionar conteúdo.

  2. Clique em Slide de imagem.

  3. Na área Imagem , clique em Selecionar imagem e siga um destes procedimentos:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Na lista Alinhamento de imagem , selecione, entre as posições disponíveis, o alinhamento desejado para a imagem da apresentação de slides.

  2. No campo Título , insira um novo título para esse slide. Na apresentação de slides, o título aparece sobreposto à imagem.

  3. No campo Título do slide , insira o texto que será exibido como título do slide na parte inferior da apresentação.

  4. Para adicionar um link ao botão do slide, execute uma das ações a seguir:

- Para incluir um link para uma página da loja, clique no campo Link de botão e selecione uma página. - Para vincular o texto do título a uma URL, cole a URL no campo Link do botão.

  1. Clique em Salvar.

Para adicionar um slide de vídeo:

  1. Na área Conteúdo , clique em Adicionar conteúdo.

  2. Selecione Slide de vídeo.

  3. No campo Link do vídeo , insira o endereço da URL do vídeo.

  4. Para carregar uma imagem que será exibida se a reprodução automática não for compatível com o dispositivo móvel, na área Imagem , clique em Selecionar imagem e siga um destes procedimentos:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. No campo Título , insira o texto que deve ser sobreposto ao vídeo. O título é atualizado com o texto fornecido por você.

  2. No campo Título do slide , insira o texto que será exibido como título do slide na parte inferior da apresentação.

  3. Para adicionar um link ao botão do slide, execute uma das ações a seguir:

- Para incluir um link para uma página da loja, clique no campo Link de botão e selecione uma página. - Para vincular o texto do título a uma URL, cole a URL no campo Link do botão. - Clique em Salvar.

Rodapé

Na seção de rodapé, você pode editar o conteúdo exibido na parte inferior de todas as páginas da sua loja. Você pode adicionar os seguintes recursos ao seu rodapé:

  • ícones de redes sociais
  • ícones de pagamento
  • uma assinatura de newsletter
  • um efeito de rolagem Parallax
  • até dois menus

A seção de rodapé de um site que mostra um menu, uma assinatura de newsletter, texto de direitos autorais e ícones de pagamento.

Para personalizar a seção de rodapé:

  1. Encontre Narrative e clique em Personalizar.

  2. Clique em Seções.

  3. Clique em Rodapé.

  4. Adicione ícones de redes sociais ao seu rodapé marcando Exibir ícones de redes sociais. Você pode vincular os ícones às suas contas de redes sociais nas Configurações das redes sociais.

  5. Adicione ícones de pagamento, como Mastercard ou PayPal, ao seu rodapé, marcando Exibir ícones de pagamento.

  6. Para adicionar uma assinatura de newsletter ao seu rodapé, siga estas etapas:

    1. Marque Exibir assinatura de newsletter.
    2. Insira um título para a assinatura de newsletter no campo Título. O título padrão é "Assine para receber atualizações".
    3. Insira um subtítulo para a assinatura de newsletter no campo Subtítulo. O texto padrão é "Promoções, novos produtos e vendas. Diretamente em sua caixa de entrada."
  7. Para adicionar um menu ao seu rodapé, siga estas etapas:

    1. Clique em Adicionar menu.
    2. Para editar o menu padrão, clique em Editar menu. Para mudar para um menu diferente, clique em Alterar e, em seguida, selecione um menu existente ou clique em Criar menu.
  8. Clique em Salvar.

Páginas de produtos

Na seção Páginas de produto , você pode adicionar ou remover os seguintes elementos:

  • Um seletor de quantidade
  • Etiquetas de variantes
  • A marca ou fornecedor do produto
  • Imagens de variantes
  • Um botão de checkout dinâmico
  • Botões de compartilhamento em redes sociais

Para editar as configurações das páginas de produtos:

  1. No menu suspenso da barra superior, selecione Páginas de produto.

  2. Clique em Seções.

  3. Clique em Páginas de produtos.

  4. Para mostrar um seletor de quantidade, marque Exibir seletor de quantidade.

  5. Para mostrar as etiquetas das variantes, como "Tamanho" e "Cor", marque Exibir etiquetas das variantes. As etiquetas das variantes exibidas são baseadas nos nomes das opções das variantes do produto.

  6. Para mostrar a marca ou o fornecedor do produto, marque Exibir fornecedor do produto. Para uma marca ou fornecedor aparecer, você precisa adicionar um fornecedor ao produto.

  7. Para evitar que imagens de variantes sejam exibidas na galeria localizada na parte inferior da página, marque Ocultar imagens de variantes na galeria. Ao selecionar essa opção, as únicas imagens exibidas são aquelas que não estão vinculadas a uma variante.

  8. Para mostrar um botão de checkout dinâmico, marque Mostrar botão de checkout dinâmico.

  9. Para mostrar os botões de compartilhamento em redes sociais, marque Exibir botões de compartilhamento em redes sociais.

  10. Clique em Salvar.

Páginas de Coleções

É possível configurar as páginas de coleção para permitir que os clientes filtrem e ordenem os produtos em exibição. Além disso, você pode selecionar o número de produtos exibidos.

Para definir o layout das suas páginas de coleções:

  1. Navegue até uma página de coleção no editor de temas.

  2. Clique na aba Seções.

  3. Clique em Páginas de coleções.

  4. Nas listas, selecione o número de produtos por linha e o número de linhas por página.

  5. Se você vende produtos de diferentes marcas ou fornecedores, marque Exibir fornecedor do produto para exibir o nome abaixo da imagem do produto.

  6. Se desejar exibir uma imagem da coleção na parte superior da página, marque Exibir imagem da coleção.

  7. Marque Ativar filtragem de tags para permitir que seus clientes filtrem a coleção por tag de produto.

  8. Marque Habilitar classificação de coleção para exibir o menu de classificação.

  9. Clique em Salvar.

Página do carrinho

Você pode permitir que os clientes adicionem uma observação aos seus pedidos. Os clientes podem usar observações do carrinho para fornecer instruções especiais sobre como preparar ou entregar um pedido:

Um campo de texto identificado como

Quando o cliente escreve uma observação, ela é exibida na área de Observações do pedido no admin da Shopify.

Para adicionar um campo de observações à página do carrinho:

  1. Encontre Narrative e clique em Personalizar.

  2. No menu suspenso da barra superior, selecione Carrinho.

  3. Clique em Seções.

  4. Clique em Página do carrinho.

  5. Marque Ativar observações do carrinho.

  6. Clique em Salvar.

Coleção em destaque

Você pode destacar uma coleção na sua página inicial. Destacar coleções pode ajudar você a promover vendas e novas coleções.

Para adicionar uma coleção em destaque:

  1. Clique na aba Seções.

  2. Clique em Coleção em destaque.

  3. Na lista Coleção , selecione a coleção que deve ser exibida.

  4. Marque Habilitar espaçamento entre imagens para aumentar a distância entre as imagens.

  5. No campo Título , insira o texto que deve aparecer na parte superior dessa seção. Como padrão, o texto é "Coleção em destaque".

  6. Para exibir o nome do fornecedor ou da marca abaixo da imagem de cada produto, selecione Exibir fornecedor do produto.

  7. Para permitir que os clientes visualizem todos os produtos da coleção, marque Exibir botão "Visualizar tudo". Quando o cliente clicar nesse botão, a página da coleção é aberta com todos os produtos em exibição.

  8. Para que o botão Visualizar tudo seja transparente e com contorno sólido, marque Usar estilo de botão secundário.

  9. Na lista Produtos por linha , selecione o número de produtos a serem exibidos em cada linha.

  10. Na lista Linhas , selecione o número de linhas de produtos a serem exibidas.

  11. Clique em Salvar.

Galeria

A seção Galeria apresenta uma série de até três imagens. É possível selecionar um ícone de uma lista com 13 ícones personalizados para exibição sobreposta a cada uma das imagens. Como opção, é possível vincular cada imagem a uma página da loja ou URL.

A seção Galeria com três fotos de gatos lado a lado.

  1. Clique na aba Seções.

  2. Clique em Galeria.

  3. Na área Conteúdo , clique em Imagem.

  4. Para adicionar a imagem, na área Imagem , clique em Selecionar imagem e, em seguida, em uma das opções abaixo:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Na lista Alinhamento de imagem , selecione o alinhamento desejado para a imagem. Por exemplo, selecione "Superior-esquerdo" para colocar a imagem na área superior-esquerda da seção.

  2. Na lista Ícone , selecione um ícone para exibição sobreposto à imagem.

  3. No campo Legenda da área Texto , insira o texto que deve ser exibido em cada imagem.

  4. Para vincular uma legenda a uma página, siga os passos abaixo:

    1. Para vincular o texto a uma página da loja, clique no campo Link e selecione uma das páginas.
    2. Para vincular a um site, insira a URL do site no campo Link.
  5. Clique em Salvar.

Imagem com texto

O Narrative apresenta a seção Imagem com texto , que permite exibir uma imagem com uma mensagem personalizada para os clientes.

É possível cortar uma imagem em formato circular

ou quadrado:

Você também pode optar por não cortar a imagem. Em vez disso, selecione um alinhamento de imagem para garantir que partes importantes não sejam cortadas quando exibidas em dispositivos móveis. Por exemplo, se você deseja evitar que a parte inferior de sua imagem seja cortada, pois ela exibe o produto à venda, selecione o alinhamento Bottom center para garantir que aquela parte da imagem nunca seja cortada.

  1. Clique na aba Seções.

  2. Clique em Imagem com texto.

  3. Na lista Espaçamento de seção , selecione o tamanho desejado para a seção: Pequeno , Médio , Grande ou Extragrande.

  4. Se você deseja adicionar uma cor de fundo, clique na amostra de Cor de fundo e selecione uma das cores da paleta.

  5. Para adicionar a imagem, na área Imagem , clique em Selecionar imagem e, em seguida, em uma das opções abaixo:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Se você deseja cortar as imagens em um formato específico, selecione Circular ou Quadrado na lista Corte de imagem.

  2. Se você não deseja cortar as imagens em um formato específico, siga os passos abaixo:

    1. Na lista Corte de imagem , selecione Nenhum.
    2. Na lista Alinhamento de imagem , selecione o alinhamento desejado para a imagem. Por exemplo, selecione "Superior-esquerdo" para colocar a imagem na área superior-esquerda da seção.
  3. Para adicionar texto, siga os passos abaixo:

    1. No campo Título , digite o texto que deve ser exibido.
    2. No campo Texto , digite o texto que deve ser exibido abaixo do título.
    3. Se você deseja que o botão seja transparente e com contorno sólido, selecione Usar estilo de botão secundário.
    4. No campo Rótulo do botão , insira o texto que você deseja que apareça no botão.
    5. No campo Link de botão , cole um link para uma URL ou clique no campo para selecionar uma página da loja.

Para personalizar o layout:

  1. Na área Layout , na lista Layout para desktop , selecione se a imagem deve aparecer à esquerda ou à direita do texto quando for exibida em desktops.

  2. Na lista Layout para dispositivo móvel , selecione se a imagem deve aparecer acima ou abaixo do texto quando for exibida em um dispositivo móvel.

Imagem com sobreposição de texto

Na página inicial, é possível exibir uma mensagem personalizada. Descreva um produto, compartilhe um comunicado ou dê boas-vindas aos seus clientes.

Para personalizar a seção Imagem com sobreposição de texto:

  1. Clique na aba Seções.

  2. Clique em Imagem com sobreposição de texto.

  3. Na lista Espaçamento de seção , selecione o tamanho desejado para a seção: Pequeno , Médio , Grande ou Extragrande.

Para adicionar uma imagem de fundo

  1. Na área Imagem , clique em Selecionar imagem e siga um destes procedimentos:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Na lista Alinhamento de imagem , selecione o alinhamento desejado para a imagem. Por exemplo, selecione "Superior-esquerdo" para colocar a imagem na área superior-esquerda da seção.

Para adicionar o texto:

  1. No campo Título da área Texto , insira um título para essa seção.

  2. No campo Texto , insira o texto que deve ser exibido nessa seção.

  3. Na lista Tamanho de texto , escolha entre Médio e Grande.

Para adicionar um botão:

  1. Se você deseja que o botão seja transparente e com contorno sólido, selecione Usar estilo de botão secundário.

  2. No campo Rótulo do botão , insira o texto que você deseja que apareça no botão.

  3. No campo Link de botão , cole um link para uma URL ou clique no campo para selecionar uma página da loja.

Para aplicar uma sobreposição:

  1. Na área Sobreposição , marque Exibir sobreposição.

  2. Clique na amostra de Cor para sobreposição e selecione uma cor para sobrepor à imagem.

  3. Clique na amostra de Cor de texto para selecionar uma cor para o texto.

4. Na lista **Opacidade** , selecione um nível de transparência para a sobreposição de cor. ## Newsletter Você pode adicionar uma assinatura de newsletter à sua página inicial. Isso permite coletar endereços de e-mail de clientes para campanhas de [marketing por e-mail](/manual/create-marketing/customer-emails). Saiba mais sobre marketing por e-mail no [blog da Shopify](https://www.shopify.ca/blog/116351749-how-to-grow-your-ecommerce-business-with-email-marketing-a-detailed-guide). ![A seção de newsletter em um site. Há um campo para os clientes inserirem um endereço de e-mail e um botão que diz "Me increver".](/themes/narrative-newsletter-section.png) Para adicionar uma assinatura de newsletter à sua página inicial: 1. Encontre **Narrative** e clique em **Personalizar**. 1. Clique em **Seções**. 2. Clique em **Adicionar seção** > **Newsletter**. 3. Insira um título para a assinatura de newsletter no campo **Título**. O título padrão é "Assine nossa newsletter". 4. Insira um subtítulo para a assinatura de newsletter no campo **Subtítulo**. O texto padrão é "Promoções, novos produtos e vendas. Diretamente em sua caixa de entrada." 5. Insira uma mensagem de sucesso no campo **Mensagem de sucesso**. Os clientes verão a mensagem de sucesso depois que enviarem seu endereço de e-mail. A mensagem de sucesso padrão é "Obrigado por assinar". 6. Defina a cor do texto do campo de assinatura de newsletter clicando na amostra **Cor do texto** e escolhendo uma cor. 7. Defina a cor de fundo para a seção de assinatura de newsletter clicando na amostra **Cor de fundo** e escolhendo uma cor. 8. Clique em **Salvar**. ## Mapa É possível incluir um mapa na página inicial. Este recurso ajuda a promover a localização e o horário de funcionamento da sua loja. Para adicionar um mapa: 1. Clique na aba **Seções** e selecione **Adicionar seção**. 2. Clique em **Mapa**. 3. No campo **Título da sobreposição** , insira o texto que deve ser exibido na parte superior dessa seção. 4. No campo **Texto com endereço e horário** , insira as informações comerciais da sua empresa. 5. No campo **Endereço do mapa** , insira o endereço da empresa. 6. No campo **Chave da API do Google Maps** , insira uma [chave da API válida](/manual/using-themes/change-the-layout/theme-settings/map-section-api-key). 7. No campo **Imagem** , envie ou selecione a imagem que deve ser exibida se houver um problema com o carregamento da seção do mapa. ## Vídeo Você pode adicionar um vídeo hospedado no YouTube ou no Vimeo à sua página inicial. Os vídeos podem envolver seus clientes e gerar interesse em seus negócios. Para adicionar um vídeo à sua página inicial: 1. Encontre **Narrative** e clique em **Personalizar**. 1. Clique em **Seções**. 2. Clique em **Adicionar seção** > **Vídeo**. 3. Insira um título para o vídeo no campo **Título**. O texto do título permanece em exibição no vídeo até que você clique no botão de reprodução. 4. Insira o link de compartilhamento para o vídeo no campo **Link para o vídeo**. Os links de compartilhamento do YouTube são como este: `https://youtu.be/OTJXAUZY9t0`. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do YouTube neste [artigo da Ajuda do YouTube](https://support.google.com/youtube/answer/57741?hl=en&co=GENIE.Platform%3DDesktop). Os links de compartilhamento do Vimeo são como este: `https://vimeo.com/281332510`. Você pode obter informações sobre como copiar o link de compartilhamento para um vídeo do Vimeo neste [artigo do Centro de Ajuda do Vimeo](https://help.vimeo.com/hc/en-us/articles/115014756727-Publishing-to-social). 5. Opcional: adicione uma imagem de capa ao seu vídeo: 1. Clique em **Selecionar imagem**. Para enviar de uma imagem do seu computador, clique em **Enviar**. Para usar uma imagem de arquivo gratuita do [Burst](https://burst.shopify.com/), clique em **Imagens gratuitas**. 2. Escolha como você deseja alinhar a imagem de capa selecionando uma posição no menu suspenso **Posição da imagem**. Você pode usar o posicionamento de imagem para escolher qual parte da imagem deseja manter em exibição quando ocorrer o recorte. 6. Opcional: adicione uma sobreposição ao seu vídeo: > Dica: sobreposição é uma camada de cor entre o vídeo e o texto do título. A sobreposição deixa o texto sobre o vídeo mais legível e permanece em exibição até que você clique no botão de reprodução. 1. Marque **Mostrar sobreposição**. 2. Defina a cor de sobreposição clicando na amostra de **Sobreposição** e escolhendo uma cor. 3. Defina a cor do texto clicando na amostra do **Texto** e escolhendo uma cor. 4. Defina a opacidade da sobreposição selecionado uma porcentagem no controle deslizante **Opacidade**. 7. Clique em **Salvar**. ## Controle deslizante para destaques O controle deslizante em destaque permite a exibição de mais informações sobre produtos sem que o cliente tenha que deixar a página inicial.
É possível apresentar recursos de produtos, uma nova coleção ou variantes de um produto específico. A apresentação funciona melhor com um número pequeno de slides, já que a rolagem da página fica bloqueada durante a navegação do conjunto em desktops. Para ser aberto ou visualizado em dispositivos móveis, o controle deslizante em destaque requer um toque ou gesto de pinça. Para que os clientes em dispositivo móveis abram o controle, use uma imagem de capa chamativa e textos que "incentivem a tomada de ação". É possível adicionar até cinco slides ao controle deslizante em destaque. ### Para personalizar o controle deslizante em destaque: 1. Clique na aba **Seções**. 2. Clique em **Controle deslizante em destaque**. ### Para adicionar um slide de imagem: 1. Na área **Conteúdo** , clique em **Slide**. 2. Clique na amostra de **Cor de fundo** para selecionar uma cor da paleta. 3. Na área **Imagem** , clique em **Selecionar imagem** e siga um destes procedimentos: - Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba **Biblioteca**. - Para selecionar uma imagem da [Coleção de imagens de acervo Burst da Shopify](https://burst.shopify.com/), clique na aba **Imagens gratuitas**. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba **Biblioteca** e, em seguida, no sinal de mais. 4. No campo **Título** , digite o texto que deve ser exibido sobreposto ao slide. 5. No campo **Etiqueta de botão** , digite o texto que deve aparecer no botão. 6. No campo **Link de botão** , cole um link para uma URL ou clique no campo para selecionar uma página da loja. ### Para personalizar as configurações do controle deslizante em destaque:
  1. Para que os botões do slide sejam transparentes e com contorno sólido, marque Usar estilo de botão secundário.

  2. Para alterar a cor do texto, clique a amostra de Cor do título do slide e selecione uma das cores da paleta.

  3. Na área Configurações de capa , escolha a capa da seção do controle deslizante em destaque clicando em Selecionar imagem e seguindo os passos abaixo:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Na lista Cabeçalho , insira o texto que deve aparecer na imagem de capa.

  2. Na lista Posição do título , selecione se o texto deve ser exibido à esquerda ou no centro da imagem de capa. Esta configuração só se aplica à visualização em desktops.

  3. Na área Sobreposição , marque Exibir sobreposição.

  4. Clique na amostra de Cor para sobreposição e selecione uma cor para sobrepor à imagem.

  5. Clique na amostra de Cor de texto para selecionar uma cor.

  6. Na lista Opacidade , selecione um nível de transparência para a sobreposição de cor.

  7. Clique em Salvar.

O Narrative inclui as seguintes configurações de tema:

  • Cores
  • Tipografia
  • Painel deslizante do carrinho
  • Redes sociais
  • Favicon
  • Checkout

Cores

Você pode escolher as cores para as diferentes partes de sua loja virtual.

Etapas:

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Cores.

  4. Para cada tipo de conteúdo, clique na amostra de cor para usar o seletor de cores:

    O seletor de cores no editor de temas

- A área Selecionadas recentemente mostra as cores que você selecionou recentemente para o seu tema. - A área Em uso mostra as cores que você está usando no momento em outras partes do seu tema.

Para definir a cor como transparente, clique em Nenhum.

  1. Clique em Salvar.

Tipografia

Você pode escolher a tipografia para o texto em sua loja virtual.

Etapas:

  1. Ao lado de **, clique em **Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Tipografia.

  4. Para cada tipo de texto, clique em Alterar para usar o seletor de fontes:

    O botão 'Alterar' no seletor de fontes

  5. Explore as fontes usando o campo de pesquisa ou clicando em Carregar mais.

    Para ver todas as fontes disponíveis, consulte a biblioteca de fontes da Shopify.

  6. Clique no nome da fonte que você deseja usar.

  7. Para alterar a fonte para um estilo diferente, como negrito ou itálico, clique em Regular. Em seguida, clique no estilo que você deseja usar e, em seguida, clique em Selecionar :

    Uma seleção de pesos de fonte disponíveis no seletor de fontes

  8. Clique em Salvar.

Painel deslizante do carrinho

Você pode personalizar as configurações da caixa registradora do carrinho da sua loja virtual:

  • Configure o seu carrinho no estilo de caixa registradora. A caixa registradora do carrinho desliza do lado direito da página indicando que os clientes podem adicionar produtos ao carrinho sem sair da página do produto.
  • Permita que os clientes adicionem observações aos seus pedidos. Os clientes podem usar observações do carrinho para fornecer instruções especiais sobre como preparar ou entregar um pedido:

Um campo de texto identificado como

Para personalizar as configurações da caixa registradora do carrinho:

  1. Encontre Narrative e clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Caixa registradora do carrinho.

  4. Configure o seu carrinho no estilo de caixa registradora selecionando a opção Mostrar caixa registradora do carrinho. Se você deixar essa caixa desmarcada, será usado um carrinho de página inteira.

  5. Adicione um campo de notas à sua caixa registradora do carrinho selecionando a opção Apresentar observação do carrinho.

  6. Clique em Salvar.

Redes sociais

Você pode adicionar botões de compartilhamento social para seus produtos e postagens de blog e links para suas contas de mídias sociais.

Para personalizar as configurações de mídias sociais:

  1. Encontre Narrative e clique em Personalizar.

  2. Clique em Configurações do tema.

  3. Clique em Redes sociais.

  4. Para enviar uma imagem de compartilhamento social, na área de imagem de compartilhamento social , clique em Selecionar imagem ou Explorar imagens gratuitas.

  5. Para adicionar botões de compartilhamento social aos seus produtos e postagens de blog, na área de compartilhamento social , marque uma ou todas as caixas de seleção.

    Você pode adicionar os seguintes botões de compartilhamento:

- Compartilhar no Facebook - Tweetar - Fixar no Pinterest (não disponível para postagem no blog)

  1. Para adicionar links às suas contas de mídia social, na área Contas , insira os links para suas contas nos campos fornecidos. Insira os links completos, como https://instagram.com/shopify ou https://twitter.com/shopify.

    Os links para suas contas de mídias sociais são exibidos no rodapé de sua loja virtual.

  2. Clique em Salvar.

Obs.: Para mostrar botões de compartilhamento social em páginas de produtos e postagens de blog, você também precisa ativar os botões nas seções dessas páginas.

Favicon

É possível carregar um ícone de favoritos ou "favicon", ampliando a visibilidade da sua marca ao exibir o logotipo da loja virtual nos seguintes locais:

  • na aba do navegador da Web
  • no histórico do navegador da Web
  • nos ícones da área de trabalho
  • ao lado do nome da loja virtual após inclusão nos favoritos.

O melhor tamanho de imagem para o favicon no Narrative é 32 x 32 pixels.

Para enviar um favicon:

  1. Clique em Personalizar.

  2. Clique na guia Configurações do tema.

  3. Clique em Favicon.

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

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Clique em Salvar.

Checkout

É possível personalizar a sua página de finalização de pedido para incluir o seguinte:

  • um banner com imagem personalizada na parte superior da página
  • o logotipo da sua loja
  • uma imagem de fundo ou cor na área principal de conteúdo
  • fontes de texto e cores personalizadas.

Para ver suas alterações à medida que você as aplica, vá para a sua página de checkout no editor de temas.

Para acessar as configurações da página de checkout:

  1. Clique em Personalizar.

  2. Clique na guia Configurações do tema.

  3. Clique em Checkout.

Para adicionar uma imagem de banner:

  • Na área do Banner , clique em Selecionar imagem e, em seguida, escolha um desses caminhos: - Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca.
    • Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
    • Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

Para adicionar um logotipo:

  1. Na área Logotipo , clique em Selecionar imagem e siga um destes procedimentos:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.

  1. Na lista Posição , selecione onde deseja que a imagem seja exibida - direita, esquerda ou centro.

  2. Na lista Tamanho do logotipo , selecione um tamanho de logotipo.

Para alterar o plano de fundo da página de checkout:

Exiba uma imagem de fundo na página de checkout ou escolha uma cor de fundo. As imagens de fundo serão exibidas em um padrão de grade.

  1. Na área Conteúdo principal , clique em Selecionar imagem e, em seguida, execute uma das seguintes ações:

- Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca. - Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem. - Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais. - Clique na amostra de Cor de fundo para selecionar uma nova cor em uma paleta.

  1. Na lista Campos de formulário , selecione se os campos serão brancos ou transparentes.

Para alterar o plano de fundo da página de Resumo do pedido:

  1. Na área Imagem , clique em Selecionar imagem e siga um destes procedimentos: - Para selecionar uma imagem que você já tenha carregado para o admin da Shopify, clique na aba Biblioteca.
    • Para selecionar uma imagem da Coleção de imagens de acervo Burst da Shopify, clique na aba Imagens gratuitas. Lá é possível inserir um termo para pesquisa ou navegar por categorias de imagem.
    • Para selecionar uma imagem de seu computador local, clique na aba Biblioteca e, em seguida, no sinal de mais.
    • Clique na amostra de Cor de fundo para selecionar uma nova cor em uma paleta.

Para definir opções de fonte:

  • Em Tipografia , selecione a fonte a ser usada para o título e o corpo do texto nas listas.

Para definir opções de cores:

  • Na área Cores , clique nas amostras de cores Destaques , Botões ou Erros para escolher uma nova cor em uma paleta.

Alterar estilo do tema

Você pode redefinir as configurações gerais do seu tema para os valores padrão. Quando você redefine o estilo do seu tema, todas as alterações feitas na guia Configurações gerais serão perdidas, mas você não perderá conteúdo, como texto e imagens.

  1. Clique na guia Configurações gerais.

  2. Clique em Alterar estilo do tema.

  3. Clique no botão abaixo de Alterar o estilo do tema. O nome desse botão geralmente é o nome do tema.

  4. Clique em Alterar estilo.

Pronto(a) para começar a vender com a Shopify?

Experimente de graça