Mostre seus produtos em destaque com o controle deslizante de imagem do produto para o tema Shopify Dawn

 { { 'component-cartão.css' | URL_do_asset | folha_de_estilo } }
 { { 'preço-componente.css' | URL_do_asset | folha_de_estilo } } 
{ { 'componente-produto-grid.css' | URL_do_asset | folha_de_estilo } }
 { { 'coleção-slider.css' | URL_do_asset | folha_de_estilo } } 
< link rel = "stylesheet" href = " {{ 'template-collection.css' | asset_url }} " media = "print" onload = "this.media='all'" >
 < noscript > { { 'template-collection.css' | URL_do_asset | folha de estilo_tag } } </ noscript > 
{ %- líquido
 atribuir produtos_to_display = seção. configurações . coleção . contagem_de_produtos_todos
 atribuir total_produtos = seção. configurações . coleção . produtos . tamanho
 se seção. configurações . coleção . all_products_count > seção. configurações . produtos_para_exibir 
atribuir produtos_to_display = seção. configurações . produtos_para_exibir
 fim se
 -% }
 < div class = "coleção slider-container largura da página largura da página-desktop" >
 < div 
class = "title-wrapper-with-link {% if section.settings.title == blank %} title-wrapper-with-link--no-heading {% endif %} {% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down {% endif %} "
 estilo = "largura: 100%"
 > 
< h2 class = "title {% if section.settings.title == blank %} title--no-heading {% endif %} " >
 { { seção. configurações . título | escapar } }
 </ h2 >
 
{ % se seção. configurações . visualizar_tudo == verdadeiro % }
 <a href = "{{section.settings.collection.url }}" > _ {{ section.settings.collection.url }} _
 < button class = "button button--primary" > Ver tudo </ button > 
