Shopify features and tools
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

36 comentários

Hello,
I want to apply this to my “Product information” but in my code “main-product.liquid” there is no “Class” or “<”.
What can I do?

Leon

Hi @YAREMIS,

As mentioned in the video, you place the {{ section.settings.show_on_device }} at the first angle bracket, “<”. For slideshow, the first angle bracket is “<slideshow-component”, you have to place the code inside the class. Some of the angle brackets might not have a “class=’’”, just add the code inside the angle bracket, “class=’{{ section.settings.show_on_device }} ’”. Some circumstances, you might need a developer to do so.

Made4Uo

Hello. I used this and everything seems to be working great except that I too have the slide show dots at the top now. I am using Dawn 8.0.0

Yaremis

Hi everyone,

For those people who have problems with the button showing in slideshow section, can you provide me the Dawn / Theme version you have, so I can provide the proper code? I cannot reproduce the error.

The instructions are straightforward but may not apply to all the sections you have in your theme, if this happens please reach out for a developer to help you out.

Made4Uo

Hello, I tried to follow the tutorial but there is a problem. Here is the error message:

Invalid schema: setting with id=“show_on_device” default must be one of the values

aka

Deixe um comentário