Ajuda
Fazer login

Uso do editor de rich text para conteúdo

Use o editor de rich text da Shopify para formatar e estilizar o conteúdo exibido na sua loja virtual.

Nesta página

Onde usar o editor de rich text

É possível usar o editor de rich text para adicionar ou editar texto em vários locais da loja:

Se você usa um tema compatível, pode adicionar seções de rich text às páginas ou aos modelos com o Editor de temas.

Adicionar conteúdo HTML com o editor de rich text

É possível inserir conteúdo HTML em posts do blog, páginas, descrições de produtos e descrições de coleções com o editor de rich text.

Clique no botão Editar código para ver o código HTML do conteúdo no editor de rich text.

Na visualização de HTML, é possível fazer várias alterações no conteúdo do editor de rich text. Adicione imagens, vídeos ou tabelas usando HTML e depure ou ajuste o layout e o estilo do conteúdo.

Incorporar um widget de mídia

Se quiser incorporar um widget de vídeo ou música, primeiro você precisa hospedá-lo em um serviço como Youtube, Vimeo ou SoundCloud. Esses serviços geram um código de incorporação, que pode ser copiado e colado no editor de rich text do admin da Shopify.

Etapas:

  1. Encontre o código de incorporação da mídia que você quer incorporar.
  2. Selecione todo o código de incorporação clicando nele e pressionando Ctrl + A em um PC ou Command + A em um Mac.
  3. Copie o código de incorporação pressionando Ctrl + C em um PC ou Command + C em um Mac.
  4. No admin da Shopify, clique no botão Exibir HTML no editor de rich text do conteúdo que você está editando.
  5. Cole o código de incorporação pressionando Ctrl + V em um PC ou Command + V em um Mac.
  6. Clique em Salvar.

Formatar texto com o editor de rich text

Com o botão Formatação, é possível criar parágrafos, cabeçalhos ou citações em bloco rapidamente. Usar a formatação e os níveis de cabeçalho corretos ajuda as pessoas e os mecanismos de pesquisa a ler o conteúdo do seu site.

Para escolher um formato para o texto, realce-o e clique no botão Formatação.

Opções de formatação

  • Parágrafo

    A maior parte do conteúdo de texto do site é de parágrafos. O texto do parágrafo costuma ter uma fonte de 10 a 12 pt, mas alguns temas usam tamanhos de fonte diferentes.

  • Cabeçalho (1-6)

    Os cabeçalhos são usados para estruturar o conteúdo. Existem 6 níveis de cabeçalho. O Cabeçalho 1 é o nível mais importante, e o Cabeçalho 6 é o menos importante.

  • Citação em bloco

    Uma citação em bloco é usada para exibir um texto atribuído a outra pessoa, como uma citação ou um trecho de um livro ou site.

Texto em negrito

Para deixar o texto em negrito, realce-o e clique no botão Negrito.

Texto em itálico

Para deixar o texto em itálico, realce-o e clique no botão Itálico.

Sublinhar texto

Para sublinhar o texto, realce-o e clique no botão Sublinhado.

Criar uma lista com marcadores

Para criar uma lista com marcadores, clique no botão Lista com marcadores.

Digite para criar o primeiro item da lista com marcadores. Para criar novos itens na lista, pressione a tecla Enter ou Return. Para concluir a lista, pressione a tecla Enter ou Return duas vezes.

Criar uma lista numerada

Para criar uma lista numerada, clique no botão Lista numerada.

Digite para criar os primeiros itens da lista numerada. Para criar novos itens na lista, pressione a tecla Enter ou Return. Para concluir a lista, pressione a tecla Enter ou Return duas vezes.

Recuar texto

Recuar um parágrafo adiciona uma margem no lado esquerdo. Para recuar um parágrafo, clique no botão Recuar.

Avançar recuo do texto

Avançar o recuo de um parágrafo remove todas as margens recuadas que ele tiver. Para avançar o recuo de um parágrafo, clique no botão Avançar recuo.

