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.
39 comentários
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!
Please make sure to do some trial and error and follow the steps closely
We’ve added this and it works well but when the mobile and desktop images are separated, the pagination buttons appear above the slider? How do we get them back down to the bottom?