Erro de tema mal configurado

O que fazer caso você tenha recebido um aviso de tema mal configurado enquanto usava o aplicativo Scala Parcelamento

Esse aviso ocorre por um erro simples mas muito comum em temas que foram mal editados.

Ele pode ser solucionado pelo desenvolvedor que fez a mudança, mas é recomendado que você nos mande um email para resolvê-lo.

Motivo do erro

Todo tema da Shopify precisa ter um arquivo principal chamado "theme.liquid", esse documento combina todos os outros arquivos da sua loja para que o servidor do Shopify saiba como montar suas páginas.

O erro ocorre porque alguém tentou editar esse arquivo, mas não o fez da forma correta.

O arquivo precisa ter essa estrutura básica:

<html>
    <head>
        <!-- código da Shopify -->
    </head>
    <body>
        <!-- código do seu site aqui -->
    </body>
</html>
<!-- outros scripts -->

Os elementos "html", "body"e "head", são elementos de HTML necessários pra que a Shopify funcione direito, o site da Mozilla tem uma ótima explicação sobre como esses elementos funcionam aqui:

HTML: Linguagem de Marcação de Hipertexto | MDN
HTML (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma pági…

A única coisa que você precisa entender pra solucionar esse erro é que esses elementos são abertos usando o formato "<elemento>" e fechados usando o formato "</elemento">.

Acontece que muita gente acaba editando o arquivo, para adicionar scripts na loja, como por exemplo o do checkout da Yampi, e acaba fazendo isso:

<html>
    <head>
    	<!-- código da Shopify -->
    </head>
    <body>
	<!-- código do seu site aqui -->
    
	<!-- Checkout Yampi. -->
	{% include 'YampiSnippet' %}
	<!-- Checkout Yampi. ->
    
	<!-- código de aplicativos ou outros scripts de terceiro -->

	^ ERRO OCORRE AQUI ^
Exemplo de código defeituoso em site de uma loja que usa nosso aplicativo

O que causa o defeito é que os elementos <body> e <html> foram abertos, mas nunca foram fechados com </body> e </html>

Isso é um erro grave que pode ocasionar vários tipos de bug na sua loja, o mais grave deles é que nenhum aplicativo que aplica tecnologia mais recente da Shopify vai funcionar, porque não tem como a Shopify saber onde inserir o código do aplicativo, depois que montarem seu código.

Como solucionar o erro

Antes de qualquer coisa é importante que você se sinta confortável em editar o código, caso contrário mande uma mensagem pro nosso suporte para que nós consertemos seu tema, sem que você se estresse sem necessidade.

1. Abra a sessão de temas da sua loja

2. Clique em ações e em editar código

3. Na primeira pasta "Layout"  selecione o arquivo "Theme.liquid"

Caso você não ache o arquivo, é só usar a barra de pesquisas, TODO tema no Shopify tem que ter esse arquivo.

4. Selecione a versão original do seu tema, ou a mais antiga

Se seu tema foi editado diversas vezes, é possível que a Shopify não tem a versão original do seu tema, porém é possível que ainda exista uma versão sem erros.

5. Tente achar onde ficava a posição do elemento </body>

Você consegue achar rápido indo até o fim do documento ou clicando no documento e apertando "Ctrl+F" (Cmd+F no Macbook).

6. Anote a posição do elemento e outros elementos próximos como referência

Aqui vemos que os elementos </html> e </body> ficavam na linha 71 e 72 perto código do aplicativo loox (linha 70), e acima de um código de estilo (74)

Versão original do tema sem defeitos

7. Abra a versão atual do seu tema com defeito e tente restaurar o código anterior

Aqui temos um exemplo da versão do tema com código defeituoso

Versão mais recente do tema com defeitos

Como você pode ver, o mesmo código que usamos de referência, mudou da linha 74 para 153, porque mais código foi adicionado ao tema. Então não vai adiantar restaurar os elements </body> e </html> nas linhas 74 e 75.

Você poderia botar os elementos </html> e </body> na última linha, mas isso não é recomendado.

Pra consertar o tema, basta pegar o código em volta que anotamos como referência do aplicativo loox e do elemento <style>.

Nesse caso o conserto ficou assim, e a loja voltou a funcionar direito:

Código restaurado e funcionando direito

Perguntas adicionais

Esse erro é simples de resolver para um desenvolvedor, mas talvez seja complicado para alguém sem experiência em programação, caso você não se sinta confortável em consertar sozinho, nos mande um email que resolveremos o mais breve o possível.