Alinhar texto

Para alinhar o texto, selecione-o, clique no botão Alinhamento e escolha Alinhar à esquerda, Centralizar ou Alinhar à direita.

Alterar a cor do texto

  1. Destaque o texto e clique no botão Cor.
  2. Clique em uma cor ou insira um código hexadecimal para alterar a cor do texto destacado.

Alterar a cor do plano de fundo do texto

  1. Destaque o texto e clique no botão Cor.
  2. Clique na aba Plano de fundo.
  3. Clique em uma cor ou insira um código hexadecimal para alterar a cor do plano de fundo do texto destacado.

Limpar formatação no editor de rich text

Para remover a formatação de texto ou imagens, destaque o conteúdo e clique no botão Limpar formatação.

Inserir tabelas com o editor de rich text

É possível inserir tabelas em posts do blog, páginas, descrições de produtos e de coleções com o editor de rich text. Depois de criar uma tabela, é possível inserir texto, imagens ou até mesmo vídeos nela.

Etapas:

  1. No editor de rich text, clique no botão Inserir tabela.
  2. Clique em Inserir tabela para inserir uma tabela. Essa ação cria uma tabela com uma linha e uma coluna.

Depois de criar a tabela, clique novamente no botão Inserir tabela para modificar as linhas e colunas:

  • Inserir linha acima: posicione o cursor em uma linha e clique neste botão para inserir uma nova linha acima.
  • Inserir linha abaixo: posicione o cursor em uma linha e clique neste botão para inserir uma nova linha abaixo.
  • Inserir coluna antes: posicione o cursor em uma coluna e clique neste botão para inserir uma nova coluna antes dela.
  • Inserir coluna depois: posicione o cursor em uma coluna e clique neste botão para inserir uma nova coluna depois dela.
  • Excluir linha: posicione o cursor na linha que você quer excluir e clique neste botão.
  • Excluir coluna: posicione o cursor na coluna que você quer excluir e clique neste botão.
  • Excluir tabela: posicione o cursor em qualquer lugar da tabela e clique neste botão para excluir a tabela inteira.

Inserir links com o editor de rich text

É possível inserir links (hiperlinks) em posts do blog, páginas, descrições de produtos e de coleções com o editor de rich text. Adicione links que direcionam os clientes para páginas da sua loja virtual da Shopify e para outros sites. Também é possível adicionar links que abrem e-mails ou fazem chamadas telefônicas para ajudar os clientes a entrar em contato com você.

Etapas:

  1. Destaque o texto ou a imagem que você quer transformar em um link.
  2. Clique em Inserir link.
  3. Insira o URL de destino do link no Link para campo:
    • Para criar um link para um site externo (fora da sua loja na Shopify), insira https:// seguido do endereço da web, por exemplo, https://www.example.com.
    • Para criar um link para uma página em sua loja virtual da Shopify, insira o URL curto, por exemplo, /collections/summer-collection.
    • Para criar um link que abre um e-mail, insira mailto: seguido do endereço de e-mail, por exemplo, mailto:example@example.com.
    • Para criar um link que faz uma chamada telefônica, insira tel: seguido do número de telefone, por exemplo, tel:+0-123-456-7890.
  4. Insira uma breve descrição do link na caixa Título do link.
  5. Escolha como o link será aberto no Abrir este link em menu:
    • na mesma janela: o link será aberto na aba ou janela atual do navegador.
    • em uma nova janela: o link será aberto em uma nova aba ou janela do navegador.
  6. Clique em Inserir link para converter o texto destacado em um link.

Adicionar links internos e externos com o editor de rich text

Os links para páginas da sua loja na Shopify são chamados de links internos. É possível usar URLs curtos para criar links internos. Por exemplo, o URL /collections levará à página de coleções da loja.

