Shopify features and tools
Add Shopify Dawn Color Swatches with Images for Free

Adicione amostras de cores Dawn do Shopify com imagens gratuitamente

Log in or Sign up to ensure access to FREE code across multiple devices.

Compatibilidade: tema Dawn e qualquer tema GRATUITO do Shopify 2.0.

A maioria dos proprietários de lojas do Shopify está pagando por um aplicativo de amostra de cores. Não há mais necessidade de fazer isso. Interrompa o pagamento mensal seguindo as etapas abaixo.

Você está cansado de gastar dinheiro em um aplicativo de amostra de cores para sua loja Shopify Dawn? Você não está sozinho. Muitos lojistas estão no mesmo barco, em busca de uma solução econômica para adicionar amostras de cores e imagens às suas listas de produtos. Felizmente, agora você pode se livrar desses pagamentos mensais e assumir o controle da apresentação do seu produto com nosso guia passo a passo.

Por que pagar quando você pode fazer você mesmo?

Antes de mergulharmos nas etapas, você deve estar se perguntando por que deveria se preocupar com soluções DIY. Bem, é simples. A maioria dos aplicativos de amostras de cores disponíveis na loja de aplicativos Shopify vem com taxas mensais recorrentes que podem aumentar com o tempo. Ao implementar sua própria amostra de cores e solução de imagem, você pode economizar esse precioso dinheiro para outros aspectos do seu negócio.

NOTA: Existem diversas maneiras de inserir amostras de cores; ele pode ser inserido usando metacampos, mas não acho conveniente inserir a cor do produto para cada produto. É por isso que escrevi este código. O código também aceitará não apenas cores, mas também imagens. Vários designs disponíveis, veja as imagens abaixo.

Nossa solução vai além de apenas adicionar amostras de cores; permite incorporar imagens, proporcionando aos seus clientes uma visão abrangente das variações do seu produto. Quer você venda roupas, acessórios ou quaisquer outros itens onde a cor e o design são importantes, esta solução elevará sua loja Shopify Dawn ao próximo nível.

Com esta amostra de cores e solução de imagem DIY Dawn, você pode:

  • Economize dinheiro eliminando taxas mensais de aplicativos.
  • Proporcione uma experiência de compra visualmente atraente e interativa.
  • Apresente as variações do seu produto de forma eficaz.
  • Personalize as formas, tamanhos e estilos das amostras para combinar com sua marca.

Opções de formas

Para iniciar:

  1. Vá para sua loja online > Temas > Ações > Editar código
  2. Vá para a pasta Snippet e crie um snippet, vamos chamá-lo de "amostra de cores".
  3. Abra o snippet recém-criado e cole o código abaixo. Clique em SALVAR

4. Temos que ir para a pasta Section e duplicar o main-product.liquid criando uma seção e nomeá-la, "product-color". Copie/cole o código do main-product.liquid no recém-criado product-color.liquid.

5. A seguir, duplicaremos product.json na pasta Template. Crie um modelo de produto, formato json, e nomeie-o como “modelo de amostra”. Abra o modelo do produto e copie/cole o código de product.json em product.swatch-template.json.

6. Precisamos alterar a seção do produto principal para cor do produto, como chamamos nossa nova seção de produto.

7. Volte para product-color.liquid na pasta Section. Na pasta Seção. Encontre e abra o main-product.liquid.

Encontre o código {%- when 'variant_picker' -%} . Exclua o código entre o código 'variant_picker' e o {%- when 'buy_buttons' -%} . Em seguida, cole o código abaixo. Clique em SALVAR

8. Vá para a pasta Config e abra settings_schema.json e cole o código antes do último colchete, ']'.

9. Vá para a visualização do administrador. NOTA: Seu tema deve ser o 'tema ativo' antes que você possa ver o modelo recém-criado. Clique em Produtos abaixo de Pedidos e altere o modelo do tema na loja online no canto inferior direito.

NOTA: Use somente Cor Hex. Tamanho de imagem recomendado: 200px x 200px.

Se quiser que isso se aplique a todos os seus produtos, pule as etapas 5, 6 e 7 e, em vez de abrir a seção recém-criada, abra main-product.liquid.

Você terminou. Tudo o que resta fazer é enviar suas imagens, inserir sua cor no editor de temas e imagens. Certifique-se de que os nomes das imagens estejam em letras minúsculas. Veja o vídeo sobre como fazer isso.

Se você tiver dúvidas, pode entrar em contato comigo em "chat conosco".

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

5 comentários

Any chance you could update this code with the templates updates?
Variants are now used by rendering product-variant-picker and product-variant-option. I managed to adapt your code but the “disabled” state doesn’t work anymore. “Checked” are fine.

Thank you!
Kindly,
Audrey L.

Audrey L

Hi @Amanda,
In the new Shopify editor, the shift + tab does not work anymore

Hi @Igor Leshchencko,
Thank you (",)

Hi @Michelle,
The code works as it should. Please make sure you follow the instructions

Made4Uo

Hi
The Shift+Tab is not working for me so the code remains the same when copied

amanda

thank you for your big work!

Igor Leshchenko

Hi there, the code doesn’t seem to work. Are you able to update this? :) thanks!

Michelle

Deixe um comentário