Assign Any Section to Show on Mobile or Desktop Only

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

Log in or Sign up to ensure access to FREE code across multiple devices.

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.

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.

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

39 comentários

Hi @Melissa,

The tutorial is to make any section in your Shopify to have an option to show in Desktop or mobile. It will not create a section for you. Youi have to have the section readily available to customize it.

You also have to add 2 sections, one for desktop and one for mobile, if you want to create different section for desktop and also mobile.

Made4Uo

I have the same problem as PRIYANK SINGH and copied each step precisely.

Melissa

Hi @Priyank Singh Please make sure you follow step by step

Made4Uo
I am trying to upload image for mobile it is not showing on the mobile version . I have an problem to upload image image according to your Video. https://youtu.be/dvf1zq7gVV8 . kindly help me to resolve this issue
Priyank Singh

Deixe um comentário