Usar o 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
- Adicionar conteúdo HTML utilizando o editor de rich text
- Formatar texto utilizando o editor de rich text
- Alterar cores do texto com o editor de rich text
- Limpar formatação no editor de rich text
- Inserir tabelas utilizando o editor de rich text
- Inserir links utilizando o editor de rich text
- Adicionar links internos e externos ao editor de rich text
- Link para um arquivo no conteúdo da página
- Inserir imagens utilizando o editor de rich text
- Mover e redimensionar uma imagem no editor de rich text
- Editar uma imagem no editor de rich text
- Inserir vídeos utilizando o editor de rich text
- Inserir arquivos de áudio utilizando o editor de rich text
- Adicionar ou remover comentários internos no editor de rich text
Onde usar o editor de rich text
É possível usar o editor de rich text para adicionar ou editar texto em vários locais na sua loja:
Se você usa um tema da Online Store 2.0, pode adicionar seções rich text às páginas ou aos modelos com o editor de temas.
Adicionar conteúdo HTML utilizando o editor de rich text
É possível inserir conteúdo HTML em seus posts do blog, páginas, descrições de produtos e descrições de coleções utilizando o editor de rich text.
Clique no botão </>
Exibir HTML para ver o código HTML do conteúdo existente no editor de rich text.
Na visualização em HTML, é possível fazer várias alterações no conteúdo no editor de rich text. É possível adicionar imagens, vídeos ou tabelas usando HTML, bem como depurar ou ajustar precisamente o layout e o estilo do conteúdo.
Incorporar widget de mídia
Se você deseja incorporar um widget de vídeo ou música, será necessário primeiro hospedá-lo em um serviço como Youtube, Vimeo ou SoundCloud. Esses serviços geram um código de inserção, que você pode copiar e colar no editor de rich text do admin da Shopify.
Etapas:
Encontre o código de incorporação referente à mídia que você quer incorporar.
Selecione todo o código de inserção clicando nele e pressionando
ctrl
+A
no PC oucommand
+A
no Mac.Copie o código de inserção pressionando
ctrl
+C
no PC oucommand
+C
no Mac.No admin da Shopify, clique no botão Exibir HTML no editor de rich text referente ao conteúdo que está sendo editando.
Cole o código de inserção pressionando
ctrl
+V
no PC oucommand
+V
no Mac.Clique em Salvar.
Formatar texto utilizando o editor de rich text
Com o botão de Formatação, é possível criar rapidamente parágrafos, cabeçalhos ou blockquotes. Usar os níveis de formatação e de cabeçalho corretos ajuda as pessoas e os mecanismos de pesquisa a ler o conteúdo do seu site.
Para escolher um formato de texto, realce o texto e clique no botão Formatação.
Opções de formatação
Parágrafo
Cabeçalho (de 1 a 6)
Bloco de citação
Texto em negrito
Para deixa o texto em negrito, realce o texto e clique no botão Negrito.
Texto em itálico
Para deixa o texto em itálico, realce o texto e clique no botão Itálico.
Sublinhar texto
Para sublinhar o texto, realce-o e clique no botão Sublinhado.
Criar lista com marcadores
Para criar uma lista com marcadores, clique no botão Lista com marcadores.
Digite o texto para criar o primeiro item da lista com marcadores. Para criar novos itens na lista, pressione a tecla enter
ou a tecla return
. Para concluir a lista, pressione enter
ou return
duas vezes.
Criar uma lista numerada
Para criar uma lista numerada, clique no botão Lista numerada.
Digite o texto para criar os primeiros itens da lista numerada. Para criar novos itens na lista, pressione a tecla enter
ou a tecla return
. Para concluir a lista, pressione enter
ou return
duas vezes.
Recuar texto
Recuar um parágrafo cria uma margem no lado esquerdo. Para recuar um parágrafo, clique no botão Recuar.
Remover recuo de texto
Remover o recuo de um parágrafo elimina todas as margens recuadas existentes. Para remover o recuo ou "recuar um parágrafo para a esquerda", clique no botão Recuar para a esquerda.
Alinhar texto
Para alinhar texto, selecione o texto, clique no botão Alinhamento e escolha Alinhamento à esquerda, Alinhamento ao centro ou Alinhamento à direita.
Alterar cores do texto com o editor de rich text
Etapas:
Realce o texto e clique no botão Cor.
Clique em uma cor ou insira o código hexadecimal para deixar o texto realçado com essa cor.
Alterar cores de fundo de texto
Etapas:
Realce o texto e clique no botão Cor.
Clique na aba Plano de fundo.
Clique em uma cor ou insira o código hexadecimal para deixar o fundo do texto realçado com essa cor.
Limpar formatação no editor de rich text
Para remover a formatação do texto ou das imagens, realce o conteúdo e clique no botão Limpar formatação.
Inserir tabelas utilizando o editor de rich text
É possível inserir tabelas em seus posts do blog, páginas, descrições de produtos e descrições de coleções utilizando o editor de rich text. É possível inserir texto, imagens ou até mesmo vídeos em tabelas após criá-las.
Etapas:
No editor de rich text, clique no botão Inserir tabela.
Clique em Inserir tabela para criar uma tabela com uma linha e uma coluna.
Após criar uma tabela, clique no botão Inserir tabela novamente para modificar as linhas e colunas da tabela:
- Inserir linha acima: posicione o cursor em uma linha e clique no botão para inserir uma nova linha acima.
- Inserir linha abaixo: posicione o cursor em uma linha e clique no botão para inserir uma nova linha abaixo.
- Inserir coluna antes: posicione o cursor em uma coluna e clique no botão para inserir uma nova coluna antes dessa.
- Inserir coluna depois: posicione o cursor em uma coluna e clique no botão para inserir uma nova coluna depois dessa.
- Excluir linha: posicione o cursor na linha que você deseja excluir e, depois, clique nesse botão.
- Excluir coluna: posicione o cursor na coluna que você deseja excluir e, depois, clique nesse botão.
- Excluir tabela: posicione o cursor em qualquer lugar da tabela e clique nesse botão para excluir toda a tabela.
Inserir links utilizando o editor de rich text
É possível inserir links (hiperlinks) em seus posts do blog, páginas, descrições de produtos e descrições de coleções utilizando o editor de rich text. Você pode adicionar links que direcionam os clientes a páginas em sua loja virtual da Shopify e a outros sites. É possível também adicionar links que abrem mensagens de e-mail ou fazem chamadas telefônicas para ajudar os clientes a entrar em contato com você.
Etapas:
- Realce o texto ou a imagem que você deseja transformar em link.
- Clique em Inserir link.
-
Digite o URL de destino do link no campo Link para:
- Para criar um link para um site externo fora da sua loja da Shopify, insira
https://
seguido do endereço na web, como, por exemplohttps://www.example.com
. - Para criar um link para uma página na sua loja virtual da Shopify, insira o URL curto, como, por exemplo
/collections/summer-collection
. - Para criar um link que abre uma mensagem de e-mail, insira
mailto:
seguido do e-mail, como, por exemplomailto:example@example.com
. - Para criar um link que faz uma chamada telefônica, insira
tel:
seguido do número de celular, como, por exemplotel:+0-123-456-7890
.
- Para criar um link para um site externo fora da sua loja da Shopify, insira
Insira uma breve descrição do link na caixa Título do link.
-
Escolha como o link abrirá com o menu Abrir este link em:
- na mesma janela: o link abrirá em uma aba ou janela do navegador do usuário.
- em uma nova janela: o link abrirá em uma nova aba ou janela do navegador do usuário.
Clique em Inserir link para converter o texto realçado em link.
Adicionar links internos e externos ao editor de rich text
Links para páginas em sua loja da Shopify são chamados de links internos. Use URLs curtas para criar links internos. Por exemplo, o URL /collections
apontará para a página de coleções da sua loja.
Para criar um link para uma página específica da sua loja virtual, como uma página de coleção ou de produto, use o formato de URL /page-type/page-handle
. Por exemplo, para criar um link para uma coleção que você criou chamada Coleção de verão, use o URL /collections/summer-collection
.
Links para sites que estão fora da sua loja da Shopify são chamados de links externos. Os links externos devem ser inseridos na íntegra e começar com http://
.
Link para um arquivo no conteúdo da página
Após fazer upload de um arquivo, vincule-o ao conteúdo no editor de rich text para disponibilizá-lo para download em uma descrição do produto ou da coleção, página da web ou post do blog.
Etapas:
Desktop
- No admin da Shopify, acesse Conteúdo > Arquivos.
- Copie o URL do arquivo para o qual você deseja criar um link.
- No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que deseja adicionar o arquivo.
- No editor de rich text, insira ou escolha o texto do link.
- Selecione o texto do link.
- Clique em Inserir link
- No campo Link para, cole o URL do arquivo para o qual você deseja criar o link.
- Clique em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.
iPhone
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja, toque em Arquivos.
- Copie o URL do arquivo para o qual você deseja criar um link.
- No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que deseja adicionar o arquivo.
- No editor de rich text, insira ou escolha o texto do link.
- Selecione o texto do link.
- Clique em Inserir link
- No campo Link para, cole o URL do arquivo para o qual você deseja criar o link.
- Clique em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.
Android
- No app da Shopify, toque no botão … e em Configurações.
- Na seção Configurações da loja, toque em Arquivos.
- Copie o URL do arquivo para o qual você deseja criar um link.
- No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que deseja adicionar o arquivo.
- No editor de rich text, insira ou escolha o texto do link.
- Selecione o texto do link.
- Clique em Inserir link
- No campo Link para, cole o URL do arquivo para o qual você deseja criar o link.
- Clique em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.
Inserir imagens utilizando o editor de rich text
Existem três maneiras de inserir uma imagem utilizando o editor de rich text. Com ele, é possível:
Fazer upload de imagens
Etapas:
No editor de rich text, clique no botão Inserir imagem.
Na caixa de diálogo Inserir imagem, clique na aba Imagens carregadas.
Clique em Fazer upload de arquivo.
Escolha um arquivo de imagem WebP, HEIC, SVG, GIF, JPEG ou PNG no computador.
Clique na imagem carregada para selecioná-la.
No menu Tamanho, selecione o tamanho de exibição da imagem. É possível selecionar Original para inserir a imagem sem alterar seu tamanho de exibição.
Clique em Inserir imagem para inserir a imagem no editor de rich text.
Escolher dentre as imagens do seu produto
Etapas:
No editor de rich text, clique no botão Inserir imagem.
Na caixa de diálogo Inserir imagem, clique na aba Imagens do produto.
Clique na imagem que você quer inserir.
No menu Tamanho, selecione o tamanho de exibição da imagem. É possível selecionar Original para inserir a imagem sem alterar seu tamanho de exibição.
Clique em Inserir imagem para inserir a imagem do produto no editor de rich text.
Usar o URL de uma imagem
Para inserir uma imagem usando um URL público:
No editor de rich text, clique no botão Inserir imagem.
Na caixa de diálogo Inserir imagem, clique na aba URL.
Insira o URL acessível publicamente do arquivo de imagem.
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
Após adicionar uma imagem à descrição de um produto ou coleção, à página da web ou ao blog, é possível reposicioná-la no conteúdo.
Etapas:
- No admin da Shopify, clique no produto, coleção, página da web ou post do blog que inclui a imagem que você deseja mover ou redimensionar.
- No editor de rich text, clique na imagem.
-
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.
Clique em Salvar.
Editar uma imagem no editor de rich text
Você pode alterar o tamanho, a disposição do texto e o alinhamento de uma imagem no editor de rich text. É possível também editar o URL da imagem ou adicionar ou editar o texto alternativo da imagem.
Etapas:
- Clique duas vezes na imagem no editor de rich text para abrir a caixa de diálogo Editar imagem.
-
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 sua 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ê deseja definir em cada lado.
- Para alterar o alinhamento da imagem, faça a seleção nos ícones que representam o alinhamento à esquerda, ao centro ou à direita.
- Para adicionar disposição de texto, marque Dispor texto ao redor da imagem.
Clique em Editar imagem para salvar suas alterações.
Inserir vídeos utilizando 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 utilizando o editor de rich text.
Se quiser incorporar um vídeo que você criou, primeiro será necessário carregá-lo em um site de streaming de vídeo, como o YouTube ou o Vimeo.
O YouTube não permite que você desabilite os vídeos relacionados, mas é possível determinar que os vídeos relacionados sejam do mesmo canal do vídeo que acabou de ser reproduzido.
Etapas:
- Copie o URL do vídeo pressionando
ctrl
+C
no PC oucommand
+C
no Mac.
- Acesse Embed Responsively. Embed Responsively é uma ferramenta que fornecerá um código de inserção aprimorado para o seu vídeo.
No Embed Responsively, clique para selecionar o site de vídeos em que seu vídeo está localizado.
Cole o URL do vídeo que você copiou na caixa URL da página no Embed Responsively pressionando
ctrl
+V
no PC oucommand
+V
no Mac.Clique em Incorporar. O Embed Responsively criará o código de inserção para você.
Se o vídeo for do YouTube e você quiser exibir apenas vídeos relacionados do mesmo canal do YouTube, encontre o URL do vídeo no código de incorporação. Copie e cole
?rel=0
no fim, entre aspas.Copie todo o código na caixa Código de inserção.
No admin da Shopify, clique no botão Inserir vídeo no editor de rich text.
Cole o código de inserção na caixa na caixa de diálogo Inserir vídeo.
Clique em Inserir vídeo.
Clique em Salvar quando terminar para salvar as alterações feitas no item que você estava editando.
Inserir arquivos de áudio utilizando o editor de rich text
Use o editor de rich text para inserir ou incorporar arquivos de áudio em posts do blog, páginas, descrições de produtos e descrições de coleções.
Etapas:
- No admin da Shopify, clique em Configurações e, em seguida, em Arquivos.
- Clique em Fazer upload de arquivos para carregar o arquivo de áudio que você deseja inserir ou incorporar à sua loja.
- Na seção Loja virtual, abra o editor de rich text na página ou post do blog em que o arquivo de áudio deverá aparecer.
- Copie
<div id="player"><audio controls="controls">
e, em seguida, cole o código no editor de rich text para incorporar um player de áudio à página. -
Copie o seguinte código:
-
<source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
-
Cole esse 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
pelo URL criado para o arquivo de áudio no carregamento para a Shopify. O URL do arquivo de áudio pode ser localizado a qualquer momento na página Arquivos.Clique em Salvar.
Clique em Ver para garantir que o arquivo de áudio será reproduzido corretamente.
Adicionar ou remover comentários internos no editor de rich text
Use tags de comentários <!--
and -->
em textos internos que não deseja publicar em sua loja.
Etapas:
No editor de rich text, clique no botão Exibir HTML.
Para adicionar um comentário interno, coloque o texto que deseja manter oculto dentro de
<!--
and-->
. Por exemplo:<!--yourtext-->
Clique em Salvar.
As tags HTML incluídas nas tags de comentário são salvas como texto interno. Para essas tags HTML funcionarem corretamente, você precisa remover as tags de comentário <!--
and -->
ao redor delas.