Atribuir Qualquer Seção para Mostrar Apenas em Dispositivos Móveis ou Desktop

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:

1. Acesse Admin > Loja online > Temas > Ações > Editar código.
2. 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.
3. 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.

{
"type": "select",
"id": "show_on_device",
"options": [
{
"value": "mobile--device",
"label": "Dispositivo móvel e tablet"
},
{
"value": "desktop--device",
"label": "Dispositivo desktop"
},
{
"value": "show-all-devices",
"label": "Mostrar em todos os dispositivos"
}
],
"default": "show-all-devices",
"label": "Mostrar esta seção apenas neste dispositivo",
"info": "Escolha em qual dispositivo deseja mostrar esta seção"
},

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.

@media only screen and (max-width: 749px) {
 .desktop--device {
 display: none !important;
 }
}
@media only screen and (min-width: 750px) {
 .mobile--device {
 display: none !important;
 }
}