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.
Para iniciar:
- Vá para sua loja online > Temas > Ações > Editar código
- Vá para a pasta Snippet e crie um snippet, vamos chamá-lo de "amostra de cores".
- Abra o snippet recém-criado e cole o código abaixo. Clique em SALVAR
| {% comment %} Insira sua própria personalização abaixo. Altere os valores entre aspas ' '. {% endcomment %} {% assign swatch_size = '3vw' %} {% comment %} Altere o tamanho da amostra de cor abaixo. {% endcomment %} {% assign swatch_shape = 'round-edge' %} {% comment %} Altere o formato da amostra. Use 'redondo', 'quadrado', 'retângulo' ou 'borda arredondada'. {% endcomment %} {% assign option_name = 'Color' %} {% comment %} Atribua o nome da opção que você selecionou. Pode ser 'Cor' ou '색상'. {% endcomment %} {% assign picker_type = picker_type %} {% assign img_link = white | file_url %} {% assign color_file = settings.colorSwatch | strip_html | prepend: '{' | append: '}' | downcase | parse_json %} {% assign img_file = settings.colorImg | strip_html | prepend: '{' | append: '}' | downcase | parse_json %} {%- unless product.has_only_default_variant -%} {%- if picker_type == 'button' -%} <variant-radios class="no-js-hidden" data-section=" {{ section.id }} " data-url=" {{ product.url }} " {{ block.shopify_attributes }} > {%- for option in product.options_with_values -%} <fieldset {% if option.name == option_name %} class="swatchComponent" style=" padding: 0;" {% else %} class="js product-form__input" style="border:none" {% endif %} > {% if option.name == option_name %} <legend class="form__label"> {{ option.name }} </legend> <div class="swatchContainer"> {% assign values = option.values %} {%- for value in option.values -%} <input class="inputColor" nome=" {{ option.name }} " valor=" {{ value | escape }} " form="formulário-produto- {{ section.id }} " type="rádio" id=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " {% if option.selected_value == value %} verificado {% endif %} > <label class="labelColor" for=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " data-color=" {{value | downcase | replace: ' ', '-' }} " estilo = " {% case swatch_shape %} {% when 'round' %} raio da borda: 50%; proporção: 1; {% when 'square' %} proporção de aspecto: 1; {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2); {% when 'round-edge' %} raio da borda: 15%; proporção: 1; {% endcase %} "> </label> <div class="infoColor" > <img src="" alt="" data-info-image=" {{value | downcase | replace: ' ', '-' }} " > {{value | escape}} </div> {% endfor %} </div> {% else %} <legend class="form__label"> {{ option.name }} </legend> {%- for value in option.values -%} <input type="radio" id=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " nome=" {{ option.name }} " valor=" {{ value | escape }} " form="formulário-produto- {{ section.id }} " {% if option.selected_value == value %} verificado {% endif %} > <label for=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} "> {{ value }} </label> {%- endfor -%} {% endif %} </fieldset> {% endfor -%} <script type="aplicativo/json"> {{ product.variants | json }} </script> </variant-radios> {%- else -%} <variant-selects class="no-js-hidden" data-section=" {{ section.id }} " data-url=" {{ product.url }} " {{ block.shopify_attributes }} > {%- for option in product.options_with_values -%} <fieldset class="swatchComponent" style=" padding: 0; {% if option.name != option_name %} display: none {% endif %} "> {% if option.name == option_name %} <legend class="form__label"> {{ option.name }} </legend> <div class="swatchContainer"> {% assign values = option.values %} {%- for value in option.values -%} <input class="inputColor" nome=" {{ option.name }} " valor=" {{ value | escape }} " form="formulário-produto- {{ section.id }} " type="rádio" id=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " {% if option.selected_value == value %} verificado {% endif %} > <label class="labelColor" for=" {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " data-color=" {{value | downcase | replace: ' ', '-' }} " estilo = " {% case swatch_shape %} {% when 'round' %} raio da borda: 50%; proporção: 1; {% when 'square' %} proporção de aspecto: 1; {% when 'rectangle' %} altura: calc( {{swatch_size}} / 2); {% when 'round-edge' %} raio da borda: 15%; proporção: 1; {% endcase %} "> </label> <div class="infoColor" > <img src="" alt="" data-info-image=" {{value | downcase | replace: ' ', '-' }} " > {{value | escape}} </div> {% endfor %} </div> {% endif %} </fieldset> <div class="product-form__input product-form__input--dropdown" {% if option.name == option_name %} style="display: none" {% endif %} > <label class="form__label" for="Option- {{ section.id }} - {{ forloop.index0 }} "> {{ option.name }} </label> <div class="selecionar"> <select id="Option- {{ section.id }} - {{ forloop.index0 }} " class="selecionar__selecionar" nome = "opções[ {{ option.name | escape }} ]" formulário=" {{ product_form_id }} "> {%- for value in option.values -%} <option value=" {{ value | escape }} " {% if option.selected_value == value %} selecionado="selecionado" {% endif %} > {{ value }} </opção> {%- endfor -%} </selecionar> {% render 'icon-caret' %} </div> </div> {%- endfor -%} <script type="aplicativo/json"> {{ product.variants | json }} </script> </variant-selects> {%- endif -%} {%- endunless -%} <noscript class="product-form__noscript-wrapper- {{ section.id }} "> <div class="product-form__input {% if product.has_only_default_variant %} oculto {% endif %} "> <label class="form__label" for="Variantes- {{ section.id }} "> {{ 'products.product.product_variants' | t }} </label> <div class="selecionar"> <select name="id" id="Variantes- {{ section.id }} " class="select__select" form=" {{ product_form_id }} "> {%- for variant in product.variants -%} <opção {% if variant == product.selected_or_first_available_variant %} selecionado="selecionado" {% endif %} {% if variant.available == false %} desabilitado {% endif %} valor=" {{ variant.id }} "> {{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }} {% endif %} - {{ variant.price | money | strip_html }} </opção> {%- endfor -%} </selecionar> {% render 'icon-caret' %} </div> </div> </noscript> <roteiro> caminho const = window.location.pathname; variante const = document.querySelector(`[data-url="${path}"]`); const imgRaw = JSON.stringify(" {{img_file}} "); const imgSplit = imgRaw.split(/[,]/).map(col => col.replace(/[\"\s{}]/g, '')).map(s => s.split(' .')); const imgJSON = Object.fromEntries(imgSplit); for(const img em imgJSON) { const val = `${imgJSON[img]}`; const swatchImg = variante.querySelector(`[data-color="${img}"]`); const infoImg = variante.querySelector(`[data-info-image="${img}"]`); const imgLink = ' {{img_link}} '; if(swatchImg){ const nomedaimagem = `${img}.${val}`; const assetUrl = imgLink.split('?')[0] + `${imageName}`; swatchImg.style.backgroundImage = `url('${assetUrl}')`; if(infoImg){ infoImg.src=assetUrl; infoImg.style.display = 'bloquear'; } } } console.log('Isto é para imagens:', imgJSON); const colorRaw = JSON.stringify(" {{color_file}} "); const colorSplit = colorRaw.split(/[,]/).map(col => col.replace(/[\"\s{}]/g, '')).map(s => s.split(' :')); const colorJSON = Object.fromEntries(colorSplit); const rótulos = document.querySelectorAll('.labelColor'); for(const cor em colorJSON) { const val = `${colorJSON[cor]}`; const swatchColor = variante.querySelector(`[data-color="${color}"]`); valores const = ' {{values}} '; if(swatchColor){ amostraColor.style.backgroundColor = val; } } console.log('Isto é para cores:', colorJSON); rótulos.forEach((label) => { if(label.style.backgroundColor == '' ){label.classList.add('no-background')}} ) const optionName = ' {{option_name}} '; rádios const = variante.querySelectorAll('.inputColor'); const select = variante.querySelector(`select[name='options[${optionName}]']`); se(selecione) { rádios.forEach((elem) => { elem.addEventListener("clique", function(evento) { var item = evento.target.value; selecione.valor = item; }); }); } </script> <estilo> conjunto de campos{ -webkit-touch-callout: nenhum; /* Safári iOS */ -webkit-user-select: nenhum; /* Safári */ -khtml-user-select: nenhum; /* HTML do Konqueror */ -moz-user-select: nenhum; /* Versões antigas do Firefox */ -ms-user-select: nenhum; /* Internet Explorer/Edge */ seleção de usuário: nenhum; } .swatchComponent{ exibição: flexível; margem: 5% 0; dimensionamento de caixa: caixa de borda; posição: relativa; fronteira: nenhuma; } .swatchContainer { exibição: flexível; flex-wrap: envoltório; justificar-conteúdo: centro; largura: 100%; } .inputColor { Mostrar nenhum; } .labelColor { largura: {{swatch_size}} ; margem: 1%; exibição: flexível; justificar-conteúdo: centro; alinhar itens: centro; cursor: ponteiro; estouro: oculto; transição: todos os .3s facilitam; } .sem plano de fundo { plano de fundo: gradiente linear de repetição (45deg, #e8e4e4, #e8e4e4 5px, #fff -2px, #fff 9px); posição de fundo: centro; tamanho de fundo: 5vw; } .labelColor:hover{ transformar: escala(1,1); } .infoColor { Mostrar nenhum; largura: 100%; preenchimento: 4%; ordem: 999; justificar-conteúdo: flex-start; alinhar itens: centro; sombra da caixa: 0px 0px 5px rgb(0 0 0/80%); raio da borda: 5px; margem superior: 20px; } .infoColor img { largura: 100px; /* tamanho da imagem na aba de descrição */ proporção: 1; ajuste ao objeto: capa; estouro: oculto; Mostrar nenhum; margem direita: 20px; } .inputColor:marcado + .labelColor + .infoColor { exibição: flexível; } .inputColor:marcado + .labelColor { contorno: 2px sólido; borda: 2px branco sólido; } </estilo> |
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
| {% render 'color-swatch', picker_type: block.settings.picker_type %} |
8. Vá para a pasta Config e abra settings_schema.json e cole o código antes do último colchete, ']'.
| , { "nome": "cor da amostra", "configurações": [ { "tipo": "texto rico", "id": "colorSwatch", "label": "Digite a cor que deseja incluir na amostra", "default": "<p> preto mesclado: #3f3f3f, preto: #2f2f2f, cinza mesclado: #c5c5c5, branco: #bebeb<\/p>", "info": " Use '-' se for uma cor com duas palavras. Separe a cor com vírgula. Veja o padrão" }, { "tipo": "texto rico", "id": "colorImg", "label": "Insira a imagem e forneça aqui o nome que deseja incluir na amostra", "default": "<p> heather-black.jpg, black.png, heather-gray.gif, white.png<\/p>", "info": "Use '-' se for uma cor de duas palavras. A extensão do arquivo deve corresponder ao arquivo enviado. Separe a imagem com vírgula. Veja o padrão" } ] } |
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".
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.
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
Hi
The Shift+Tab is not working for me so the code remains the same when copied
thank you for your big work!
Hi there, the code doesn’t seem to work. Are you able to update this? :) thanks!