Compatibilidade: Compatível com qualquer versão do Dawn e qualquer Temas GRATUITOS do Shopify 2.0 .
No mundo visualmente orientado do varejo on-line, a apresentação é tudo. Para proprietários de lojas do Shopify que usam o tema Dawn, as amostras de cores oferecem uma maneira dinâmica de mostrar variações de produtos. Este blog irá guiá-lo na adição de amostras de cores Dawn à sua loja, aprimorando as páginas de produtos e coleções com uma exibição mais interativa e visualmente atraente.
Por que usar amostras de cores no Shopify Dawn? As amostras de cores convertem o menu suspenso tradicional para variantes de produtos em um formato mais atraente visualmente e fácil de usar. Isso não apenas melhora a experiência do usuário, mas também fornece uma visão mais clara das opções de produtos disponíveis.
Benefícios de adicionar amostras de cores:
- Apelo visual aprimorado : fornece uma maneira mais atraente e envolvente de exibir variantes.
- Experiência do usuário aprimorada : torna mais fácil para os clientes visualizar e selecionar opções de produtos.
- Melhor exibição do produto nas páginas da coleção : mostra aos clientes em potencial a variedade de opções disponíveis diretamente na página da coleção.
Você pode conferir a loja de demonstração aqui . Senha: made4uo
O que você está comprando:
- Uma amostra com instruções de opções para alterar o estilo. Por favor, certifique-se de ler {% comment %} no código
- Capaz de usar com seletor de variantes select ou radios
- Capaz de adicionar amostras aos cartões de coleção
- Certifique-se de atribuir a opção de cor como primeira opção para que isso funcione
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Acesse Loja Online > Temas > Ações > Editar Código.
Se você tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:
2. Vá para a pasta Snippet e abra o arquivo “product-variant-picker.liquid”. Substitua o código pelo código abaixo.
NOTA: Por favor, veja os nomes das opções no código, se o nome da sua opção para cor não for "Cor", "Estilo" ou "Cor", adicione o nome com uma vírgula no meio do código. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.
{ % atribuir option_name = 'Cor, Estilo, Cor' % } { % atribuir tamanho_amostra = '3vw' % } { % comment % } Altere o tamanho da amostra de cor abaixo. { % comentário final % } { % atribuir forma_de_amostra = 'borda arredondada' % } { % comment % } Altere o formato da amostra. Use 'round' , 'square' , 'rectangle' ou 'round-edge' . { % comentário final % } <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 ; } . amostraComponent { exibição : flexível ; margem : 5 % 0 ; dimensionamento da caixa : caixa de borda ; posição : relativa ; borda : nenhuma ; } . amostraContainer { exibição : flexível ; flex - wrap : wrap ; largura : 100 %; } . inputColor { Mostrar nenhum ; } . produto - form__input entrada [ tipo = "rádio" ] + . etiquetaCor { largura : { { tamanho_da_amostra } } ; largura mínima : 30px ; margem : 1 %; display : bloco embutido ; cursor : ponteiro ; estouro : oculto ; transição : todos os 0,3s facilitam ; preenchimento : 0 ; } . labelColor : pairar { transformar : escala ( 1.1 ) ; } . etiquetaCor img { ajuste ao objeto : capa ; largura : 100 %; altura : 100 %; } . inputColor : verificado + . etiquetaCor + . infoCor { exibição : flexível ; } . inputColor : verificado + . etiquetaCor { contorno : 2px sólido ; borda : 2px branco sólido ; } </ estilo > { %- líquido atribuir variantes_disponíveis_arr = produto. variantes | mapa : 'disponível' atribuir variantes_option1_arr = produto. variantes | mapa : 'opção1' atribuir variantes_option2_arr = produto. variantes | mapa : 'opção2' atribuir variantes_option3_arr = produto. variantes | mapa : 'opção3' atribuir product_form_id = 'formulário-produto-' | anexar : seção. eu ia -% } { %- a menos que produto. has_only_default_variant -% } { % -se bloco. configurações . picker_type == 'botão' -% } < variante - rádios id = "variant-radios- {{ section.id }} " class = "no-js-hidden" dados - seção = " {{ section.id }} " dados -url = " {{ product.url }} " { % se update_url == falso % } dados - atualização - url = "falso" { % fim se % } { { bloquear. shopify_atributos } } > { %- para opção no produto. opções_com_valores -% } < fieldset class = "js product-form__input" > { % se option_name contiver opção. nome % } < classe de legenda = "form__label" > { { opção. nome - } } < cor - nome </ cor - nome > </ legenda > { %- para valor na opção. valores -% } { %- para productOption em produto. variantes -% } { %- se opçãoproduto. opções [ 0 ] == valor -% } { % atribuir productVariantImage = productOption. imagem em destaque % } { %- fim se -% } { %- fim para -% } { %- líquido atribuir opção_disabled = verdadeiro para option1_name em variantes_option1_arr opção de caso . posição quando 1 if variantes_option1_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se quando 2 if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se quando 3 if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. índice0 ] == produto. selecionado_ou_primeira_variável_disponível . opção2 e variantes_option3_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se caso final fim para -% } < entrada tipo = "rádio" id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " nome = " {{ option.name }} " valor = " {{ value | escape }} " formulário = " {{ product_form_id }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } { % se opção_desativada % } classe = "desabilitado" { % fim se % } > < rótulo for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " dados - 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 %} " class = "labelColor" > < imagem src = " {{- productVariantImage | image_url: width: 100 | uniq -}} " largura = "50" altura = "50" alt = " {{- productVariantImage.alt -}} " > < span class = "visualmente oculto" > { { 'products.product.variant_sold_out_or_unavailable' | t } } </ span > </ rótulo > { % fim para % } { % outro % } < classe de legenda = "form__label" > { { opção. nome } } </ legenda > { % renderizar 'opções de variante de produto' , produto : produto , opção : opção , bloco : bloco % } { % fim se % } </ conjunto de campos > { %- fim para -% } < tipo de script = "aplicativo/json" > { { produtos. variantes | json } } </roteiro> _ </ variante - rádios > { %- outro -% } < variante - seleciona id = "variant-selects- {{ section.id }} " class = "no-js-hidden" dados - seção = " {{ section.id }} " dados -url = " {{ product.url }} " { % se update_url == falso % } dados - atualização - url = "falso" { % fim se % } { { bloquear. shopify_atributos } } > { %- para opção no produto. opções_com_valores -% } < div class = "produto-form__input produto-form__input--dropdown" > { % se option_name contiver opção. nome % } < classe de legenda = "form__label" > { { opção. nome - } } < cor - nome </ cor - nome > </ legenda > { %- para valor na opção. valores -% } { %- para productOption em produto. variantes -% } { %- se opçãoproduto. opções [ 0 ] == valor -% } { % atribuir productVariantImage = productOption. imagem em destaque % } { %- fim se -% } { %- fim para -% } { %- líquido atribuir opção_disabled = verdadeiro para option1_name em variantes_option1_arr opção de caso . posição quando 1 if variantes_option1_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se quando 2 if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se quando 3 if option1_name == produto. selecionado_ou_primeira_variável_disponível . opção1 e variantes_option2_arr [ forloop. índice0 ] == produto. selecionado_ou_primeira_variável_disponível . opção2 e variantes_option3_arr [ forloop. index0 ] == valor e variantes_available_arr [ forloop. índice0 ] atribuir opção_disabled = falso fim se caso final fim para -% } < entrada tipo = "rádio" id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " nome = " {{ option.name }} " valor = " {{ value | escape }} " formulário = " {{ product_form_id }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } { % se opção_desativada % } classe = "desabilitado" { % fim se % } > < rótulo for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " dados - 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 %} " class = "labelColor" > < imagem src = " {{- productVariantImage | image_url: width: 100 | uniq -}} " largura = "50" altura = "50" alt = " {{- productVariantImage.alt -}} " > < span class = "visualmente oculto" > { { 'products.product.variant_sold_out_or_unavailable' | t } } </ span > </ rótulo > { % fim para % } { % outro % } < label class = "form__label" for = "Opção- {{ section.id }} - {{ forloop.index0 }} " > { { opção. nome } } </ rótulo > < div classe = "selecionar" > < selecione id = "Opção- {{ section.id }} - {{ forloop.index0 }} " classe = "select__select" nome = "opções[ {{ option.name | escape }} ]" formulário = " {{ product_form_id }} " > { % renderizar 'opções de variante de produto' , produto : produto , opção : opção , bloco : bloco % } </ selecione > { % renderizar 'ícone-caret' % } </div> _ _ { % fim se % } </div> _ _ { %- fim para -% } < tipo de script = "aplicativo/json" > { { produtos. variantes | json } } </roteiro> _ </ variante - seleciona > { %- fim se -% } { %- sem fim -% } < noscript class = "produto-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 }} " > { { - 'produtos.produto.produtos_variantes' | t - } } </ rótulo > < div classe = "selecionar" > < selecione nome = "id" id = "Variantes- {{ section.id }} " classe = "select__select" formulário = " {{ product_form_id }} " > { %- para variante no produto. variantes -% } < opção { % se variante == produto. selecionado_ou_primeira_variável_disponível % } selecionado = "selecionado" { % fim se % } { % se variante. disponível == falso % } desabilitado { % fim se % } valor = " {{ variant.id }} " > { %- líquido variante de eco. título variante de eco. preço | dinheiro | tira_html | acrescentar : '-' se variante. disponível == falso echo 'produtos.produto.esgotado' | t | acrescentar : '-' fim se se variante. regra_quantidade . incremento > 1 echo 'produtos.produto.quantidade.múltiplos_de' | t : quantidade : variante. regra_quantidade . incremento | acrescentar : '-' fim se se variante. regra_quantidade . min > 1 echo 'produtos.produto.quantidade.mínimo_de' | t : quantidade : variante. regra_quantidade . min | acrescentar : '-' fim se se variante. regra_quantidade . máximo ! = nulo echo 'produtos.produto.quantidade.máximo_de' | t : quantidade : variante. regra_quantidade . máximo | acrescentar : '-' fim se # TODO: habilite a verificação de tema assim que `item_count_for_variant` for aceito como filtro válido #tema-verificação-desativar atribuir cart_quantity = carrinho | item_count_for_variant : variante. eu ia #tema-check-enable se quantidade_carrinho > 0 echo 'produtos.produto.quantidade.in_cart_html' | t : quantidade : quantidade_carrinho | acrescentar : '-' fim se -% } </ opção > { %- fim para -% } </ selecione > { % renderizar 'ícone-caret' % } </div> _ _ </div> _ _ </noscript> _ <roteiro> _ classe VariantColor estende HTMLElement { construtor ( ) { super ( ) ; esse . inputColors = isto . querySelectorAll ( '.inputColor' ) ; esse . inputColors . forEach ( color => color. addEventListener ( 'clique' , this . colorSelected . bind ( this ) ) )) ; } colorSelected ( evento ) { const selecione = documento. querySelector ( ` .colorSelect` ) ; item const = evento. atualTarget . valor ; selecione. valor = item ; } } elementos personalizados. define ( 'cor-variante' , VariantColor ) ; </roteiro> _ |
Se você NÃO tiver o arquivo product-variant-picker.liquid na pasta Snippet, siga as instruções abaixo:
2. Abra o arquivo main-product.liquid na pasta Section e encontre o código abaixo.
| {%- when 'variant_picker' -%} |
3. Precisamos substituir o código entre o código da Etapa 2 e o código abaixo, pelo código da Etapa 4.
| {%- when 'buy_buttons' -%} |
NOTA: Se você tiver um nome "Cor" diferente de "Cor", "Estilo" ou "Cor", será necessário alterar o nome_da_opção. É sensível a maiúsculas e minúsculas. Você também pode alterar o tamanho da amostra alterando a variável swatchSize.
{ % atribuir option_name = 'Cor, Estilo, Cor' % } { % atribuir tamanho_amostra = '3vw' % } { % comment % } Altere o tamanho da amostra de cor abaixo. { % comentário final % } { % atribuir forma_de_amostra = 'borda arredondada' % } { % comment % } Altere o formato da amostra. Use 'round' , 'square' , 'rectangle' ou 'round-edge' . { % comentário final % } { %- a menos que produto. has_only_default_variant -% } { % atribuir tipo_picker = bloco. configurações . selecionador_type % } { %- if picker_type == 'botão' -% } < variante - rádios class = "no-js-hidden" dados - seção = " {{ section.id }} " dados -url = " {{ product.url }} " { { bloquear. shopify_atributos } } > { %- para opção no produto. opções_com_valores -% } < conjunto de campos { % se option_name contiver opção. nome % } class = "swatchComponent" style = " preenchimento: 0;" { % outro % } class = "js product-form__input" style = "border:none" { % fim se % } > { % se option_name contiver opção. nome % } < classe de legenda = "form__label" > { { opção. nome - } } < cor - nome </ cor - nome > </ legenda > < div class = "swatchContainer" > { % atribuir productVariantImage = '' % } { %- para valor na opção. valores -% } { %- para productOption em produto. variantes -% } { %- se opçãoproduto. opções [ 0 ] == valor -% } { % atribuir productVariantImage = productOption. imagem em destaque % } { %- fim se -% } { %- fim para -% } < entrada class = "inputColor" nome = " {{ option.name }} " valor = " {{ value | escape }} " form = "formulário-produto- {{ section.id }} " tipo = "rádio" id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } > < rótulo class = "labelColor" for = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " dados - 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 %} " > < imagem src = " {{- productOption.featured_image | image_url: width: 100 | uniq -}} " largura = "50" altura = "50" alt = " {{- productOption.featured_image.alt -}} " > </ rótulo > { % fim para % } </div> _ _ { % outro % } < classe de legenda = "form__label" > { { opção. nome - } } < cor - nome </ cor - nome > </ legenda > { %- para valor na opção. valores -% } < entrada tipo = "rádio" id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " nome = " {{ option.name }} " valor = " {{ value | escape }} " form = "formulário-produto- {{ section.id }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } > < rótulo para = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " > { { valor } } </ rótulo > { %- fim para -% } { % fim se % } </ conjunto de campos > { % fim para -% } < tipo de script = "aplicativo/json" > { { produtos. variantes | json } } </roteiro> _ </ variante - rádios > { %- outro -% } < variante - seleciona class = "no-js-hidden" dados - seção = " {{ section.id }} " dados -url = " {{ product.url }} " { { bloquear. shopify_atributos } } > { %- para opção no produto. opções_com_valores -% } { % se option_name contiver opção. nome % } < variante - cor > < fieldset class = "swatchComponent" style = "preenchimento: 0;" > < classe de legenda = "form__label" > { { opção. nome - } } < cor - nome </ cor - nome > </ legenda > < div class = "swatchContainer" > { % atribuir productVariantImage = '' % } { %- para valor na opção. valores -% } { %- para productOption em produto. variantes -% } { %- se opçãoproduto. opções [ 0 ] == valor -% } { % atribuir productVariantImage = productOption. imagem em destaque % } { %- fim se -% } { %- fim para -% } < entrada class = "inputColor" nome = " {{ option.name }} " valor = " {{ value | escape }} " form = "formulário-produto- {{ section.id }} " tipo = "rádio" id = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } > < rótulo class = "labelColor" for = " {{ section.id }} - {{ option.name }} - {{ forloop.index0 }} " 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 %} " > < imagem src = " {{- productVariantImage | image_url: width: 100 | uniq -}} " largura = "50" altura = "50" alt = " {{- productVariantImage.alt -}} " > </ rótulo > { % fim para % } </div> _ _ </ conjunto de campos > </ variante - cor > { % fim se % } < div class = "produto-form__input produto-form__input--dropdown" { % se option_name contiver opção. nome % } estilo = "display: nenhum" { % fim se % } > < label class = "form__label" for = "Opção- {{ section.id }} - {{ forloop.index0 }} " > { { opção. nome } } </ rótulo > < div classe = "selecionar" > < selecionar id = "Opção- {{ section.id }} - {{ forloop.index0 }} " class = "select__select {% if option_name contains option.name %} colorSelect {% endif %} " nome = "opções[ {{ option.name | escape }} ]" formulário = " {{ product_form_id }} " > { %- para valor na opção. valores -% } < opção valor = " {{ value | escape }} " { % se opção. valor_selecionado == valor % } selecionado = "selecionado" { % fim se % } > { { valor } } </ opção > { %- fim para -% } </ selecione > { % renderizar 'ícone-caret' % } </div> _ _ </div> _ _ { %- fim para -% } < tipo de script = "aplicativo/json" > { { produtos. variantes | json } } </roteiro> _ </ variante - seleciona > { %- fim se -% } { %- sem fim -% } < noscript class = "produto-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 } } </ rótulo > < div classe = "selecionar" > < select name = "id" id = "Variantes- {{ section.id }} " class = "select__select" form = " {{ product_form_id }} " > { %- para variante no produto. variantes -% } < opção { % se variante == produto. selecionado_ou_primeira_variável_disponível % } selecionado = "selecionado" { % fim se % } { % se variante. disponível == falso % } desabilitado { % fim se % } valor = " {{ variant.id }} " > { { variante. título } } { %- se variante. disponível == falso % } - { { 'produtos.produto.sold_out' | t } } { % endif % } - { { variante. preço | dinheiro | tira_html } } </ opção > { %- fim para -% } </ selecione > { % renderizar 'ícone-caret' % } </div> _ _ </div> _ _ </noscript> _ <roteiro> _ classe VariantColor estende HTMLElement { construtor ( ) { super ( ) ; esse . inputColors = isto . querySelectorAll ( '.inputColor' ) ; esse . inputColors . forEach ( color => color. addEventListener ( 'clique' , this . colorSelected . bind ( this ) ) )) ; } colorSelected ( evento ) { const selecione = documento. querySelector ( ` .colorSelect` ) ; item const = evento. atualTarget . valor ; selecione. valor = item ; } } elementos personalizados. define ( 'cor-variante' , VariantColor ) ; </roteiro> _ <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 ; } . amostraComponent { exibição : flexível ; margem : 5 % 0 ; dimensionamento da caixa : caixa de borda ; posição : relativa ; borda : nenhuma ; } . amostraContainer { exibição : flexível ; flex - wrap : wrap ; largura : 100 %; } . inputColor { Mostrar nenhum ; } . etiquetaCor { largura : { { tamanho_da_amostra } } ; largura mínima : 30px ; margem : 1 %; exibição : flexível ; justificar - conteúdo : centro ; alinhar - itens : centro ; cursor : ponteiro ; estouro : oculto ; transição : todos os .3s facilitam ; } . labelColor : pairar { transformar : escala ( 1.1 ) ; } . etiquetaCor img { ajuste ao objeto : capa ; largura : 100 %; } . inputColor : verificado + . etiquetaCor + . infoCor { exibição : flexível ; } . inputColor : verificado + . etiquetaCor { contorno : 2px sólido ; borda : 2px branco sólido ; } </ estilo > |
Retome as instruções aqui dependendo da versão do tema que você possui.
1. Mostrar fotos da cor da variante não será suficiente, temos que fornecer o nome da variante de cor que estão escolhendo. Portanto, precisamos do script abaixo. Vá para global.js na pasta Asset e adicione o código abaixo.
class ColorName estende HTMLElement { construtor ( ) { super ( ) ; esse . cor = isto . paiNode . texto interno ; esse . optionSelects = isto . paiNode . parentNode ; esse . opçãoSeleciona . addEventListener ( 'alterar' , este . colorRender . vincular ( isto ) ) esse . colorRender ( ) ; } colorRender ( ) { esse . cor selecionada = documento. querySelector ( `input [ name = "${this.color}" ] : verificado` ) . valor ; esse . Texto interno = ` : $ { this . cor selecionada . charAt ( 0 ) . toUpperCase ( ) + this . cor selecionada . fatia ( 1 ) } ` ; } } elementos personalizados. define ( 'nome da cor' , ColorName ) ; |
Se você quiser mostrar a amostra em um cartão de produto, prossiga com as etapas a seguir.
1. Abra o card-product.liquid na pasta Snippet. Em seguida, encontre as "informações do cartão". Existem dois deles, certifique-se de que seja o primeiro . Cole o código abaixo antes das "informações do cartão. Clique em Enter para iniciar uma nova linha. Veja a imagem abaixo para posicionamento.
{ % comentário % } ============================================= ================================================= ============== { % comentário final % } { % atribuir colorName = 'Cor' % } { % comment % } Forneça o nome da cor. Certifique -se de colocá-lo entre aspas { % endcomment % } { % atribuir swatchSize = '4rem' % } { % comment % } Você pode usar rem , px , %, etc. Certifique -se de colocá-lo entre aspas { % endcomment % } { % comentário % } ============================================= ================================================= ============== { % comentário final % } { %- para opção em card_product. opções_com_valores -% } { % se opção. nome == corNome % } < fieldset class = "js product-form__input" > <legenda> { { opção . nome } } </ legenda > { %- para valor na opção. limite de valores : 5 -% } < entrada tipo = "rádio" id = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " nome = " {{ option.name }} " valor = " {{ value | escape }} " formulário = " {{ product_form_id }} " { % se opção. valor_selecionado == valor % } verificado { % fim se % } > < rótulo for = " {{ section.id }} - {{ option.position }} - {{ forloop.index0 }} " class = " {% if option.name == colorName %} colorLabel {% endif %} " > { % se opção. nome == corNome % } { %- para productOption em card_product. variantes -% } { %- se opçãoproduto. opções [ 0 ] == valor e productOption. imagem_em destaque != em branco -% } < imagem src = " {{- productOption.featured_image | image_url: width: 100 | uniq -}} " largura = "50" altura = "50" alt = " {{- productOption.featured_image.alt -}} " > { %- fim se -% } { %- fim para -% } { % fim se % } </ rótulo > { %- fim para -% } { % se opção. valores . tamanho > 5 -% } < strong class = "plusMore" > + Mais </ strong > { %- fim se % } </ conjunto de campos > { % fim se % } { % fim para % } < tipo de script = "aplicativo/json" > { { cartão_produto. variantes | json } } </roteiro> _ < estilo com escopo > conjunto de campos { borda : nenhuma ; preenchimento : 0 ; } . colorLabel { preenchimento : 0 ! importante ; altura : calc ( { { swatchSize } } + var ( -variant - pils - border - width ) ) ; proporção de aspecto : 1 ; borda : var ( -variant - pils - border - width ) sólido transparente ! importante ; borda - raio : 50 %; estouro : oculto ; display : bloco embutido ; margem : 0,7rem 0,5rem 0,2rem 0 ; transição : border var ( -duration - short ) facilidade ; cursor : ponteiro ; posição : relativa ; } . colorLabel : antes de { contente : "" ; posição : absoluta ; topo : calc ( var ( -variant - pils - border - width ) * - 1 ) ; direita : calc ( var ( -variant - pils - border - width ) * - 1 ) ; parte inferior : calc ( var ( -variant - pils - border - width ) * - 1 ) ; esquerda : calc ( var ( -variant - pils - border - width ) * - 1 ) ; z - índice : -1 ; border - radius : var ( -variant - pils - radius ) ; box - shadow : var ( -variant - pils - shadow - horizontal - offset ) var ( -variant - pils - shadow - vertical - offset ) var ( -variante - pílulas - sombra - desfoque - raio ) rgba ( var ( -color - shadow ) , var ( -variant - pils - shadow - opacity ) ) ; } . produto - form__input entrada [ tipo = "rádio" ] { clipe : rect ( 0 , 0 , 0 , 0 ) ; estouro : oculto ; posição : absoluta ; altura : 1px ; largura : 1px ; } rótulo do conjunto de campos > img { largura : { { swatchSize } } ; altura : { { swatchSize } } ; proporção de aspecto : 1 ; } rótulo do conjunto de campos > img : not ( : primeiro - filho ) { Mostrar nenhum ! importante ; } . plusMais { display : bloco embutido ; superior : - 13px ; posição : relativa ; } </ estilo > |
Nota: O tema Dawn tem muitas edições, algumas versões antigas do Dawn eles chamam o produto usando "product_card", a versão mais recente, que uso neste tutorial, usa "card_product".
Dependendo da sua versão do Dawn, você deve alterar parte do código na Etapa 6. Para ver se você tem product_card ou card_product, você pode verificar em card_product.liquid. Veja a imagem abaixo.
Se você não possui card_product, você pode alterar o código simplesmente clicando em Ctrl + F, encontrar "card_product" e alterá-lo para product_card.
É isso (",)
2 comentários
Hi @Jun Hwang,
Thank you for the purchase. We cannot replicate the issue. We also check the view in apple device. Please contact us using the “Chat with us” for faster reply.
Hi,
I just bought the variant image code and it works perfect.
The only problem I’m having right now is that mobile and small screen is ok but when the screen expands or view from desktop, the image height decreases and I’m seeing an white spaces top and bottom of the image variant.
Can you please let me know what could possibly trigger this error
Thank you,