Para criar um link para uma página específica da loja virtual, como uma de coleção ou de produto, use o formato de URL /tipo-de-página/identificador-da-página. Por exemplo, para criar um link para uma coleção chamada Coleção de verão, use o URL /collections/summer-collection.

Links para sites fora da sua loja na Shopify são chamados de links externos. Os links externos precisam ser inseridos por completo e começar com http://.

Depois de fazer upload de um arquivo, é possível vinculá-lo ao conteúdo no editor de rich text para disponibilizá-lo para download na descrição de um produto ou de uma coleção, em uma página da web ou em um post do blog.

Etapas:

Desktop

  1. No admin da Shopify, acesse Conteúdo > Arquivos.

  2. Copie o URL do arquivo ao qual você quer vincular.

  3. No admin da Shopify, clique no produto, na coleção, na página da web ou no post do blog em que você quer adicionar o arquivo.

  4. No editor de rich text, insira ou escolha o texto do link.

  5. Selecione o texto do link.

  6. Clique em Inserir link

  7. No campo Vincular a, cole o URL do arquivo que você quer vincular.

  8. Clique em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.

Dispositivo móvel

  1. No app da Shopify, toque no ícone Menu.

  2. No menu Conteúdo, toque no ícone seta para baixo e depois em Arquivos.

  3. Copie o URL do arquivo ao qual você quer vincular.

  4. No admin da Shopify, toque no produto, na coleção, na página da web ou no post do blog em que você quer adicionar o arquivo.

  5. No editor de rich text, insira ou escolha o texto do link.

  6. Selecione o texto do link.

  7. Toque em Inserir link

  8. No campo Vincular a, cole o URL do arquivo que você quer vincular.

  9. Toque em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.

Inserir imagens com o editor de rich text

Existem três maneiras de inserir uma imagem com o editor de rich text. É possível:

Fazer upload de imagens

Etapas:

  1. No editor de rich text, clique no botão Inserir imagem.

  2. Na caixa de diálogo Inserir imagem, clique na aba Imagens carregadas.

  3. Clique em Fazer upload de arquivo.

  4. Escolha um arquivo de imagem WebP, HEIC, SVG, GIF, JPEG ou PNG no computador.

  5. Clique na imagem da qual você fez o upload para selecioná-la.

  6. No menu Tamanho, selecione o tamanho de exibição da imagem. Selecione Original para inserir a imagem sem alterar o tamanho de exibição.

  7. Clique em Inserir imagem para inserir a imagem no editor de rich text.

Escolha a partir de imagens do produto

Etapas:

  1. No editor de rich text, clique no botão Inserir imagem.

  2. Na caixa de diálogo Inserir imagem, clique na aba Imagens do produto.

  3. Clique na imagem que você quer inserir. Caso não encontre a mídia do produto que quer inserir, use os botões de seta para navegar por páginas diferentes.

  4. No menu Tamanho, selecione o tamanho de exibição da imagem. Selecione Original para inserir a imagem sem alterar o tamanho de exibição.

  1. Clique em Inserir imagem para inserir a imagem do produto no editor de rich text.

Usar um URL de imagem

Para inserir uma imagem usando um URL público:

  1. No editor de rich text, clique no botão Inserir imagem.
  2. Na caixa de diálogo Inserir imagem, clique na aba URL.
  3. Insira o URL acessível publicamente do arquivo de imagem.
  4. Clique em Inserir imagem para inserir a imagem no editor de rich text em seu tamanho original.

Mover e redimensionar uma imagem no editor de rich text

Depois de adicionar uma imagem a uma descrição de produto ou coleção, página da web ou blog, é possível movê-la para outro local no conteúdo.

Etapas:

  1. No admin da Shopify, clique no produto, na coleção, na página da web ou no post do blog que inclui a imagem que você quer mover ou redimensionar.
  2. No editor de rich text, clique na imagem.
  3. Siga um destes procedimentos:
    • Para mover a imagem, clique e arraste-a para outro local no campo Conteúdo.
    • Para redimensionar a imagem, clique e arraste um dos cantos.
  4. Clique em Salvar.

