Mostrar variantes de cores nas páginas da coleção como produto separado

 { { '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 } }
 
{ % se seção. configurações . forma_imagem == 'blob' % }
 { { 'mask-blobs.css' | URL_do_asset | folha_de_estilo } }
 { %- fim se -% }
 
{ % -se seção. configurações . enable_quick_add -% }
 { { 'adicionamento rápido.css' | URL_do_asset | folha_de_estilo } }
 < script src = " {{ 'quick-add.js' | asset_url }} " defer = "defer" </ script > 
< script src = " {{ 'product-form.js' | asset_url }} " defer = "defer" </ script >
 { %- fim se -% }

 { %- 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 ;
 }

 @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" > 
{ %- paginar coleção. produtos por seção. configurações . produtos_por_página -% }
 { % 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" 
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 ,
 paginar : paginar
 % }
 </ à parte > 
{ %- fim se -% }

 < div
 class = "product-grid-container {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in {% endif %} "
 id = "ProductGridContainer"
 { % se configurações. animações_reveal_on_scroll % }
 dados - cascata 
{ % fim se % }
 >
 { %- 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 carga_preguiçosa = falso % } 
{ % -se forloop. índice > 2 -% }
 { %- atribuir carga_preguiçosa = true -% }
 { %- fim se -% }
 
{ % atribuir cor = '' % }
 { % atribuir variante_color = '' % }
 { % atribuir opçãoColor = seção. configurações . opçãoCor % }
 
{ % para variante no produto. variantes % }
 { % case optionColor % }
 { % quando '1' % } 
{ % atribuir variante_color = variante. Opção 1 % }
 { % quando '2' % }
 { % atribuir variante_color = variante. opção 2 % }
 { % quando '3' % } 
{ % atribuir variante_color = variante. opção3 % }
 { % final % }
 { %- if variante_color != cor -% }
 < li 
class = "grid__item {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in {% endif %} "
 { % se configurações. animações_reveal_on_scroll % }
 dados - cascata
 style = "--animation-order: {{ forloop.index }} ;" 
{ % fim se % }
 >
 { % renderizar 'cartão variante' ,
 card_produto : produto ,
 card_variant : variante ,
 forma_imagem : seção. configurações . forma_da_imagem , 
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 ,
 hide_variant_info : seção. configurações . hide_variant_info ,
 opção : opçãoCor
 % }
 </ li > 
{ % atribuir cor = variante_color % }
 { % fim se % }
 { % fim para % }
 { %- fim para -% }
 </ul> _
 
{ %- se paginar. páginas > 1 -% }
 { % render 'paginação' , paginar : paginar , âncora : '' % }
 { %- fim se -% } 
</div> _ _
 { %- fim se -% }
 </div> _ _
 </div> _ _
 { %- endpaginate -% } 
{ % se seção. configurações . forma_imagem == 'arco' % }
 { % renderizar 'arco-máscara' % }
 { %- fim se -% }
 </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" : "selecionar" ,
 "id" : "optionColor" , 
"opções" : [
 {
 "valor" : "1" ,
 "label" : "Primeira opção"
 } ,
 {
 "valor" : "2" ,
 "label" : "Segunda opção"
 } , 
{
 "valor" : "3" ,
 "label" : "Terceira opção"
 }
 ] ,
 "padrão" : "1" ,
 "label" : "Posicionamento da opção de cor" ,
 "info" : "Escolha qual opção é a cor" 
} ,
 {
 "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" : "selecionar" ,
 "id" : "forma_da_imagem" ,
 "opções" : [
 { 
"valor" : "padrão" ,
 "label" : "t:sections.all.image_shape.options__1.label"
 } ,
 {
 "valor" : "arco" ,
 "label" : "t:sections.all.image_shape.options__2.label"
 } ,
 { 
"valor" : "blob" ,
 "label" : "t:sections.all.image_shape.options__3.label"
 } ,
 {
 "valor" : "chevronesquerda" ,
 "label" : "t:sections.all.image_shape.options__4.label"
 } ,
 { 
"valor" : "chevrondireita" ,
 "label" : "t:sections.all.image_shape.options__5.label"
 } ,
 {
 "valor" : "diamante" ,
 "label" : "t:sections.all.image_shape.options__6.label"
 } ,
 { 
"valor" : "paralelogramo" ,
 "label" : "t:sections.all.image_shape.options__7.label"
 } ,
 {
 "valor" : "redondo" ,
 "label" : "t:sections.all.image_shape.options__8.label"
 }
 ] , 
"padrão" : "padrão" ,
 "label" : "t:sections.all.image_shape.label" ,
 "info" : "t:sections.all.image_shape.info"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "hide_variant_info" , 
"padrão" : falso ,
 "label" : "Ocultar o título da variante"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_secondary_image" ,
 "padrão" : falso , 
"info" : "Você deve adicionar o metacampo variante" ,
 "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" : "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 % } 

 { % 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.
 - opção : número
 - hide_variant_info : { Boolean } Mostrar título da cor da variante
 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 } } 
{ { 'component-volume-pricing.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 = "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 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' %} 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 = "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 % }
 
{ % 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 } }
 { % se hide_variant_info == falso % } 
<br> _
 { % atribuir varianteTítulo = card_variant. título | dividir : '/' % }
 { % se opção == '1' % } 
{ { variantTitle [ 0 ] } }
 { % opção elsif == '2' % }
 { { variantTitle [ 1 ] } } 
{ % opção elsif == '3' % }
 { { variantTitle [ 2 ] } }
 { % fim se % }
 { % fim se % }
 </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.selected_or_first_available_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. selecionado_ou_primeira_variável_disponível . disponível == falso % }
 desabilitado
 { % fim se % }
 >
 < intervalo > 
{ %- se card_variant. selecionado_ou_primeira_variável_disponível . 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 -% }