Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11
Devido à atualização recente no tema Dawn, a versão 7.0 do Dawn terá um código muito diferente. Veja o comentário abaixo.
Você tem apenas alguns produtos, mas cada produto tem múltiplas variantes? Exiba seu produto em uma coleção, mas em sua variante. Mostre variantes nas páginas da coleção como produtos separados.
Exibiremos variantes como produtos nas páginas da coleção com uma imagem secundária ao passar o mouse. A variante permite apenas uma imagem atualmente, certo? Podemos adicionar mais imagens usando metacampo.
Isso mostrará todas as variantes do produto. Se você quiser usar apenas cores , consulte este código.
Observação: se o seu produto não tiver uma imagem de variante, ele será exibido como um único produto. Portanto, certifique-se de atribuir uma imagem às suas variantes.
Usei o seguinte metacampo variante abaixo. NOTA: Certifique-se de editar o Namespace e a chave para que correspondam abaixo.

Temos que adicionar metacampo à nossa variante. Em seguida, configure nosso metacampo em nossa variante de produto. Por favor, veja o vídeo para mais informações.
O que você está comprando:
- Uma coleção de produtos, mostrará TODAS as variantes de produtos
- O filtro funciona filtrando o produto e NÃO por variantes
- Você precisará fornecer imagens em destaque para as variantes
- Use a imagem variante do metacampo para fornecer a imagem instantânea
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. Vá para Admin store > Loja Online > Temas > Ações > Editar código.
2. Vá para a pasta Seção e clique em "adicionar uma nova seção", nomeie-a como "coleção de variantes".
{ { 'modelo-coleção.css' | URL_do_asset | folha_de_estilo } } { { 'component-loading-overlay.css' | URL_do_asset | folha_de_estilo } } { { 'component-cartão.css' | URL_do_asset | folha_de_estilo } } { { 'preço-componente.css' | URL_do_asset | folha_de_estilo } } < ligação rel = "pré-carregar" href = " {{ 'component-rte.css' | asset_url }} " as = "estilo" onload = "this.onload=null;this.rel='folha de estilo'" > { % -se seção. configurações . enable_quick_add -% } < link rel = "stylesheet" href = " {{ 'quick-add.css' | asset_url }} " media = "print" onload = "this.media='all'" > < script src = " {{ 'quick-add.js' | asset_url }} " defer = "defer" </ script > < script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script > { %- fim se -% } < noscript > { { 'component-rte.css' | URL_do_asset | folha de estilo_tag } } </ noscript > { %- estilo -% } . seção - { { seção. id } } - preenchimento { preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ; } . variante - wrapper. cartão - invólucro { altura : ajuste - conteúdo ; } . cartão__inner . razão . cartão__media { largura : 100 % } @media screen e ( largura mínima : 750px ) { . seção - { { seção. id } } - preenchimento { preenchimento - topo : { { seção. configurações . padding_top } } px ; preenchimento - inferior : { { seção. configurações . padding_bottom } } px ; } } { %- estilo final -% } < div class = "seção- {{ section.id }} -padding" > { % comment % } Sort é o primeiro elemento tabulável quando o tipo de filtro é vertical { % endcomment % } { % -se seção. configurações . enable_sorting e seção. configurações . tipo_filtro == 'vertical' -% } < faceta - filtros - classe de formulário = "facetas facetas-vertical-classificar largura da página pequena-ocultar no-js-hidden" > < form class = "facetas-vertical-form" id = "FacetSortForm" > < div class = "legenda de classificação de filtros de faceta" > < div class = "facet-filters__field" > < h2 class = "facet-filters__label caption-large text-body" > < rótulo para = "SortBy" > { { 'produtos.facets.sort_by_label' | t } } </ rótulo > </ h2 > < div classe = "selecionar" > { %- atribuir sort_by = coleção. classificar_por | padrão : coleção. default_sort_by -% } < selecione nome = "classificar_por" class = "facet-filters__sort select__select caption-large" id = "Classificar por" ária - descrita por = "a11y-refresh-page-message" > { %- para opção na coleção. opções_de classificação -% } < opção valor = " {{ option.value | escape }} " { % se opção. valor == classificar_por % } selecionado = "selecionado" { % fim se % } > { { opção. nome | escapar } } </ opção > { %- fim para -% } </ selecione > { % renderizar 'ícone-caret' % } </div> _ _ </div> _ _ <noscript> _ < tipo de botão = "enviar" class = "facets__button-no-js botão botão--secundário" > { { 'produtos.facets.sort_button' | } } </ botão > </noscript> _ </div> _ _ < div class = "produto-contagem-vertical light" role = "status" > < h2 class = "produto-contagem__texto corpo-de-texto" > < span id = "ProductCountDesktop" > { %- se coleção. contagem_resultados -% } { { 'templates.search.results_with_count' | t : termos : coleção. termos , contagem : coleção. contagem_resultados } } { %- coleção elsif. produtos_count == coleção. all_products_count -% } { { 'produtos.facets.product_count_simple' | t : contagem : coleção. contagem_produtos } } { %- outro -% } { { 'produtos.facetas.product_count' | t : product_count : coleção. produtos_count , contagem : coleção. contagem_de_produtos_todos } } { %- fim se -% } </span> _ </ h2 > < div class = "loading-overlay__spinner" > < svg aria - oculto = "verdadeiro" focalizável = "falso" role = "apresentação" classe = "girador" viewBox = "0 0 66 66" xmlns = "http://www.w3.org/2000/svg" > < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > </svg> _ </div> _ _ </div> _ _ </ formulário > </ faceta - filtros - formulário > { %- fim se -% } < div class = " {% if section.settings.filter_type == 'vertical' %} facetas-vertical largura da página {% endif %} " > { { 'componente-facetas.css' | URL_do_asset | folha_de_estilo } } < script src = " {{ 'facets.js' | asset_url }} " defer = "defer" </ script > { % -se seção. configurações . enable_filtering ou seção. configurações . habilitar_classificação -% } < à parte aria - labelledby = "verticalTitle" class = "facets-wrapper {% unless section.settings.enable_filtering %} facets-wrapper--no-filters {% endunless %} {% if section.settings.filter_type != 'vertical' %} largura da página {% endif %} " id = "filtros da coleção principal" dados -id = " {{ section.id }} " > { % renderiza 'facetas' , resultados : coleção , enable_filtering : seção. configurações . habilitar_filtro , enable_sorting : seção. configurações . ativar_classificação , filter_type : seção. configurações . tipo_filtro % } </ à parte > { %- fim se -% } < div class = "product-grid-container {% if section.settings.filter_type == 'vertical' and section.settings.collapse_on_larger_devices %} product-grid-container-vertical {% endif %} " id = "ProductGridContainer" > { %- paginar coleção. produtos por seção. configurações . produtos_por_página -% } { %- se coleção. produtos . tamanho == 0 -% } < div class = "coleção de coleção - largura de página vazia" id = "grade de produto" dados - id = " {{ section.id }} " > < div class = "gradiente de sobreposição de carregamento" </ div > < div class = "title-wrapper center" > < h2 class = "título título--primário" > { { 'seções.collection_template.empty' | t - } } <br> _ { { 'seções.collection_template.use_fewer_filters_html' | t : link : coleção. url , classe : 'link sublinhado' } } </ h2 > </div> _ _ </div> _ _ { %- outro -% } < div class = "coleção {% if section.settings.filter_type != 'vertical' %} largura da página {% endif %} " > < div class = "gradiente de sobreposição de carregamento" </ div > < ul id = "grade de produto" dados -id = " {{ section.id }} " classe = " grade grade de produto grade-- {{ section.settings.columns_mobile }} -col-tablet-down grade-- {{ section.settings.columns_desktop }} -col-desktop " > { %- para produto em coleção. produtos -% } { % atribuir varianteImage = true % } { %- para variante no produto. variantes -% } { % se variante. imagem_em destaque != em branco % } { % atribuir varianteImage = true % } { % outro % } { % atribuir varianteImage = false % } { % fim se % } { %- fim para -% } { % se varianteImage % } { %- para variante no produto. variantes -% } { % atribuir carga_preguiçosa = falso % } { % -se forloop. índice > 2 -% } { %- atribuir carga_preguiçosa = true -% } { %- fim se -% } < li class = "grid__item" > { % renderizar 'cartão variante' , card_produto : produto , card_variant : variante , hide_variant_info : seção. configurações . hide_variant_info , show_secondary_image : seção. configurações . mostrar_imagem_secundária , media_aspect_ratio : seção. configurações . proporção_da_imagem , show_vendor : seção. configurações . mostrar_fornecedor , show_rating : seção. configurações . mostrar_classificação , carga_preguiçosa : carga_preguiçosa , show_quick_add : seção. configurações . ativar_quick_add , seção_id : seção. eu ia % } </ li > { %- fim para -% } { % outro % } { % atribuir carga_preguiçosa = falso % } { % -se forloop. índice > 2 -% } { %- atribuir carga_preguiçosa = true -% } { %- fim se -% } < li class = "grid__item" > { % renderiza 'produto-cartão' , card_produto : produto , media_aspect_ratio : seção. configurações . proporção_da_imagem , show_secondary_image : seção. configurações . mostrar_imagem_secundária , show_vendor : seção. configurações . mostrar_fornecedor , show_rating : seção. configurações . mostrar_classificação , carga_preguiçosa : carga_preguiçosa , show_quick_add : seção. configurações . ativar_quick_add , seção_id : seção. eu ia % } </ li > { % fim se % } { %- fim para -% } </ul> _ { %- se paginar. páginas > 1 -% } { % render 'paginação' , paginar : paginar , âncora : '' % } { %- fim se -% } </div> _ _ { %- fim se -% } { %- endpaginate -% } </div> _ _ </div> _ _ </div> _ _ { % esquema % } { "nome" : "t:seções.main-collection-product-grid.name" , "classe" : "seção" , "configurações" : [ { "tipo" : "intervalo" , "id" : "produtos_por_página" , "min" : 8 , "máximo" : 24 , " Passo 4 , "padrão" : 16 , "label" : "t:sections.main-collection-product-grid.settings.products_per_page.label" } , { "tipo" : "intervalo" , "id" : "colunas_desktop" , "min" : 1 , "máximo" : 5 , " passo 1 , "padrão" : 4 , "label" : "t:sections.main-collection-product-grid.settings.columns_desktop.label" } , { "tipo" : "cabeçalho" , "content" : "t:sections.main-collection-product-grid.settings.header__3.content" } , { "tipo" : "selecionar" , "id" : "image_ratio" , "opções" : [ { "valor" : "adaptar" , "label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label" } , { "valor" : "retrato" , "label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label" } , { "valor" : "quadrado" , "label" : "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label" } ] , "padrão" : "adaptar" , "label" : "t:sections.main-collection-product-grid.settings.image_ratio.label" } , { "tipo" : "caixa de seleção" , "id" : "show_secondary_image" , "padrão" : falso , "label" : "t:sections.main-collection-product-grid.settings.show_secondary_image.label" } , { "tipo" : "caixa de seleção" , "id" : "show_vendor" , "padrão" : falso , "label" : "t:sections.main-collection-product-grid.settings.show_vendor.label" } , { "tipo" : "caixa de seleção" , "id" : "hide_variant_info" , "label" : "Ocultar título da variante" } , { "tipo" : "caixa de seleção" , "id" : "show_rating" , "padrão" : falso , "label" : "t:sections.main-collection-product-grid.settings.show_rating.label" , "info" : "t:sections.main-collection-product-grid.settings.show_rating.info" } , { "tipo" : "caixa de seleção" , "id" : "enable_quick_add" , "padrão" : falso , "label" : "t:sections.main-collection-product-grid.settings.enable_quick_buy.label" } , { "tipo" : "cabeçalho" , "content" : "t:sections.main-collection-product-grid.settings.header__1.content" } , { "tipo" : "caixa de seleção" , "id" : "enable_filtering" , "padrão" : verdadeiro , "label" : "t:sections.main-collection-product-grid.settings.enable_filtering.label" , "info" : "t:sections.main-collection-product-grid.settings.enable_filtering.info" } , { "tipo" : "selecionar" , "id" : "tipo_filtro" , "opções" : [ { "valor" : "horizontal" , "label" : "t:sections.main-collection-product-grid.settings.filter_type.options__1.label" } , { "valor" : "vertical" , "label" : "t:sections.main-collection-product-grid.settings.filter_type.options__2.label" } , { "valor" : "gaveta" , "label" : "t:sections.main-collection-product-grid.settings.filter_type.options__3.label" } ] , "padrão" : "horizontal" , "label" : "t:sections.main-collection-product-grid.settings.filter_type.label" , "info" : "t:sections.main-collection-product-grid.settings.filter_type.info" } , { "tipo" : "caixa de seleção" , "id" : "enable_sorting" , "padrão" : verdadeiro , "label" : "t:sections.main-collection-product-grid.settings.enable_sorting.label" } , { "tipo" : "cabeçalho" , "content" : "t:sections.main-collection-product-grid.settings.header_mobile.content" } , { "tipo" : "selecionar" , "id" : "colunas_mobile" , "padrão" : "2" , "label" : "t:sections.main-collection-product-grid.settings.columns_mobile.label" , "opções" : [ { "valor" : "1" , "label" : "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label" } , { "valor" : "2" , "label" : "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label" } ] } , { "tipo" : "cabeçalho" , "content" : "t:sections.all.padding.section_padding_heading" } , { "tipo" : "intervalo" , "id" : "padding_top" , "min" : 0 , "máximo" : 100 , " Passo 4 , "unidade" : "px" , "label" : "t:sections.all.padding.padding_top" , "padrão" : 36 } , { "tipo" : "intervalo" , "id" : "padding_bottom" , "min" : 0 , "máximo" : 100 , " Passo 4 , "unidade" : "px" , "label" : "t:sections.all.padding.padding_bottom" , "padrão" : 36 } ] } { % termina o esquema % } |
3. Se você deseja atribuir este modelo de coleção como padrão, siga o vídeo.
Caso contrário, precisamos criar um novo modelo de coleção. (Acompanhe o vídeo sobre como). Abra e copie o código em "collection.json" na pasta Template. Em seguida, cole o código no modelo recém-criado.
Dentro do modelo recém-criado, encontre este código “main-collection-product-grid” e substitua pelo nome “variant-collection”.
4. Em seguida, precisamos criar um cartão variante. Abra a pasta Snippet e clique em “Adicionar um novo snippet”. Chame-o de “cartão variante”. Se você possui o Dawn versão 6.0 abaixo, use o código abaixo; caso contrário, use o próximo código.
Para Dawn 6.0 abaixo
{ % Comente % } Renderiza um cartão de produto Aceita : - card_product : { Object } Produto Objeto líquido ( opcional ) - media_aspect_ratio : { String } Tamanho do cartão de imagem do produto. Os valores são "quadrado" e "retrato" . O padrão é "quadrado" ( opcional ) - show_secondary_image : { Boolean } Mostra a imagem secundária ao passar o mouse. Padrão : falso ( opcional ) - show_vendor : { Boolean } Mostra o fornecedor do produto. Padrão : falso - show_rating : { Boolean } Mostra a avaliação do produto. Padrão : falso - extend_height : { Boolean } A altura do cartão se estende ao espaço disponível no contêiner. Padrão : verdadeiro ( opcional ) - preguiçoso_load : { Boolean } A imagem deve ser carregada lentamente. Padrão : verdadeiro ( opcional ) - show_quick_add : { Boolean } Mostra o botão de adição rápida. - section_id : { String } O ID da seção que contém este cartão. Uso : { % render 'cartão variante' , show_vendor : seção. configurações . mostrar_vendor % } { % comentário final % } { { 'classificação do componente.css' | URL_do_asset | folha_de_estilo } } { %- se card_variant e card_variant != vazio -% } { %- líquido atribuir proporção = 1 se card_variant. feature_media e media_aspect_ratio == 'retrato' atribuir proporção = 0,8 elsif card_variant. feature_media e media_aspect_ratio == 'adaptar' atribuir proporção = card_variant. destaque_media . proporção da tela fim se se proporção == 0 ou proporção == nulo atribuir proporção = 1 fim se -% } < div class = "variant-wrapper card-wrapper underline-links-hover" > < div classe = " cartão cartão-- {{ settings.card_style }} {% if card_variant.featured_media %} cartão--mídia {% else %} cartão--texto {% endif %} {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if extend_height %} cartão--extend-height {% endif %} {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %} " style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;" > < div class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_product.featured_media or settings.card_style == 'standard' %} proporção {% endif %} " style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;" > { %- se card_variant. destaque_media -% } < div class = "cartão__media" > < div class = "media media--transparent media--hover-effect" > { % comment % } tema - verificar - desabilitar ImgLazyLoading { % endcomment % } < imagem srcset = " {%- if card_variant.featured_media.width >= 165 -%} {{ card_variant.featured_media | image_url: width: 165 }} 165w, {%- endif -%} {%- if card_variant.featured_media.width >= 360 -%} {{ card_variant.featured_media | image_url: width: 360 }} 360w, {%- endif -%} {%- if card_variant.featured_media.width >= 533 -%} {{ card_variant.featured_media | image_url: width: 533 }} 533w, {%- endif -%} {%- if card_variant.featured_media.width >= 720 -%} {{ card_variant.featured_media | image_url: width: 720 }} 720w, {%- endif -%} {%- if card_variant.featured_media.width >= 940 -%} {{ card_variant.featured_media | image_url: width: 940 }} 940w, {%- endif -%} {%- if card_variant.featured_media.width >= 1066 -%} {{ card_variant.featured_media | image_url: width: 1066 }} 1066w, {%- endif -%} {{ card_variant.featured_media | image_url }} {{ card_variant.featured_media.width }} w " src = " {{ card_variant.featured_media | image_url: width: 533 }} " tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt = " {{ card_variant.featured_media.alt | escape }} " class = "redução de movimento" { % a menos que preguiçoso_load == falso % } carregando = "preguiçoso" { % sem fim % } largura = " {{ card_variant.featured_media.width }} " altura = " {{ card_variant.featured_media.height }} " > { % comment % } tema - verificar - ativar ImgLazyLoading { % endcomment % } { % atribuir meta_image = card_variant. metacampos . meus_campos [ 'imagem secundária' ] % } { % se meta_image ! = Nulo e show_secondary_image % } < imagem src = " {{ meta_image | image_url: width: 533 }} " tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt = " {{ meta_image.alt | escape }} " class = "redução de movimento" carregando = "preguiçoso" largura = " {{ meta_image.width }} " altura = " {{ meta_image.height }} " > { % fim se % } </div> _ _ </div> _ _ { %- fim se -% } </div> _ _ < div class = "cartão__content" > < div class = "cartão__informações" > < h3 class = "card__heading {% if card_variant.featured_media or settings.card_style == 'standard' %} h5 {% endif %} " { % se card_variant. destaque_media ou configurações. estilo_cartão == 'cartão' % } id = "título- {{ section_id }} - {{ card_product.id }} " { % fim se % } > <a href = "{{ card_variant.url }} " class = "full-unstyled-link" > _ {{ card_variant.url }} _ _ _ _ { { cartão_produto. título | escapar } } <br> _ { { card_variant. título | escapar } } </a> _ </ h3 > < div class = "informações do cartão" > { %- se show_vendor -% } < span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > < div class = "legenda com espaçamento entre letras light" > { { card_product. fornecedor } } </ div > { %- fim se -% } < span class = "caption-large light" > { { bloco. configurações . descrição | escape } } </ span > { %- se show_rating e card_product. metacampos . avaliações . avaliação . valor ! = em branco -% } { % líquido atribuir classificação_decimal = 0 atribuir decimal = cartão_produto. metacampos . avaliações . avaliação . valor . classificação | módulo : 1 se decimal >= 0,3 e decimal <= 0,7 atribuir classificação_decimal = 0,5 elsif decimal > 0,7 atribuir classificação_decimal = 1 fim se % } < div classe = "classificação" papel = "img" aria - label = " {{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }} " > < intervalo aria - oculto = "verdadeiro" class = "rating-star color-icon- {{ settings.accent_icons }} " style = "--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }} ; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }} ; --rating -decimal: {{ rating_decimal }} ;" </ intervalo > </div> _ _ < p class = "rating-text caption" > < span aria - oculto = "true" > { { - cartão_produto. metacampos . avaliações . avaliação . valor } } / { { cartão_produto. metacampos . avaliações . avaliação . valor . escala_max - } } </span> _ </ p > < p class = "legenda de contagem de classificação" > < span aria - hidden = "true" > ( { { card_product. metafields . reviews . rating_count } } ) </ span > < span class = "visualmente oculto" > { { - cartão_produto. metacampos . avaliações . contagem_avaliação } } { { 'acessibilidade.total_reviews' | t - } } </span> _ </ p > { %- fim se -% } { % renderizar 'preço' , produto : card_variant , price_class : '' % } </div> _ _ </div> _ _ { %- se show_quick_add -% } < div class = "adição rápida" > { %- atribuir product_form_id = 'adição rápida-' | acrescentar : seção_id | acrescentar : card_variant. eu ia -% } { %- se cartão_produto. has_only_default_variant -% } < produto - formulário > { % -formulário 'produto' , variante_cartão , id : product_form_id , classe : 'forma' , novalidate : 'novalidate' , dados - tipo : 'formulário de adição ao carrinho' -% } < entrada tipo = "oculto" nome = "id" valor = " {{ card_variant.id }} " desabilitado > < botão id = " {{ product_form_id }} -enviar" tipo = "enviar" nome = "adicionar" class = "botão quick-add__submit - botão de largura total - secundário" aria - haspopup = "diálogo" aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} " aria -live = "educado" dados - esgotados - esgotados - mensagem = "true" { % se card_variant. disponível == falso % } desabilitado { % fim se % } > < intervalo > { %- se card_variant. disponível -% } { { 'produtos.produto.add_to_cart' | } } { %- outro -% } { { 'produtos.produto.sold_out' | } } { %- fim se -% } </span> _ < span class = "mensagem esgotada oculta" > { { 'produtos.produto.sold_out' | } } </span> _ < div class = "loading-overlay__spinner oculto" > < svg aria - oculto = "verdadeiro" focalizável = "falso" role = "apresentação" classe = "girador" viewBox = "0 0 66 66" xmlns = "http://www.w3.org/2000/svg" > < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > </svg> _ </div> _ _ </ botão > { %- formulário final -% } </ produto - formulário > { %- outro -% } < modal - dados do abridor - modal = "#QuickAdd- {{ card_product.id }} " > < botão id = " {{ product_form_id }} -enviar" tipo = "enviar" nome = "adicionar" class = "botão quick-add__submit - botão de largura total - secundário" aria - haspopup = "diálogo" aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_product.id }} " dados - produto - url = " {{ card_product.url }} " > { { 'produtos.produto.escolha_opções' | } } < div class = "loading-overlay__spinner oculto" > < svg aria - oculto = "verdadeiro" focalizável = "falso" role = "apresentação" classe = "girador" viewBox = "0 0 66 66" xmlns = "http://www.w3.org/2000/svg" > < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > </svg> _ </div> _ _ </ botão > </ modal - abridor > < quick - add - modal id = "QuickAdd- {{ card_product.id }} " class = "quick-add-modal" > < div função = "diálogo" aria - label = " {{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }} " aria -modal = "verdadeiro" class = "quick-add-modal__content global-settings-popup" tabindex = "-1" > < botão id = "ModalClose- {{ card_product.id }} " tipo = "botão" class = "adição rápida-modal__toggle" aria - label = " {{ 'accessibility.close' | t }} " > { % renderizar 'fechar ícone' % } </ botão > < div id = "QuickAddInfo- {{ card_product.id }} " class = "quick-add-modal__content-info" </ div > </div> _ _ </ rápido - adicionar - modal > { %- fim se -% } </div> _ _ { %- fim se -% } < div class = "card__badge {{ settings.badge_position }} " > { %- se card_variant. disponível == falso -% } < span class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} " > { { - 'produtos.produto.esgotado' | t - } } </span> _ { %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% } < span class = "crachá emblema - cor inferior esquerda {{ settings.sale_badge_color_scheme }} " > { { - 'produtos.produto.em_venda' | t - } } </span> _ { %- fim se -% } </div> _ _ </div> _ _ </div> _ _ </div> _ _ { %- outro -% } < div class = "card-wrapper underline-links-hover" > < div classe = " cartão cartão-- {{ settings.card_style }} cartão--texto {% if extend_height %} cartão--extend-height {% endif %} {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %} " style = "--ratio-percent: 100%;" > < div class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if settings.card_style == 'standard' %} proporção {% endif %} " style = "--ratio-percent: 100%;" > < div class = "cartão__content" > < div class = "cartão__informações" > < h3 classe = "card__heading" > < a role = "link" aria - desativado = "true" class = "full-unstyled-link" > { { 'onboarding.product_title' | } } </a> _ </ h3 > </div> _ _ </div> _ _ </div> _ _ < div class = "cartão__content" > < div class = "cartão__informações" > < h3 class = "card__heading {% if settings.card_style == 'standard' %} h5 {% endif %} " > < a role = "link" aria - desativado = "true" class = "full-unstyled-link" > { { 'onboarding.product_title' | } } </a> _ </ h3 > < div class = "informações do cartão" > { %- se show_vendor -% } < span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > < div class = "legenda com espaçamento entre letras light" > { { 'products.product.vendor' | t } } </ div > { %- fim se -% } { % renderiza 'preço' % } </div> _ _ </div> _ _ </div> _ _ </div> _ _ </div> _ _ { %- fim se -% } |
Para Dawn 7.0 e superior
{ % Comente % } Renderiza um cartão de produto Aceita : - card_product : { Object } Produto Objeto líquido ( opcional ) - media_aspect_ratio : { String } Tamanho do cartão de imagem do produto. Os valores são "quadrado" e "retrato" . O padrão é "quadrado" ( opcional ) - image_shape : { String } Máscara de imagem a ser aplicada ao cartão de imagem do produto. Os valores são "arch" , "blob" , "chevronleft" , " chevronright" , "diamond" , "parallelogram" e "round" . ( opcional ) - show_secondary_image : { Boolean } Mostra a imagem secundária ao passar o mouse. Padrão : falso ( opcional ) - show_vendor : { Boolean } Mostra o fornecedor do produto. Padrão : falso - show_rating : { Boolean } Mostra a avaliação do produto. Padrão : falso - extend_height : { Boolean } A altura do cartão se estende ao espaço disponível no contêiner. Padrão : verdadeiro ( opcional ) - preguiçoso_load : { Boolean } A imagem deve ser carregada lentamente. Padrão : verdadeiro ( opcional ) - show_quick_add : { Boolean } Mostra o botão de adição rápida. - section_id : { String } O ID da seção que contém este cartão. -horizontal_class : { Boolean } Adiciona um cartão - classe horizontal se definido como verdadeiro . Padrão : falso ( opcional ) -horizontal_quick_add : { Boolean } Altera os estilos dos botões de adição rápida quando definido como true . Padrão : falso ( opcional ) - placeholder_image : { String } A imagem do espaço reservado a ser usada quando não existir nenhum produto. Padrão : 'product-apparel-2' ( opcional ) Uso : { % render 'cartão-produto' , show_vendor : seção. configurações . mostrar_vendor % } { % comentário final % } { { 'classificação do componente.css' | URL_do_asset | folha_de_estilo } } { %- se produto_cartão e produto_cartão ! = vazio -% } { %- líquido atribuir proporção = 1 se card_variant. feature_media e media_aspect_ratio == 'retrato' atribuir proporção = 0,8 elsif card_variant. feature_media e media_aspect_ratio == 'adaptar' atribuir proporção = card_variant. destaque_media . proporção da tela fim se se proporção == 0 ou proporção == nulo atribuir proporção = 1 fim se -% } < div class = "card-wrapper product-card-wrapper underline-links-hover" > < div classe = " cartão cartão-- {{ settings.card_style }} {% if card_variant.featured_media %} cartão--mídia {% else %} cartão--texto {% endif %} {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if image_shape and image_shape != 'default' %} cartão - formato {% endif %} {% if extend_height %} cartão--extend-height {% endif %} {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %} Cartão {% if horizontal_class %} - horizontal {% endif %} " style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;" > < div class = "card__inner {% if settings.card_style == 'standard' %} color- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_variant.featured_media or settings.card_style == 'standard' %} proporção {% endif %} " style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;" > { %- se card_variant. destaque_media -% } < div class = "card__media {% if image_shape and image_shape != 'default' %} shape-- {{ image_shape }} color- {{ settings.card_color_scheme }} gradiente {% endif %} " > < div class = "media media--transparent media--hover-effect" > { % comment % } tema - verificar - desabilitar ImgLazyLoading { % endcomment % } < imagem srcset = " {%- if card_variant.featured_media.width >= 165 -%} {{ card_variant.featured_media | image_url: width: 165 }} 165w, {%- endif -%} {%- if card_variant.featured_media.width >= 360 -%} {{ card_variant.featured_media | image_url: width: 360 }} 360w, {%- endif -%} {%- if card_variant.featured_media.width >= 533 -%} {{ card_variant.featured_media | image_url: width: 533 }} 533w, {%- endif -%} {%- if card_variant.featured_media.width >= 720 -%} {{ card_variant.featured_media | image_url: width: 720 }} 720w, {%- endif -%} {%- if card_variant.featured_media.width >= 940 -%} {{ card_variant.featured_media | image_url: width: 940 }} 940w, {%- endif -%} {%- if card_variant.featured_media.width >= 1066 -%} {{ card_variant.featured_media | image_url: width: 1066 }} 1066w, {%- endif -%} {{ card_variant.featured_media | image_url }} {{ card_variant.featured_media.width }} w " src = " {{ card_variant.featured_media | image_url: width: 533 }} " tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt = " {{ card_variant.featured_media.alt | escape }} " class = "redução de movimento" { % a menos que preguiçoso_load == falso % } carregando = "preguiçoso" { % sem fim % } largura = " {{ card_variant.featured_media.width }} " altura = " {{ card_variant.featured_media.height }} " > { % comment % } tema - verificar - ativar ImgLazyLoading { % endcomment % } { %- se card_variant. metacampos . meus_campos . imagem_secundária ! = null e show_secondary_image -% } < imagem srcset = " {%- if card_variant.metafields.my_fields.secondary_image.width >= 165 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 165 }} 165w, {%- endif -%} {%- if card_variant.metafields.my_fields.secondary_image.width >= 360 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 360 }} 360w, {%- endif -%} {%- if card_variant.metafields.my_fields.secondary_image.width >= 533 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 533 }} 533w, {%- endif -%} {%- if card_variant.metafields.my_fields.secondary_image.width >= 720 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 720 }} 720w, {%- endif -%} {%- if card_variant.metafields.my_fields.secondary_image.width >= 940 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 940 }} 940w, {%- endif -%} {%- if card_variant.metafields.my_fields.secondary_image.width >= 1066 -%} {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 1066 }} 1066w, {%- endif -%} {{ card_variant.metafields.my_fields.secondary_image | image_url }} {{ card_variant.metafields.my_fields.secondary_image.width }} w " src = " {{ card_variant.metafields.my_fields.secondary_image | image_url: width: 533 }} " tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt = "" class = "redução de movimento" carregando = "preguiçoso" largura = " {{ card_variant.metafields.my_fields.secondary_image.width }} " altura = " {{ card_variant.metafields.my_fields.secondary_image.height }} " > { %- fim se -% } </div> _ _ </div> _ _ { %- fim se -% } < div class = "cartão__content" > < div class = "cartão__informações" > < h3 classe = "card__heading" { % se card_variant. feature_media == null e configurações. card_style == 'padrão' % } id = "título- {{ section_id }} - {{ card_variant.id }} " { % fim se % } > < um href = " {{ card_variant.url }} " id = "StandardCardNoMediaLink- {{ section_id }} - {{ card_variant.id }} " class = "link sem estilo completo" aria - labelledby = "StandardCardNoMediaLink- {{ section_id }} - {{ card_variant.id }} NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} " > { { cartão_produto. título | escapar } } { % se hide_variant_info == falso % } <br> _ { { card_variant. título | capitalizar } } { % fim se % } </a> _ </ h3 > </div> _ _ < div class = "card__badge {{ settings.badge_position }} " > { %- se card_variant. disponível == falso -% } < intervalo id = "NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} " class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} " > { { - 'produtos.produto.esgotado' | t - } } </span> _ { %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% } < intervalo id = "NoMediaStandardBadge- {{ section_id }} - {{ card_variant.id }} " class = "crachá - cor inferior esquerda {{ settings.sale_badge_color_scheme }} " > { { - 'produtos.produto.em_venda' | t - } } </span> _ { %- fim se -% } </div> _ _ </div> _ _ </div> _ _ < div class = "cartão__content" > < div class = "cartão__informações" > < h3 class = "card__heading {% if card_variant.featured_media or settings.card_style == 'standard' %} h5 {% endif %} " { % se card_variant. destaque_media ou configurações. estilo_cartão == 'cartão' % } id = "título- {{ section_id }} - {{ card_variant.id }} " { % fim se % } > < um href = " {{ card_variant.url }} " id = "CardLink- {{ section_id }} - {{ card_variant.id }} " class = "link sem estilo completo" aria - labelledby = "CardLink- {{ section_id }} - {{ card_variant.id }} Crachá- {{ section_id }} - {{ card_variant.id }} " > { { cartão_produto. título | escapar } } { % se hide_variant_info == falso % } <br> _ { { card_variant. título | capitalizar } } { % fim se % } </a> _ </ h3 > < div class = "informações do cartão" > { %- se show_vendor -% } < span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > < div class = "luz de legenda com espaçamento entre letras" > { { card_variant. fornecedor } } </ div > { %- fim se -% } < span class = "caption-large light" > { { bloco. configurações . descrição | escape } } </ span > { %- se show_rating e card_variant. metacampos . avaliações . avaliação . valor ! = em branco -% } { % líquido atribuir classificação_decimal = 0 atribuir decimal = card_variant. metacampos . avaliações . avaliação . valor . classificação | módulo : 1 se decimal >= 0,3 e decimal <= 0,7 atribuir classificação_decimal = 0,5 elsif decimal > 0,7 atribuir classificação_decimal = 1 fim se % } < div classe = "classificação" papel = "img" aria - label = " {{ 'accessibility.star_reviews_info' | t: rating_value: card_variant.metafields.reviews.rating.value, rating_max: card_variant.metafields.reviews.rating.value.scale_max }} " > < intervalo aria - oculto = "verdadeiro" class = "classificação-estrela" style = "--rating: {{ card_variant.metafields.reviews.rating.value.rating | floor }} ; --rating-max: {{ card_variant.metafields.reviews.rating.value.scale_max }} ; --rating -decimal: {{ rating_decimal }} ;" </ intervalo > </div> _ _ < p class = "rating-text caption" > < span aria - oculto = "true" > { { - card_variant. metacampos . avaliações . avaliação . valor } } / { { card_variant. metacampos . avaliações . avaliação . valor . escala_max - } } </span> _ </ p > < p class = "legenda de contagem de classificação" > < span aria - hidden = "true" > ( { { card_variant. metafields . reviews . rating_count } } ) </ span > < span class = "visualmente oculto" > { { - card_variant. metacampos . avaliações . contagem_avaliação } } { { 'acessibilidade.total_reviews' | t - } } </span> _ </ p > { %- fim se -% } { % renderizar 'preço' , produto : cartão_produto , price_class : '' % } </div> _ _ </div> _ _ { %- se show_quick_add -% } < div class = "adição rápida no-js-hidden" > { %- líquido atribuir product_form_id = 'adição rápida-' | acrescentar : seção_id | acrescentar : card_variant. eu ia atribuir qty_rules = falso se card_variant. regra_quantidade . min > 1 ou card_variant. regra_quantidade . max ! = nulo ou card_variant. regra_quantidade . incremento > 1 atribuir qty_rules = verdadeiro fim se -% } { %- se card_variant. variantes . tamanho > 1 ou qty_rules -% } < modal - dados de abertura - modal = "#QuickAdd- {{ card_variant.id }} " > < botão id = " {{ product_form_id }} -enviar" tipo = "enviar" nome = "adicionar" class = "botão quick-add__submit - botão de largura total - cartão secundário {% if horizontal_quick_add %} - horizontal__quick-add animate-arrow {% endif %} " aria - haspopup = "diálogo" aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} " dados - produto - url = " {{ card_variant.url }} " > { { 'produtos.produto.escolha_opções' | } } { %- se horizontal_quick_add -% } < span class = "icon-wrap" > { % render 'icon-arrow' % } </ span > { %- fim se -% } < div class = "loading-overlay__spinner oculto" > < svg aria - oculto = "verdadeiro" focalizável = "falso" classe = "girador" viewBox = "0 0 66 66" xmlns = "http://www.w3.org/2000/svg" > < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > </svg> _ </div> _ _ </ botão > </ modal - abridor > < quick - add - modal id = "QuickAdd- {{ card_variant.id }} " class = "quick-add-modal" > < div função = "diálogo" aria - label = " {{ 'products.product.choose_product_options' | t: product_name: card_variant.title | escape }} " aria -modal = "verdadeiro" class = "quick-add-modal__content global-settings-popup" tabindex = "-1" > < botão id = "ModalClose- {{ card_variant.id }} " tipo = "botão" class = "adição rápida-modal__toggle" aria - label = " {{ 'accessibility.close' | t }} " > { % renderizar 'fechar ícone' % } </ botão > < div id = "QuickAddInfo- {{ card_variant.id }} " class = "quick-add-modal__content-info" </ div > </div> _ _ </ rápido - adicionar - modal > { %- outro -% } < produto - formulário > { % -formulário 'produto' , cartão_produto , id : product_form_id , classe : 'forma' , novalidate : 'novalidate' , dados - tipo : 'formulário de adição ao carrinho' -% } < entrada tipo = "oculto" nome = "id" valor = " {{ card_variant.id }} " desabilitado > < botão id = " {{ product_form_id }} -enviar" tipo = "enviar" nome = "adicionar" class = "botão quick-add__submit - botão de largura total - cartão secundário {% if horizontal_quick_add %} - horizontal__quick-add {% endif %} " aria - haspopup = "diálogo" aria - labelledby = " {{ product_form_id }} -submit title- {{ section_id }} - {{ card_variant.id }} " aria -live = "educado" dados - esgotados - esgotados - mensagem = "true" { % se card_variant. disponível == falso % } desabilitado { % fim se % } > < intervalo > { %- se card_variant. disponível -% } { { 'produtos.produto.add_to_cart' | } } { %- outro -% } { { 'produtos.produto.sold_out' | } } { %- fim se -% } </span> _ < span class = "mensagem esgotada oculta" > { { 'produtos.produto.sold_out' | } } </span> _ { %- se horizontal_quick_add -% } < span class = "icon-wrap" > { % render 'icon-plus' % } </ span > { %- fim se -% } < div class = "loading-overlay__spinner oculto" > < svg aria - oculto = "verdadeiro" focalizável = "falso" classe = "girador" viewBox = "0 0 66 66" xmlns = "http://www.w3.org/2000/svg" > < círculo classe = "caminho" preenchimento = "nenhum" traço - largura = "6" cx = "33" cy = "33" r = "30" </ círculo > </svg> _ </div> _ _ </ botão > { %- formulário final -% } </ produto - formulário > { %- fim se -% } </div> _ _ { %- fim se -% } < div class = "card__badge {{ settings.badge_position }} " > { %- se card_variant. disponível == falso -% } < intervalo id = "Crachá- {{ section_id }} - {{ card_variant.id }} " class = "crachá - cor inferior esquerda {{ settings.sold_out_badge_color_scheme }} " > { { - 'produtos.produto.esgotado' | t - } } </span> _ { %- elsif card_variant. compare_at_price > card_variant. preço e card_variant. disponível -% } < intervalo id = "Crachá- {{ section_id }} - {{ card_variant.id }} " class = "crachá - cor inferior esquerda {{ settings.sale_badge_color_scheme }} " > { { - 'produtos.produto.em_venda' | t - } } </span> _ { %- fim se -% } </div> _ _ </div> _ _ </div> _ _ </div> _ _ { %- outro -% } < div class = "card-wrapper product-card-wrapper underline-links-hover" > < div classe = " cartão cartão-- {{ settings.card_style }} cartão--texto {% if extend_height %} cartão--extend-height {% endif %} {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if card_variant.featured_media == nil and settings.card_style == 'card' %} proporção {% endif %} {{ horizontal_class }} " style = "--ratio-percent: 100%;" > < div class = "card__inner {% if settings.card_style == 'standard' %} cor- {{ settings.card_color_scheme }} gradiente {% endif %} {% if settings.card_style == 'standard' %} proporção {% endif %} " style = "--ratio-percent: 100%;" > < div class = "cartão__media" > { %- if placeholder_image -% } { { placeholder_image | placeholder_svg_tag : 'placeholder-svg' } } { %- outro -% } { { 'produto-vestuário-2' | placeholder_svg_tag : 'placeholder-svg' } } { %- fim se -% } </div> _ _ </div> _ _ < div class = "cartão__content" > < div class = "cartão__informações" > < h3 class = "card__heading card__heading--placeholder {% if settings.card_style == 'standard' %} h5 {% endif %} " > < a role = "link" aria - desativado = "true" class = "full-unstyled-link" > { { 'onboarding.product_title' | } } </a> _ </ h3 > < div class = "informações do cartão" > { %- se show_vendor -% } < span class = "visualmente oculto" > { { 'accessibility.vendor' | t } } </ span > < div class = "legenda com espaçamento entre letras light" > { { 'products.product.vendor' | t } } </ div > { %- fim se -% } { % renderiza 'preço' % } </div> _ _ </div> _ _ </div> _ _ </div> _ _ </div> _ _ { %- fim se -% } |
5. Certifique-se de SALVAR
É isso (",)
4 comentários
@DHEL DOMINCIL,
At this moment, the filter does not work with this. I have not get a chance to write a specific filter for this but stay tuned.
Cool tutorial! I do have a question:
With the variants showing as individual products on the collection, will the filter(s) for a collection page filter out the specific variants as well?
As an example: If there are several different products that all have a green variant, and customer wants to see only green products, will the filter on the collection page show only those green variants fafter filter?
Hi @Binaebi,
This should work in any Shopify 2.0 FREE themes, since they share the same code, the only difference is the CSS which is not much. Can you message me in “Chat with us” to discuss what gone wrong? Thank you
This did not work with the Studio theme. It broke the collection and won’t show the filters or even the default products. Everything after the collection banner is gone.