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.
| {{ 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) {
|
39 comentários
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
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.
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
@Taylor regarding the comment you said on how to fix the arrows, can you explain how to do that with the code, it looks like it got cut off and you didn’t end up pasting it, or anyone else if they have a solution.
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!
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?