Editar uma imagem no editor de rich text

Você pode alterar o tamanho, o ajuste de texto e o alinhamento de uma imagem no editor de rich text. Também é possível editar o URL da imagem ou adicionar ou editar o texto alternativo da imagem.

Etapas:

  1. Dê um clique duplo na imagem no editor de rich text para abrir a caixa de diálogo Editar imagem.
  2. Use as opções de tamanho e alinhamento para editar a imagem:
    • Para alterar o tamanho da imagem, selecione uma opção de tamanho.
    • Para melhorar o SEO e a acessibilidade da loja virtual, adicione ou edite o texto alternativo da imagem.
    • Para adicionar espaçamento, insira o número de pixels de espaço que você quer em cada lado.
    • Para alterar o alinhamento da imagem, selecione um dos ícones que representam alinhamento à esquerda, ao centro ou à direita.
    • Para adicionar ajuste de texto, marque Ajustar texto ao redor da imagem.
  3. Clique em Editar imagem para salvar as alterações.

Inserir vídeos com o editor de rich text

É possível inserir ou incorporar vídeos em posts do blog, páginas, descrições de produtos e descrições de coleções com o editor de rich text.

Para incorporar um vídeo que você criou, primeiro é preciso fazer o upload dele em um site de streaming de vídeo, como o YouTube ou o Vimeo.

O YouTube não permite desativar os vídeos relacionados, mas é possível especificar que eles sejam do mesmo canal do vídeo que acabou de ser reproduzido.

Etapas:

  1. Copie o URL do vídeo pressionando ctrl + C em um PC ou command + C em um Mac.
  1. Acesse o Embed Responsively, uma ferramenta que gera um código de incorporação aprimorado para o vídeo.
  1. No Embed Responsively, clique para selecionar o site em que o vídeo está.
  2. Cole a URL do vídeo copiada na caixa Page URL do Embed Responsively pressionando ctrl + V em um PC ou command + V em um Mac.
  3. Clique em Embed. O Embed Responsively criará o código de incorporação.
  4. Se o vídeo for do YouTube e você quiser exibir apenas vídeos relacionados do mesmo canal, encontre a URL do vídeo no código de incorporação. Copie e cole ?rel=0 no final, dentro das aspas.
  5. Copie todo o código da caixa Embed code.
  6. No admin da Shopify, clique no botão Inserir vídeo no editor de rich text.
  7. Cole o código de incorporação na caixa de diálogo Inserir vídeo.
  8. Clique em Inserir vídeo.
  9. Quando terminar, clique em Salvar para salvar as alterações no item que estava editando.

Inserir arquivos de áudio com o editor de rich text

Use o editor de rich text para inserir ou incorporar arquivos de áudio em posts de blog, páginas e descrições de produtos e de coleções.

Etapas:

  1. No admin da Shopify, acesse Conteúdo > Arquivos.

  2. Clique em Fazer upload de arquivos para fazer o upload do arquivo de áudio que deseja inserir ou incorporar na loja.

  3. Na seção Loja virtual, abra o editor de rich text da página ou do post do blog em que você quer exibir o arquivo de áudio.

  4. Copie <div id="player"><audio controls="controls"> e cole o código no editor de rich text para incorporar um player de áudio na página.

  5. Copie o seguinte código:

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. Cole este código no editor de rich text depois do código do player de áudio e substitua https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 pela URL criada para o arquivo de áudio ao fazer o upload para a Shopify. A URL do arquivo de áudio pode ser encontrada a qualquer momento na página Arquivos.
  2. Clique em Salvar.
  3. Clique em Visualizar para conferir se o arquivo de áudio é reproduzido corretamente.

Adicionar ou remover comentários internos no editor de rich text

Use as tags de comentário <!-- e --> para textos internos que você não quer publicar na loja.