</a> _
 { % fim se % }
 </div> _ _
 < slider - estilo do componente = "display: block;" >
 < ul
 classe = "
 product-slider-box grid grid--2-col product- {% if total_products == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop 
{% else %} grid--3-col-tablet {% endif %} {% if total_products > 4 %} grid--one-third-max grid--4-col-desktop grid--quarter-max {% endif %}
 {% if total_products > 2 %}
 controle deslizante controle deslizante - grade do tablet - espiar {% endif %}
 margem negativa - pequena
 "
 função = "lista"
 id = "caixa deslizante do produto"
 > 
{ %- para produto na seção. configurações . coleção . limite de produtos : seção. configurações . produto_para_mostrar -% }
 < li
 class = "produto-slider grid__item slider__slide"
 id = "controle deslizante de produto" 
dados - slide - índice = " {{forloop.index}} "
 >
 { % se seção. configurações . tema_atualizado % }
 { % renderiza 'produto-cartão' ,
 produto_cartão_produto : produto , 
media_size : seção. configurações . proporção_da_imagem ,
 show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 add_image_padding : seção. configurações . add_image_padding ,
 show_vendor : seção. configurações . mostrar_fornecedor , 
show_image_outline : seção. configurações . mostrar_imagem_outline ,
 show_rating : seção. configurações . mostrar_rating
 % }
 { % outro % }
 { % renderizar 'cartão de produto' ,
 produto_cartão_produto : produto , 
media_size : seção. configurações . proporção_da_imagem ,
 show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 add_image_padding : seção. configurações . add_image_padding ,
 show_vendor : seção. configurações . mostrar_fornecedor , 
show_image_outline : seção. configurações . mostrar_imagem_outline ,
 show_rating : seção. configurações . mostrar_rating
 % }
 { % fim se % }
 </ li >
 { %- outro -% } 
{ %- para i em ( 1 .. 4 ) -% }
 < li class = "grid__item" >
 { % se seção. configurações . tema_atualizado % } 
{ % render 'cartão-produto' , show_vendor : seção. configurações . mostrar_vendor % }
 { % outro % }
 { % renderizar 'espaço reservado para cartão de produto' % } 
{ % fim se % }
 </ li >
 { %- fim para -% }
 { %- fim para -% }
 </ul> _ 
{ % -se seção. configurações . coleção . all_products_count > 4 -% }
 < div class = "botões deslizantes no-js-hidden {% if total_products < 4 %} small-hide {% endif %} " style = "display: flex;" >
 < botão 
tipo = "botão"
 class = "botão deslizante botão deslizante--anterior"
 nome = "anterior"
 aria - label = "Deslize para a esquerda"
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< div class = "legenda do contador deslizante" >
 < span class = "slider-counter--current" > 1 </ span >
 < span aria - oculto = "true" > / </ span > 
< span class = "visualmente oculto" > de </ span >
 < intervalo
 class = "slider-counter--total"
 dados - total - produtos = " {{total_products}} "
 > 
{ { - total_produtos - } }
 </span> _
 </div> _ _
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--próximo"
 nome = "próximo" 
aria - label = "Deslize para a direita"
 >
 { % renderizar 'ícone-caret' % }
 </ botão >
 </div> _ _
 { %- fim se -% }
 </ controle deslizante - componente > 
</div> _ _
 { % esquema % }
 {
 "name" : "Controle deslizante de coleção" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" ,
 "configurações" : [
 { 
"tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Coleção em destaque" ,
 "rótulo" : "Título"
 } ,
 {
 "tipo" : "coleção" , 
"id" : "coleção" ,
 "rótulo" : "Coleção"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "tema_atualizado" ,
 "padrão" : verdadeiro , 
"label" : "Tema Shopify atualizado, versão 8 e superior"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "produto_para_mostrar" ,
 "padrão" : 10 ,
 "min" : 1 , 
"máximo" : 100 ,
 "label" : "número de produtos a serem exibidos"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "swipe_on_mobile" ,
 "padrão" : falso , 
"label" : "Ativar deslizar no celular"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Cartão do produto"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "visualizar_todos" ,
 "padrão" : falso ,
 "label" : "Mostrar botão Ver tudo"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "image_ratio" , 
"opções" : [
 {
 "valor" : "adaptar" ,
 "rótulo" : "Adaptar"
 } ,
 {
 "valor" : "retrato" ,
 "rótulo" : "Retrato"
 } , 
{
 "valor" : "quadrado" ,
 "rótulo" : "Quadrado"
 }
 ] ,
 "padrão" : "adaptar" ,
 "label" : "Proporção da imagem"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "show_secondary_image" ,
 "padrão" : falso ,
 "label" : "Mostrar imagem secundária"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "add_image_padding" ,
 "padrão" : falso ,
 "label" : "Adicionar preenchimento de imagem"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_image_outline" , 
"padrão" : verdadeiro ,
 "label" : "Mostrar contorno da imagem"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_vendor" ,
 "padrão" : falso , 
"label" : "Mostrar fornecedor"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_rating" ,
 "padrão" : falso ,
 "label" : "Mostrar avaliação do produto" , 
"info" : "Para exibir uma classificação, adicione um aplicativo de classificação de produto. [Saiba mais](https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#featured-collection -mostrar-avaliação do produto)"
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Controle deslizante da coleção"
 }
 ]
 }
 { % termina o esquema % } 

 . controle deslizante - contêiner {
 preenchimento : 0 3rem ;
 largura : 100 %;
 estouro : automático ;
 exibição : flexível ;
 flex - flow : quebra de coluna ;
 alinhar - itens : centro ; 
posição : relativa ;
 }
 . controle deslizante - contêiner. coleção ul {
 preenchimento -inline -start : 0px ! importante ;
 }
 . controle deslizante - contêiner. controle deslizante de coleção - componente {
 posição : relativa ;
 exibição : bloco ; 
largura : 100 %;
 }
 . controle deslizante - contêiner. coleção . slider__slide {
 scroll - snap - align : start ;
 flex - encolher : 0 ;
 }
 . produto - controle deslizante - caixa { 
flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ;
 - webkit - overflow - rolagem : toque ;
 margem inferior : 1rem ; 
largura : 100 %;
 altura : 100 %;
 exibição : flexível ;
 }
 . produto - controle deslizante {
 altura : 100 %; 
largura : calc ( 50 % - 0,5rem / 2 ) ! importante ;
 display : bloco embutido ;
 }
 . slide - imagem {
 largura : 100 %;
 altura : 100 %; 
ajuste ao objeto : capa ;
 }
 @media screen e ( largura máxima : 989px ) {
 . grade__item {
 preenchimento - esquerda : 1rem ;
 }
 }
 /* controle deslizante de navegação */
 . controle deslizante - botões { 
exibição : flexível ! importante ;
 }
 . controle deslizante {
 barra de rolagem -cor : rgb ( var ( -color - foreground ) )
 rgba ( var ( -color - foreground ) , 0,04 ) ; 
-ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ;
 }
 . controle deslizante ::- webkit - barra de rolagem {
 altura : 0,4rem ;
 largura : 0,4rem ;
 Mostrar nenhum ;
 } 
. não - js. controle deslizante {
 -ms - overflow - style : auto ;
 largura da barra de rolagem : auto ;
 }
 . não - js. controle deslizante ::- webkit - barra de rolagem {
 exibição : inicial ;
 } 
. controle deslizante ::- webkit - barra de rolagem - polegar {
 cor de fundo : rgb ( var ( -color - foreground ) ) ;
 raio da borda : 0,4rem ;
 borda : 0 ;
 } 
. controle deslizante ::- webkit - barra de rolagem - faixa {
 plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ;
 raio da borda : 0,4rem ;
 }
 . controle deslizante - contador { 
margem : 0 1,2rem ;
 }
 . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . controle deslizante - botão { 
cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 fundo : transparente ;
 borda : nenhuma ;
 cursor : ponteiro ;
 largura : 44px ;
 altura : 44px ;
 } 
. botão deslizante : não ( [ desativado ] ) : hover {
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 . botão deslizante . ícone {
 altura : 0,6rem ; 
}
 . botão deslizante [ desabilitado ] . ícone {
 cor : rgba ( var ( -color - foreground ) , 0,3 ) ;
 }
 . botão deslizante – próximo . ícone { 
margem - direita : -0,2rem ;
 transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) ;
 }
 . botão deslizante - anterior. ícone {
 margem - esquerda : -0,2rem ; 
transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) ;
 }
 . botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( -90 graus ) traduzirX ( 0,15rem ) escala ( 1,07 ) ;
 }
 . botão deslizante - anterior : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( 90 graus ) traduzirX ( -0,15rem ) escala ( 1,07 ) ;
 } 

if ( este.produtoSlider ) { isto . totalPages = sliderItemsToShow. comprimento - isto . slidesPerPage + 4 } else { 
esse . totalPages = sliderItemsToShow. comprimento - isto . slidesPerPage + 1 ;
 }

if ( este.produtoSlider ) { isto . páginaatual = Math. round ( this . slider . scrollLeft / this . sliderLastItem . clientWidth ) + 4 } else { 
esse . páginaatual = Math. round ( this.slider.scrollLeft / this.sliderLastItem.clientWidth ) + 1 ; _ _ _ _
 }