Como utilizar o editor de rich text

Você pode usar 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 Mostrar 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 inserção referente à mídia que você deseja 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 Mostrar 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 (1-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:

Criar lista com marcadores

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

Você pode digitar para criar itens de uma lista com marcadores:

Para criar novos itens em uma lista, pressione um das teclas enter ou return. Para concluir a lista, pressione uma das teclas enter ou return duas vezes.

Crie uma lista numerada

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

Você pode digitar para criar itens de uma lista numerada:

Para criar novos itens em uma lista, pressione um das teclas enter ou return. Para concluir a lista, pressione uma das teclas 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 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 em Cor de fundo… :

  3. Clique em uma cor 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, em seguida, clique nesse botão.
  • Excluir coluna: posicione o cursor na coluna que você deseja excluir e, em seguida, 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 endereço de 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 guia ou janela do navegador do usuário. - em uma nova janela: o link abrirá em uma nova guia 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. Você pode usar 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.

Enviar imagens

Etapas:

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

  2. Na caixa de diálogo Inserir imagem, clique na guia 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 guia Imagens do produto.

  3. Clique na imagem que você deseja inserir:

    Se a imagem do produto que você deseja inserir não é exibida, use os botões de seta para procurar em páginas diferentes:

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

  3. Insira a URL acessível publicamente do seu 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 Save.

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

  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

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

  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

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

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.

Remover tags de comentário

Onde usar o editor de rich text

No momento, é possível usar o editor de rich text no app da Shopify para adicionar descrições aos seus produtos. Se você deseja adicionar texto a páginas, blogs ou coleções, isso terá de ser feito no admin da Shopify em um navegador da web.

Formatar texto utilizando o editor de rich text

Você pode usar o editor de rich text para formatar seu texto de várias maneiras:

  • Texto em negrito
  • Texto em itálico
  • Sublinhar texto
  • Alinhar texto
  • Criar listas

Texto em negrito

Para deixar o texto em negrito, realce o texto e, em seguida, toque no botão de negrito:

Texto em itálico

Para deixar o texto em itálico, realce o texto e toque no botão itálico:

Sublinhar texto

Para deixar o texto sublinhado, realce o texto e, em seguida, toque no botão sublinhado:

Alinhar texto

Etapas:

  1. No editor de texto, realce o texto que você deseja alinhar.
  2. Toque no botão de alinhamento:
  3. Toque em uma das opções de alinhamento para selecionar o alinhamento à esquerda, ao centro ou à direita.

Criar listas

É possível usar o editor de rich text para adicionar listas com marcadores e listas numeradas ao texto.

Etapas:

  1. No editor de texto, toque no botão de lista para mostrar as duas opções de listas:

  2. Toque na opção de lista com marcadores ou de lista numerada para selecionar o tipo de lista que você deseja adicionar.

  3. Insira os itens da lista. Após cada item, toque em voltar para ir para a próxima linha e inserir outro item.

  4. Quando terminar de inserir a lista, toque em retornar duas vezes.

Você pode usar o editor de texto para adicionar links ao seu texto:

  1. No editor de texto, selecione as palavras com as quais deseja criar um link.

  2. Toque no botão de link:

  3. Na tela Inserir link, insira a URL do link.

  4. Insira um título para o link, que será usado para fins de acessibilidade e SEO.

  5. Por padrão, o destino do link abrirá na mesma janela. Para configurar o link para abrir em uma janela diferente, habilite a opção Abrir link em uma nova janela.

  6. Toque em Salvar.

Links para páginas em sua loja da Shopify são chamados de links internos. Você pode usar 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. Links externos devem começar com http://.

Onde usar o editor de rich text

No momento, é possível usar o editor de rich text no app da Shopify para adicionar descrições aos seus produtos. Se você deseja adicionar texto a páginas, blogs ou coleções, isso terá de ser feito no admin da Shopify em um navegador da web.

Formatar texto utilizando o editor de rich text

Você pode usar o editor de rich text para formatar seu texto de várias maneiras:

  • Texto em negrito
  • Texto em itálico
  • Sublinhar texto
  • Alinhar texto
  • Criar listas

Texto em negrito

Para deixar o texto em negrito, realce o texto e, em seguida, toque no botão de negrito:

Texto em itálico

Para deixar o texto em itálico, realce o texto e toque no botão itálico:

Sublinhar texto

Para deixar o texto sublinhado, realce o texto e, em seguida, toque no botão sublinhado:

Alinhar texto

Etapas:

  1. No editor de texto, realce o texto que você deseja alinhar.
  2. Toque no botão de alinhamento:
  3. Toque em uma das opções de alinhamento para selecionar o alinhamento à esquerda, ao centro ou à direita.

Criar listas

É possível usar o editor de rich text para adicionar listas com marcadores e listas numeradas ao texto.

Etapas:

  1. No editor de texto, toque no botão de lista para mostrar as duas opções de listas:

  2. Toque na opção de lista com marcadores ou de lista numerada para selecionar o tipo de lista que você deseja adicionar.

  3. Insira os itens da lista. Após cada item, toque em voltar para ir para a próxima linha e inserir outro item.

  4. Quando terminar de inserir a lista, toque em retornar duas vezes.

Você pode usar o editor de texto para adicionar links (hiperlinks) ao seu texto:

  1. No editor de texto, selecione as palavras com as quais deseja criar um link.

  2. Toque no botão de link:

  3. Na tela Inserir link, insira a URL do link.

  4. Insira um título para o link, que será usado para fins de acessibilidade e SEO.

  5. Por padrão, o destino do link abrirá na mesma janela. Para configurar o link para abrir em uma janela diferente, habilite a opção Abrir link em uma nova janela.

  6. Toque na marca de seleção para salvar o link.

Links para páginas em sua loja da Shopify são chamados de links internos. Você pode usar 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. Links externos devem começar com http://.

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

Experimente de graça