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
Hi there, I tried this again and I’m still having both desktop and mobile show on the desktop version. The mobile version works perfectly, it’s just the desktop.
Can you please assist with this?
Thank you
Hi,
These are the issues that users do wrong:
1. Placement of the Step#3. They place the said code in the id instead of the class or even place it just wherever.
2. Forgot to follow the steps. They are missing step #4 and step #5.
3. Try to customize the code. Some user tries to customize the CSS code and done it wrong.
4. The main base.css or theme.css has errors. I have seen users that just added random codes from other sources and that creates error on their main CSS file.
Hi!
Great tutorial, clear and concise and exactly what I was after, only problem is it isn’t working for me.
All the instructions have been followed and I get the ‘Show this section to this device only’ choice in the theme editor, but the slideshows still show on all devices regardless of which option I choose.
My test slideshows are on this page https://www.atvsonly.co.uk/pages/test labelled as ‘desktop’ and ‘mobile’, if you could have a look and hopefully show me what I’ve done wrong that would be great!
Thanks,
Iain
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?