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

Assign Any Section to Show on Mobile or Desktop Only

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.
{{ section.settings.show_on_device }}

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;
 }
}

39 comentários

Hi for future readers,

Please contact us using chat with us for immediate reply.

Made4Uo •

Hello Team,

I have implemented this perfectly, although, mobile slideshow banner is showing on desktop. Mobile is functioning correctly. I have already reviewed suggestions in the comments & non are sufficient. Please contact, if someone can provide a solution or review my store coding that would be great. Thank you

Selene •

Hi, thank you so much for the tutorial, I found it works for my website! Much appreciated!

BABY •

Hi Mike,

We update our code constantly with Shopify theme updates.

Made4Uo •

It seems that the last code in the video is different from the last code provided. This could be the reason why desktop slideshow images are appearing on mobile instead of the mobile image, as reported by me and others.

Mike •

Very helpful easy to set-up and works amazing thank you!

Evy •

Hi,

Please be reminded, for faster reply, use the “Chat with us” feature. Thank you

Made4Uo •

Thanks ! It works if you follow carefully all the steps.

ADVICE: duplicate your original slide.liquid file before making any change, then you change the newfile for the original, and keep this one with a old_sestion.liquid name

Lawrence •

Thanks for this tutorial! It’s super simple to implement and I love that it works on any theme. Using this on every Shopify site I design now!!!

Caroline •

Hi, I really need your help in fixing the desktop showing both desktop and mobile slides.
Can you please assist?

Sharyn Dale •
1 2 3 4 Próximo »

Deixe um comentário