Etapas:

  1. No editor de rich text, clique no botão Exibir HTML.
  2. Para adicionar um comentário interno, coloque o texto que deseja manter oculto entre <!-- e -->. Por exemplo: <!--seu texto-->.
  3. Clique em Salvar.

As tags HTML inseridas entre as tags de comentário são salvas como texto interno. Para que essas tags HTML funcionem corretamente, é preciso remover as tags de comentário <!-- e -->.

Informações sobre o editor de rich text

O editor de rich text é integrado ao TinyMCE, uma rede de distribuição de conteúdo (CDN) de terceiros. Essa integração tem algumas implicações importantes:

  • Limite de conteúdo: há um limite estrito de 64 kB para o conteúdo inserido no editor de rich text. Isso se aplica a Páginas, Posts do blog e scripts adicionais.
  • Limpeza de HTML: o TinyMCE tem uma lógica de filtragem de conteúdo que corrige automaticamente a formatação HTML para evitar o mau funcionamento da vitrine virtual e riscos à segurança. Embora seja possível editar o HTML manualmente para restaurar o formato original, recomendamos trabalhar com essas alterações automáticas para evitar possíveis problemas.

Solução de problemas do editor de rich text

Caso tenha problemas com o editor de rich text, analise as etapas de solução e os problemas comuns a seguir.

Problemas de formatação com conteúdo copiado

O texto sempre herda a formatação do editor ou da página da web de origem. Se você escrever conteúdo no Microsoft Word e depois o copiar e colar no editor de rich text, ele manterá a mesma cor, tamanho, recuo e espaçamento, incluindo as tags <div>.

Sempre que possível, edite e formate o conteúdo diretamente no editor de rich text.

Para layouts de página mais complexos, considere usar apps de construtor de páginas como o Shogun Drag & Drop Page Builder.

Identificar problemas de formatação

A causa mais comum de problemas no editor de rich text é a aplicação de formatação ou estilo incorporado transferido quando um conteúdo é copiado e colado de outra fonte.

Isso pode ocorrer de diferentes maneiras, mas costuma ser a causa de qualquer discrepância entre o que é exibido no admin da Shopify e o que é exibido na loja ativa. Isso inclui informações não atualizadas ou a exibição de estilo diferente.

Solucionar problemas de formatação

Há duas maneiras de testar se a causa do problema são questões de formatação: usar o botão Limpar formatação ou passar o conteúdo do editor de rich text em um removedor de HTML.

Para testar, crie uma cópia do produto ou da página em que o problema ocorre e realize um dos testes a seguir na cópia.

Teste 1: limpar formatação

  1. Selecione todo o conteúdo no editor de rich text.
  2. Clique no botão Limpar formatação.
  3. Clique em Salvar e teste.

Teste 2: removedor de HTML

  1. Copie todo o conteúdo do editor de rich text.
  2. Cole-o em um removedor de HTML, como o striphtml.com.
  3. Copie todo o conteúdo limpo.
  4. Cole o conteúdo de volta no editor de rich text para substituir o original.
  5. Clique em Salvar e teste.

Se uma dessas etapas resolver o problema, significa que ele é causado pela formatação transferida quando o conteúdo foi adicionado ao editor de rich text. Use os mesmos métodos para corrigir o conteúdo original.

Caso tenha dificuldades para alinhar o texto ao lado de uma imagem corretamente ao usar a opção de ajuste, pode ser necessário mover o código para que a tag da imagem apareça no início do parágrafo, e não no meio.

  1. No editor de rich text, clique no botão “Editar código”.
  2. Encontre o código da imagem e mova toda a tag <img> para o início do parágrafo, fora das tags de parágrafo <p>.
  3. Remova as tags <span> nos parágrafos seguintes, abaixo da imagem.
  4. Clique em Salvar.

Exemplo de código de imagem desalinhada:

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

Código corrigido:

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>

