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

Dica

Ao trabalhar com o editor de rich text, pressione enter ou return para criar um novo parágrafo. Para inserir uma quebra de linha sem forçar um novo parágrafo, mantenha pressionada a tecla shift e pressione enter ou return.

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:

• Descrições dos produtos
• Descrições de coleções
• Posts do blog
• Páginas
• Políticas da 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

Aviso

Se você usar HTML no editor de rich text, ele poderá causar erros de exibição na vitrine. A cópia de conteúdo de outro site também pode adicionar código HTML indesejado que pode gerar erros desse tipo. É possível clicar no botão </> Exibir HTML para ver e remover código HTML indesejado ou HTML que cause um erro de exibição, como no caso de texto fora das margens.

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

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.

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:

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

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

3. 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 exemplo https://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 exemplo mailto:example@example.com.
   • Para criar um link que faz uma chamada telefônica, insira tel: seguido do número de celular, como, 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 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.

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

Observação

Para verificar o identificador de um produto, coleção, página ou blog, visite a página principal desses elementos no admin da Shopify, localize a seção Listagem de mecanismo de pesquisa e clique em Editar.

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.

Observação

O URL precisa começar com http://cdn.shopify.com/. Se aparecer http://static.shopify.com, substitua por http://cdn.shopify.com.

Etapas:

Desktop

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

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

3. No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que deseja 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 Link para, cole o URL do arquivo para o qual você deseja criar o link.

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

iPhone

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja, toque em Arquivos.
3. Copie o URL do arquivo para o qual você deseja criar um link.
4. No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que 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 Link para, cole o URL do arquivo para o qual você deseja criar o link.
9. Toque em Inserir link. No editor de rich text, o texto com link é exibido em azul e sublinhado.

Android

1. No app da Shopify, toque no botão … e em Configurações.
2. Na seção Configurações da loja, toque em Arquivos.
3. Copie o URL do arquivo para o qual você deseja criar um link.
4. No admin da Shopify, clique no produto, coleção, página da web ou post do blog em que 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 Link para, cole o URL do arquivo para o qual você deseja criar o link.
9. Toque 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 um URL de imagem pública.

Observação

Embora só seja possível ter 250 imagens associadas a cada produto (incluindo todas as variantes), não há limite para o número de imagens usadas em outras partes da loja.

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 carregada para selecioná-la.

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

   Dica

   A escolha do tamanho da imagem não substitui o tamanho original. É possível inserir a mesma imagem em diferentes páginas da loja em tamanhos diferentes.

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 em questão não está visível, use os botões de seta para procurá-la em outras páginas.

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

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

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

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

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

3. 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 o URL do vídeo pressionando ctrl + C no PC ou command + C no Mac.

Dica

Se seu tema for Brooklyn ou Supply , então você pode copiar o código de incorporação do seu vídeo do Youtube ou Vimeo e pular para a etapa 7. O tema fará com que os vídeos incorporados se tornem automaticamente responsivos.

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

Observação

Talvez você encontre problemas com a reprodução em determinados modelos de iPhone ao visualizar verticalmente vídeos que foram incorporados usando código do Embed Responsively.

1. No Embed Responsively, clique para selecionar o site de vídeos em que seu vídeo está localizado.
2. Cole o 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.
3. Clique em Incorporar. O Embed Responsively criará o código de inserção para você.
4. Se o vídeo for do YouTube e você quiser exibir apenas aqueles 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.
5. Copie todo o código na caixa Código de inserção.
6. No admin da Shopify, clique no botão Inserir vídeo no editor de rich text.
7. Cole o código de inserção na caixa na caixa de diálogo Inserir vídeo.
8. Clique em Inserir vídeo.
9. Clique em Salvar quando terminar para salvar as alterações feitas no item que você estava editando.

Dica

É possível gerar códigos de inserção diretamente do YouTube, mas o vídeo incorporado não será tão responsivo aos diferentes tamanhos de tela.

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:

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

2. Clique em Fazer upload de 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>

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

7. Clique em Salvar.

8. Clique em Ver para garantir que o arquivo de áudio será reproduzido corretamente.

Dica

Você pode gerar códigos de inserção para arquivos de áudio diretamente do Soundcloud, mas o player de áudio do Soundcloud pode não funcionar corretamente em todos os dispositivos. Para saber mais, visite a central de ajuda do Soundcloud.

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:

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.