Esse artigo foi desenvolvido para as lojas onde o Kit de Produtos ainda não está sendo apresentado na loja virtual.
Veja abaixo um exemplo de exibição:
- Método Manual (Para lojas com layouts personalizados, devem contactar seu designer para realizar a alteração);
- Método Automático.
Qualquer problema gerado em sua loja, você poderá voltar seu layout para uma versão anterior. Veja aqui como realizar.
Método Manual:
Atenção: Para seguir esse método, é necessário ter conhecimento em HTML/CSS. Caso não tenha, recomendamos que procure por algum profissional que tenha.
- Acesse "Minha Loja >> Aparência da Loja";
- Duplique o tema que está publicado. Para isso, clique na seta para baixo e selecione a opção "Duplicar":
- No tema duplicado (ele estará em Temas instalados e não publicados e terá "Cópia" em frente ao seu nome), clique em "Editar HTML":
- Clique no menu "pages" e em seguida em "product.html":
- Na lateral direita, o editor de código HTML será aberto:
Localize o texto abaixo:
{{ productHelper.variants() }}
Após localizar, insira o código abaixo:
{{ productHelper.kit() }}
- Veja o exemplo abaixo:
- Após inserir o código, clique em "Salvar".
- Visual Padrão: Caso queira aplicar um visual padrão para o seu KIT, é possível adicionar o CSS disponibilizado pela Tray.
Somente indicamos adicionar o CSS padrão da Tray caso seu layout não seja personalizado, visto que o CSS padrão poderá não seguir o visual de sua loja. Você poderá verificar com seu designer um visual CSS personalizado para sua loja.
Caso não deseje adicionar o visual padrão da Tray, por favor, vá para o passo 7 e não realize o passo 6.
Passo 1: Faça o download do arquivo kit.css que se encontra anexado ao final deste artigo;
Passo 2: Na página de edição do tema clique no botão "upload de arquivos" e selecione a opção CSS;
Passo 3: Selecione o arquivo kit.css que realizou o download.
Exemplo:
<link rel="stylesheet" href="{{ asset('css/kit.css') }}" type="text/css">
- Veja o exemplo abaixo:
- Após inserir o código, clique em "Salvar".
Passo 7: Acesse sua loja para visualizar as alterações e identificar se não ocorreu nenhum problema em sua alteração.
Na parte superior da página (logo acima do editor) contém um botão de visualizar:
Navegue por sua loja, acesse a página de produto e veja se não contém nenhum item desconfigurado. Após isso, acesse um produto kit.
Passo 8: Com todas as configurações realizadas com sucesso, caso o layout não tenha apresentado nenhum problema, clique em publicar tema:
Passo 9: Caso todas as configurações estejam corretas, o seu kit deverá ser apresentado na página de produtos, como o exemplo abaixo:
Algumas lojas contém CSS personalizado, sendo assim, poderá exibir o kit com um visual diferente. Para personalizar a exibição do kit, basta solicitar a um profissional com conhecimento em HTML/CSS.
Método Automático:
Se já realizou o método automático, mas mesmo assim o kit não está sendo apresentado, siga o passo a passo abaixo:
- Acesse "Minha Loja >> Aparência da Loja";
- Em seu tema publicado, clique no link "Iniciar instalação do tema" e instale a nova versão de seu tema:
Atenção: Caso em sua loja não apresente o link de "iniciar a instalação do tema" ou você já realizou este processo e o kit continua não apresentando, será necessário realizar a alteração manualmente, explicada logo acima.
- Após instalar o tema automaticamente, você deve verificar se suas configurações estão corretas para posteriormente publicar o tema atualizado:
- Caso todas as configurações tenham sido realizadas com sucesso, o seu kit será apresentado como o exemplo abaixo:
Algumas lojas contém CSS personalizado, sendo assim, poderá exibir o kit com um visual diferente. Para personalizar a exibição do kit, basta solicitar a um profissional com conhecimento em HTML/CSS.
Atenção: Caso ocorra algum problema em sua loja referente a alteração do layout realizada, veja o item "voltando ao meu layout antigo":
Voltando o Layout Antes da Alteração:
Em ambos os processos (manual ou automático), a Tray irá gerar uma duplicação (cópia) do seu tema atual para que você possa alterar e manter seu tema anterior com os códigos sem qualquer alteração. Dessa forma é possível encontrar seu layout anterior na listagem de temas e publicá-lo novamente.
Veja abaixo:
Boas Vendas!
Equipe Tray.
- kit.css2 kB