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.
36 comentários
Hi @JESSICA,
Make sure you follow the instructions as explained in the video. The code must be placed in the first “<”. For some sections, this will cause an error since they make a section as a container, if this is the issue, we need to provide the code differently. Please contact us using “Chat with us”
@JAMIE Thank you so much for the appreciation!
@SHAIMA This is a little off topic but I would recommend to replace your image with bigger sizes
Hello! I added this code to the Image Banner. When I choose hide from desktop, it removes the image from desktop, but leaves a huge white space where the section is. This also happens if I choose hide from mobile. Is there any way to resolve this?
Just wanted to drop a line and say thank you. Easy to understand an implement, appreciate your work.
Hi! thank you so much for this simple tutorial :))
my site for reference -I have noticed that mobile banner quality is quite low although i have adjusted its dimensions from canva. is there a way to fix this?
https://marthajewelry.myshopify.com/
test
Hi @LEON,
I am not sure what are you trying to obtain. Are you trying to hide the whole product in a product page? Anyway, you can add a class to the line. E.g. class=“the code here”