Olá Rhmartins, como vai?
Esse problema ocorre porque o comando shopify theme dev não serve os arquivos diretamente da pasta assets no ambiente local. Ele transforma os arquivos e os serve de maneira otimizada para o ambiente Shopify. Para corrigir isso e conseguir visualizar as imagens no ambiente de desenvolvimento, você pode seguir uma das soluções abaixo:
1. Corrigir os Caminhos no CSS
Acesse seus arquivos CSS e altere as referências para os caminhos absolutos gerados pelo Shopify. Em vez de usar:
url(‘assets/image-name.png’);
Use:
url(‘/assets/image-name.png’);
Isso funciona porque o Shopify serve os arquivos da pasta assets a partir do prefixo /assets.
2. Utilizar Tags Liquid para Referenciar Imagens
No Shopify, o caminho mais seguro para referenciar ativos (imagens, arquivos CSS ou JS) é usando tags Liquid. No lugar de caminhos relativos no CSS, você pode usar:
background-image: url(‘{{ ‘image-name.png’ | asset_url }}’);
Isso garante que o Shopify gere os links corretamente para o ambiente local e produção.
3. Habilitar Imagens Locais com uma Ferramenta Externa
Caso queira continuar utilizando links relativos, você pode configurar um servidor local para servir a pasta assets. Por exemplo, usando o Live Server no VS Code:
- Instale o plugin Live Server no VS Code.
- Configure o Live Server para servir a pasta onde suas imagens estão localizadas.
- Atualize seus links no CSS para apontar para o servidor local, como http://localhost:3000/assets/image-name.png.
4. Subir os Arquivos para a Loja Shopify
Outra solução é enviar temporariamente os arquivos para o tema online enquanto está no ambiente de desenvolvimento. Faça isso com o comando:
shopify theme push --only assets
Isso permite que você visualize os ativos corretamente na URL gerada pelo shopify theme dev.
5. Inspecionar Erros de Rede no Navegador
Se as imagens ainda não aparecem, inspecione as requisições de rede no navegador (devtools > aba Network). Verifique:
- Se os links gerados têm erros 404.
- Se há problemas de permissões ou bloqueios de conteúdo.
Essas abordagens devem resolver o problema. A solução com Liquid é a mais indicada porque é a mais consistente tanto no ambiente local quanto no ambiente de produção.