Se os links mailto: não estiverem funcionando (carregam uma página em branco ou não abrem o e-mail), verifique se o link segue esta estrutura:

mailto:email@example.com

Se o link corresponder ao formato acima e ainda não funcionar como o esperado, pode ser um problema nas configurações do navegador ou do cliente de e-mail. Verifique as configurações do navegador e do cliente de e-mail para garantir que estejam configurados para lidar corretamente com links mailto:.

Quando imagens são inseridas em uma página, o HTML gerado inclui um parâmetro src e um parâmetro data-mce-src. Se os dois não corresponderem, o src será atualizado para corresponder ao data-mce-src.

No entanto, ao redimensionar uma imagem usando o editor de rich text, apenas o src é atualizado, e o data-mce-src permanece com a URL do tamanho original. Após mais alguns cliques, o src reverte para a URL do data-mce-src.

Para evitar isso, atualize manualmente a URL data-mce-src para corresponder ao tamanho de imagem desejado:

  1. No editor de rich text, clique no botão “Editar código”.
  2. Encontre a tag da imagem que você redimensionou.
  3. Localize os parâmetros src e data-mce-src.
  4. Atualize a URL do data-mce-src para corresponder à URL do src.
  5. Clique em Salvar.

Ao fazer alterações no editor de rich text, você pode notar que o HTML correspondente é alterado automaticamente.

Por que isso acontece?

O editor de rich text da Shopify é integrado ao TinyMCE, uma rede de distribuição de conteúdo (CDN) de terceiros. Essa CDN oferece uma lógica ampla e confiável de filtragem de conteúdo que corrige automaticamente a formatação de linhas HTML que poderiam funcionar mal em uma vitrine virtual ou expô-la a riscos de segurança. Esse processo é chamado de higienização de HTML.

O que devo fazer?

Embora seja possível contornar a lógica de filtragem de conteúdo e reverter o HTML para a versão anterior manualmente, é recomendável seguir as alterações automáticas. Essas correções são um comportamento esperado e cumprem o importante propósito de evitar alterações na vitrine virtual que poderiam levar a problemas.

Se estiver tentando alcançar objetivos específicos com um HTML que a CDN tenta corrigir, considere se há maneiras melhores de alcançá-los, como fazer alterações no código do tema que sejam compatíveis com a formatação de HTML esperada.

Se você usa o Shopify Markets com subpastas e o app Geolocation, os links nas descrições de produtos, posts de blogs, páginas e descrições de coleções podem redirecionar os clientes para o domínio primário, em vez de mantê-los na região selecionada.

Por que isso acontece?

O editor de rich text é compatível com links diretos (URLs completos) e links internos (URLs curtos). Se você usar um link direto com o URL completo (por exemplo, https://sualoja.com/collections/verao), os clientes serão direcionados para o URL específico, ignorando o mercado selecionado.

Como corrigir isso

Para garantir que os links reconheçam a região e mantenham os clientes no mercado selecionado, use links internos que comecem com / em vez de URLs completos.

  • Link direto (não reconhece a região): https://sualoja.com/collections/verao
  • Link interno (reconhece a região): /collections/verao

Para atualizar os links existentes:

  1. No admin da Shopify, acesse o produto, a coleção, a página ou o post do blog em que você quer atualizar os links.
  2. No editor de rich text, clique no botão Editar código para ver o HTML.
  3. Encontre os links que começam com https:// e incluem o domínio da loja.
  4. Substitua o URL completo pelo formato de URL curto. Por exemplo, altere https://sualoja.com/pages/sobre para /pages/sobre.
  5. Clique em Salvar.

Se você tiver muitos produtos, coleções, blogs ou páginas para atualizar, poderá exportá-los para arquivos CSV, pesquisar pelo domínio da loja ou por http para identificar links diretos, atualizá-los para links internos e, em seguida, importar os arquivos CSV atualizados de volta para a loja.