Como instalar ferramentas "ShareThis" em Shopify com código Javascript
If you would like to customize and manage your tools through the ShareThis Platform instead of using the ShareThis Shopify App, you can follow this steps:
- Log in or sign up to the Partilhar Esta Plataforma.
- Add your domain.
- Copy your unique <strong>ShareThis code</strong>. You can find your unique installation <script> code (i.e. <head> code) by navigating into Settings > Setup (in the Partilhar Esta Plataforma).
- Go to Apps. Enable the App you want to display in your website.
- Inicie sessão no seu website Shopify.
- Na barra de navegação da esquerda, seleccionar Loja Online > Temas, e no menu suspenso Acções, clicar em Editar Código.
- A partir dos diferentes ficheiros e pastas, ir para Layout e clicar em theme.liquid.
- <strong>Paste </strong>the unique ShareThis code that you copied from step 3 into the <head> section of your website.
- (Optional) If you are adding Inline tools, choose one of the following methods. Inline tools (Inline Share Buttons, Follow Buttons or Reactions Buttons) require an extra snippet of code to work on your site.
Antes de personalizar o seu tema, é sempre recomendável fazer uma cópia de segurança primeiro, siga estas instruções para duplicar o tema para uma cópia de segurança no caso de querer reverter as alterações.
1. Adding Inline ShareThis tools to your product page using a Custom Liquid Block
Pode usar o editor de temas Shopify para ter um guia visual ao colocar o código dos botões em linha. Embora não limitado à página de produtos, poderá seguir estas instruções e o vídeo no final para colocar o código na descrição do seu produto.
Note: Before customizing your theme, it’s always recommended to make a backup first, follow estas instruções para duplicar o tema para uma cópia de segurança no caso de querer reverter as alterações.
- Vá ao seu Painel de Controlo da Loja Online.
- Clique em Temas e depois clique no botão verde que diz "Personalizar".
- Navegue até à página onde pretende que os botões apareçam, clicando na pré-visualização ao vivo.
- Localize o seu rato no local onde pretende inserir os botões, um pequeno botão azul aparecerá com uma etiqueta de Adicionar uma Secção.
- Seleccionar Líquido Personalizado da lista.
- Copiar e colar o código de colocação relevante na barra lateral esquerda que acabou de aparecer.
- Código de colocação dos botões de partilha:
- Código de colocação dos botões de seguimento
- Reaction Buttons placement code
- Código de colocação dos botões de partilha:
- Clique em Guardar no canto superior direito.
Para sua conveniência, aqui está uma antevisão:
2. Adding Inline ShareThis tools to your product page by editing the Theme Code
- Na barra de navegação da esquerda, seleccionar Loja Online > Temas e depois clicar em Acções > Editar Código.
- Dentro da barra lateral esquerda, desça até à pasta Sections e seleccione main-product.liquid (Se estiver a utilizar um tema mais antigo, vá a Templates e localize o ficheiro product.liquid ). Depois, encontre o seguinte código:
{{ product.description }}
Nota: Pode usar Control + F para procurar a palavra "descrição" no mesmo (não se esqueça de clicar no interior do ficheiro para que possa procurar conteúdo dentro do editor de códigos ), tente colocar os botões numa nova linha após a secção ou linhas que têm este nome. Uma secção/elemento é delimitada com o caracter "}" no final. - Copie e cole o código de colocação relevante acima ou abaixo da descrição do seu produto.
- Código de colocação dos botões de partilha:
- Código de colocação dos botões de seguimento
- Reaction Buttons placement code
- Código de colocação dos botões de partilha:
Para sua conveniência, aqui está uma antevisão:
3. Adding Inline ShareThis tools on a page or blog
- Na barra de navegação da esquerda, seleccionar Loja Online > Páginas. Em seguida, clique na página onde pretende exibir os seus botões.
- Clique no botão Mostrar HTML <> na secção Conteúdo .
- Copie e cole o código de colocação relevante abaixo onde você quiser que a ferramenta ShareThis apareça.
- Código de colocação dos botões de partilha:
- Código de colocação dos botões de seguimento
- Reaction Buttons placement code
- Código de colocação dos botões de partilha: