Como utilizar o editor de rich text

Utilize o editor de rich text da Shopify para formatar e estilizar o texto exibido em sua loja virtual.

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:

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

  1. Encontre o código de incorporação referente à mídia que você quer incorporar.

  2. Selecione todo o código de inserção clicando nele e pressionando ctrl + A no PC ou command + A no Mac.

  3. Copie o código de inserção pressionando ctrl + C no PC ou command + C no Mac.

  4. No admin da Shopify, clique no botão Exibir HTML no editor de rich text referente ao conteúdo que está sendo editando.

  5. Cole o código de inserção pressionando ctrl + V no PC ou command + V no Mac:

  6. Clique em Salvar na página que está sendo editada para salvar as alterações.

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

    Grande parte do conteúdo de texto do seu site é texto de parágrafo. O texto de parágrafo geralmente tem um tamanho de fonte de 10 a 12 pt, mas alguns temas utilizam tamanhos de fonte diferentes.

  • Cabeçalho (de 1 a 6)

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

  • Bloco de citação

    É usada uma cotação de bloco para mostrar texto atribuído a outra pessoa, como, por exemplo, uma cotação ou trecho de um livro ou site.

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.

Crie 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

Para recuar um parágrafo, clique no botão Recuar:

Recuar um parágrafo cria uma margem no lado esquerdo.

Remover recuo de texto

Para remover o recuo ou "recuar um parágrafo para a esquerda", clique no botão Recuar para a esquerda:

Remover o recuo de um parágrafo elimina todas as margens recuadas existentes.

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:

  1. Realce o texto e clique no botão Cor.

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

  1. Realce o texto e clique no botão Cor.

  2. Clique na aba Plano de fundo.

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

  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.

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.

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

  1. Realce o texto ou a imagem que você deseja transformar em link.

  2. Clique em Inserir link.

  3. Digite a URL de destino do link no campo Link para:

- Para criar um link para um site externo fora da sua loja da Shopify, insira http:// seguido do endereço na Web, como, por exemplo http://www.example.com. - Para criar um link para uma página na sua loja virtual da Shopify, insira a URL curta, 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 exemplo mailto:example@example.com. - Para criar um link que faz uma chamada telefônica, insira tel: seguido do número de telefone, como, por exemplo tel:+0-123-456-7890.

  1. Insira uma breve descrição do link na caixa Título do link.

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

  1. Clique em Inserir link para converter o texto realçado em link.

Links para páginas em sua loja da Shopify são chamados de links internos. Utilize URLs curtas para criar links internos. Por exemplo, a 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 a 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://.

Após carregar um arquivo, é possível criar um link entre ele e o conteúdo no editor de rich text para disponibilizá-lo para download em uma descrição do produto ou coleção, página da Web ou post do blog.

Etapas:

  1. Copie a URL do arquivo para o qual você deseja criar um link.

  2. No admin da Shopify, clique no produto, coleção, página da Web ou post do blog em que deseja adicionar o arquivo.

  3. No editor de rich text, insira ou escolha o texto do link. Por exemplo, você pode adicionar um link para um gráfico em tamanho PDF a partir do texto do link, Click here to download our sizing chart.

  4. Selecione o texto do link.

  5. Clique em Inserir link:

  6. No campo Link para, cole a URL do arquivo para o qual você deseja criar o link.

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

  • carregar imagens
  • escolher dentre as imagens do seu produto
  • usar uma URL de imagem pública.

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

  4. Escolha um arquivo de imagem JPG ou PNG no seu computador.

  5. Clique na imagem carregada para selecioná-la.

  6. No menu Tamanho a inserir, selecione o tamanho de exibição da imagem. É possível selecionar Original para inserir a imagem sem alterar seu tamanho de exibição.

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

Escolher dentre as imagens do seu 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.

    Se a mídia do produto que você quer inserir não está visível, use os botões de seta para procurá-la em outras páginas.

  4. No menu Tamanho a inserir, selecione o tamanho de exibição da imagem. É possível selecionar Original para inserir a imagem sem alterar seu tamanho de exibição.

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

Usar a URL de uma imagem

Para inserir uma imagem usando uma URL pública:

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

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:

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

  2. No editor de rich text, clique na imagem.

  3. Faça as alterações:

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

  1. 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 a URL da imagem ou adicionar ou editar o texto alternativo da imagem.

Etapas:

  1. Clique duas vezes 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 alterar a imagem, crie uma nova URL de imagem. - Para melhorar a 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.

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

  1. Copie a URL do vídeo pressionando ctrl + C no PC ou command + C no Mac.

  2. Acesse Embed Responsively. Embed Responsively é uma ferramenta que fornecerá um código de inserção aprimorado para o seu vídeo.

  3. No Embed Responsively, clique para selecionar o site de vídeos em que seu vídeo está localizado.

  4. Cole a URL do vídeo que você copiou na caixa URL da página no Embed Responsively pressionando ctrl + V no PC ou command + V no Mac.

  5. Clique em Incorporar. O Embed Responsively criará o código de inserção para você.

  6. Se o vídeo for do YouTube e você quiser exibir apenas vídeos relacionados do mesmo canal do YouTube, encontre a URL do vídeo no código de incorporação. Copie e cole ?rel=0 no fim, entre aspas:

  7. Copie todo o código na caixa Código de inserção.

  8. No admin da Shopify, clique no botão Inserir vídeo no editor de rich text:

  9. Cole o código de inserção na caixa na caixa de diálogo Inserir vídeo.

  10. Clique em Inserir vídeo.

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

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

  1. No admin da Shopify, clique em Configurações e, em seguida, em Arquivos.

  2. Clique em Carregar arquivos para carregar o arquivo de áudio que você deseja inserir ou incorporar à sua loja.

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

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

  5. 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 pela URL criada para o arquivo de áudio no carregamento para a Shopify. A URL do arquivo de áudio pode ser localizada a qualquer momento na página Arquivos.

  6. Clique em Salvar.

  7. Clique em Visualizar para garantir que o arquivo de áudio será reproduzido corretamente.

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

Utilize tags de comentários <!-- and --> em textos internos que não deseja publicar em sua 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 dentro de <!-- and -->. Por exemplo: <!--yourtext-->

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

Pronto para começar a vender com a Shopify?

Experimente de graça