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.
36 comentários
TAYLOR, I’m sorry that I don’t get what you said. Where should I put the code “{{ section.settings.show_on_device }}”?
This is the code since it got cut off:
Hey, sorry! I just found out how to fix it myself. For anyone who’s slideshow arrows are now appearing ABOVE the slideshow the fix is:
I fixed this!
DON’T put “{{ section.settings.show_on_device }}” within this code:
“”slider-mobile-gutter{% if section.settings.layout == ‘grid’ } page-width{ endif }{ if section.settings.show_text_below } mobile-text-below{ endif %}" role=“region” aria-roledescription=“{{ ‘sections.slideshow.carousel’ | t }}” aria-label=“{{ section.settings.accessibility_info | escape }}”>
Instead, put the following code above it:
I am also having the issue that others are having where the arrows are now above the slideshow instead of below. I redid the code to make sure there were no errors and still no luck. I noticed that the arrows go below the image only when I uncheck “auto rotate slides.” I am not sure how to fix this!