Compatibilidade: Todos os temas do Shopify
Tenho várias pessoas que desejam atribuir uma imagem diferente aos clientes que usam desktop e aos clientes que usam dispositivos móveis. O procedimento é bastante simples, siga as instruções abaixo.
Devido a algumas diferenças na estrutura dos temas, pode ser necessário contratar um desenvolvedor para fazer isso por você. Em algumas seções, pode ser um pouco complicado, pois precisamos adicionar o código de classe à seção ou ao primeiro contêiner.
Para começar:
- Acesse Admin > Loja online > Temas > Ações > Editar código.
- Abra a seção que deseja editar. Em seguida, encontre o primeiro "<" (sinal de menor) que você vê e procure pela seção de classes.
- Adicione o código abaixo. OBSERVAÇÃO: Certifique-se de fornecer um espaço.
4. Em seguida, precisamos adicionar um esquema para que você não precise codificar toda vez. Desça até a seção {% schema %}. Encontre as "configurações", sob a seção. Adicione o código abaixo após o "[", certifique-se de assistir ao vídeo para a colocação correta.
5. Em seguida, precisamos adicionar o arquivo CSS para ocultar ou mostrar com base na escolha de dispositivo que você fez. Vá até a pasta Asset e abra o base.css ou theme.css ou theme.scss para outros temas. Em seguida, adicione o código abaixo. Certifique-se de SALVAR.
39 comentários
Same – Followed all the steps and Mobile is showing both desktop and mobile. Desktop shows just Desktop
Actually all good, just need to create an account before viewing the content :)
Hey, on your ytb video it is written that this is a “free” solution. That and the buying option isn’t even working…
Hi @Daniela,
It is hard to determine what have gone wrong. In my opinion, this code will be easy to implement if you have at least HTML to do it by yourself, since every sections of every theme is written differently.
Hi, I was wondering if you can help me out. I added the code and created sections for mobile and desktop. When I see the final results, in the desktop version everything is ok but in the mobile version both sections appear (mobile+desktop). Do you know how I can fix that?