Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11
Recomendações de produtos ou produtos relacionados são essenciais para qualquer site de comércio eletrônico. Eles oferecem aos clientes opções adicionais e aumentam as chances de fazer uma venda. No entanto, a exibição desses produtos às vezes pode ocupar muito espaço na página do produto, resultando em uma experiência de compra desordenada e opressora.
Uma solução para esse problema é converter recomendações de produtos ou produtos relacionados em um controle deslizante. Usando um controle deslizante, você pode exibir uma variedade de produtos de uma forma visualmente atraente e organizada. Isso permite que os clientes naveguem facilmente pelas recomendações sem ter que navegar por uma longa lista de produtos.
Além disso, um controle deslizante oferece uma experiência de compra mais interativa e envolvente para os clientes. Ao permitir que eles naveguem por uma variedade de produtos, eles podem encontrar rapidamente aqueles que chamam sua atenção. Isso também os incentiva a passar mais tempo no seu site, aumentando as chances de fazer uma compra.
Implementar um controle deslizante para recomendações de produtos ou produtos relacionados também é relativamente simples. Muitas plataformas de comércio eletrônico oferecem opções de controle deslizante integradas, ou você pode usar um plug-in de terceiros para criar um. Com apenas alguns cliques, você pode transformar a página do seu produto em uma experiência de compra elegante e moderna.
Explore nossa loja DEMO e veja este produto em ação! Use a senha "made4uo" para entrar. Observe que a funcionalidade de visualização rápida não está incluída.
O que você está comprando:
- Uma recomendação de produto ou uma seção de produtos relacionados em um controle deslizante
- Nenhuma biblioteca externa sendo usada
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 loja Admin Shopify > Temas > Ações > Editar código
2. Na pasta Seção, encontre product-recommendations.liquid ou related-products.liquid para versões mais recentes dos temas do Shopify 2.0 e substitua o código padrão pelo código abaixo.
{ { '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 . versão_antiga == verdadeiro % } { { 'seção-produto-recomendações.css' | URL_do_asset | folha_de_estilo } } { % outro % } { { 'produtos relacionados à seção.css' | URL_do_asset | folha_de_estilo } } { % fim se % } { % se seção. configurações . image_shape == 'blob' e seção. configurações . versão_antiga == falso % } { { 'mask-blobs.css' | URL_do_asset | folha_de_estilo } } { %- fim se -% } { %- estilo -% } recomendação - controle deslizante . grade . produto - grade { posição : relativa ; flex - wrap : herdar ; estouro -x : automático ; scroll - snap - type : x obrigatório ; comportamento de rolagem : suave ; scroll - preenchimento - esquerda : 1,5rem ; - webkit - overflow - rolagem : toque ; margem inferior : 1rem ; } recomendação - controle deslizante li { flex - encolher : 0 ; } recomendação - controle deslizante . controle deslizante - botões -- wrapper { exibição : flexível ; alinhar - itens : centro ; justificar - conteúdo : centro ; tamanho da fonte : 1,2rem ; } recomendação - controle deslizante . grade . produto - grade ::- webkit - barra de rolagem { altura : 0,4rem ; largura : 0,4rem ; Mostrar nenhum ; } . 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 = "color- {{ section.settings.color_scheme }} color- {{ section.settings.color_scheme_old }} gradiente no-js-hidden" > { % se seção. configurações . versão_antiga == true % } < div class = "largura da página" > { % endif % } < produto - recomendações class = "seção de largura de página de produtos relacionados- {{ section.id }} -padding isolar {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in {% endif %} " dados - url = " {{ routes.product_recommendations_url }} ?section_id= {{ section.id }} &product_id= {{ product.id }} &limit= {{ section.settings.products_to_show }} " > { % se recomendações. realizados e recomendações. contagem_produtos > 0 % } < h2 class = "produtos relacionados__heading inline-richtext {{ section.settings.heading_size }} " > { { seção. configurações . cabeçalho } } </ h2 > < recomendação - controle deslizante > < ul class = "grid product-grid grid-- {{ section.settings.columns_desktop }} -col-desktop grid-- {{ section.settings.columns_mobile }} -col-tablet-down" função = "lista" > { % para recomendação em recomendações. produtos % } < li class = "grid__item" > { % renderiza 'produto-cartão' , card_product : recomendação , media_aspect_ratio : seção. configurações . proporção_da_imagem , forma_imagem : seção. configurações . forma_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_rating % } </ li > { % fim para % } </ul> _ { % se recomendações. produtos . tamanho > seção. configurações . colunas_desktop % } < div class = "botões deslizantes--wrapper" > < tipo de botão = "botão" class = "botão deslizante" nome = "anterior" estilo = "girar: 90 graus" desabilitado > { % renderizar 'ícone-caret' % } </ botão > < div class = "slider-counter--wrapper" > < span class = "slider-counter--current" > 1 </ span > / < span > { { recomendações. produtos . tamanho } } </ span > </div> _ _ < tipo de botão = "botão" class = "botão deslizante" nome = "próximo" estilo = "girar: -90deg" > { % renderizar 'ícone-caret' % } </ botão > </div> _ _ { % fim se % } </ recomendação - controle deslizante > { % fim se % } </ produto - recomendações > { % se seção. configurações . image_shape == 'arco' e seção. configurações . versão_antiga == falso % } { % renderizar 'arco-máscara' % } { % fim se % } { % se seção. configurações . versão_antiga == true % } </ div > { % endif % } </div> _ _ <roteiro> _ classe RecommendationSlider estende HTMLElement { construtor ( ) { super ( ) ; esse . contêiner = isto . querySelector ( "ul" ) ; esse . slides = isto . querySelectorAll ( "li" ) ; esse . currentSlider = isto . querySelector ( ".slider-counter--current" ) ; esse . sliderButtons = isto . querySelectorAll ( "botão" ) ; esse . botões deslizantes . forEach ( ( botão ) => botão. addEventListener ( " clique " , isto.onButtonClick.bind ( este ) ) ) ; esse . recipiente . addEventListener ( " rolar " , isto.atualizar.ligar ( este ) ) ; esse . iniciar ( ) ; const resizeObserver = new ResizeObserver ( ( entradas ) => this.init ( ) ) ; redimensionarObserver. observe ( este.container ) ; _ } iniciar ( ) { esse . slideOffset = isto . slides [ 1 ] . offsetLeft - este . slides [ 0 ] . deslocamentoEsquerda ; } atualizar ( ) { esse . item atual = Matemática. round ( this.container.scrollLeft / this.slideOffset ) + 1 ; _ _ _ esse . atualSlider . textContent = isto . item atual ; esse . itensPorCaixa = Matemática. round ( this.container.clientWidth / this.slideOffset ) - 1 ; _ _ _ if ( este . itematual <= 1 ) { esse . querySelector ( 'botão[nome="anterior"]' ) . desativado = verdadeiro ; } outro { esse . querySelector ( 'botão[nome="anterior"]' ) . desativado = falso ; } if ( this . currentItem >= this . slides . length - this . itemsPerBox ) { esse . querySelector ( 'botão[nome="próximo"]' ) . desativado = verdadeiro ; } outro { esse . querySelector ( 'botão[nome="próximo"]' ) . desativado = falso ; } } onButtonClick ( e ) { e. preventDefault ( ) ; esse . slideScrollPosition = e. atualTarget . nome === "próximo" ? esse . recipiente . scrollLeft + this . slideOffset : esse . recipiente . scrollLeft - isto . slideOffset ; esse . recipiente . scrollTo ( { esquerda : isto . slideScrollPosition , } ) ; } } elementos personalizados. define ( "slider de recomendação" , RecommendationSlider ) ; </roteiro> _ { % esquema % } { "nome" : "Recomendação de produto" , "tag" : "seção" , "classe" : "seção" , "configurações" : [ { "tipo" : "caixa de seleção" , "id" : "versão_antiga" , "label" : "Tenho a versão 8.0 e inferior" } , { "tipo" : "parágrafo" , "content" : "Recomendações dinâmicas usam informações de pedidos e produtos para mudar e melhorar ao longo do tempo. [Saiba mais](https:\/\/help.shopify.com\/themes\/development\/recommended-products)" } , { "tipo" : "inline_richtext" , "id" : "título" , "default" : "Você também pode gostar" , "rótulo" : "Título" } , { "tipo" : "selecionar" , "id" : "heading_size" , "opções" : [ { "valor" : "h2" , "rótulo" : "Pequeno" } , { "valor" : "h1" , "rótulo" : "Médio" } , { "valor" : "h0" , "rótulo" : "Grande" } ] , "padrão" : "h1" , "label" : "Tamanho do título" } , { "tipo" : "intervalo" , "id" : "produtos_para_exibir" , "min" : 2 , "máximo" : 10 , " passo 1 , "padrão" : 4 , "label" : "Produtos Maxium para mostrar" } , { "tipo" : "intervalo" , "id" : "colunas_desktop" , "min" : 1 , "máximo" : 5 , " passo 1 , "padrão" : 4 , "label" : "Número de colunas no desktop" } , { "tipo" : "esquema_cor" , "id" : "esquema_cor" , "label" : "Esquema de cores (nova versão)" , "info" : "Para editar todas as cores do seu tema, vá para as configurações do tema. Para alterar o esquema de cores do cartão, atualize as configurações do seu tema." , "padrão" : "plano de fundo-1" } , { "tipo" : "selecionar" , "id" : "color_scheme_old" , "opções" : [ { "valor" : "acento-1" , "label" : "Acento 1" } , { "valor" : "acento-2" , "label" : "Acento 2" } , { "valor" : "plano de fundo-1" , "rótulo" : "Plano de fundo 1" } , { "valor" : "plano de fundo-2" , "rótulo" : "Fundo 2" } , { "valor" : "inverso" , "label" : "Inverso" } ] , "padrão" : "plano de fundo-1" , "label" : "Esquema de cores (funciona SOMENTE na versão 8 e inferior)" , "info" : "Para alterar o esquema de cores do cartão, atualize as configurações do tema." } , { "tipo" : "cabeçalho" , "content" : "Cartão do produto" } , { "tipo" : "selecionar" , "id" : "image_ratio" , "opções" : [ { "valor" : "adaptar" , "label" : "Adaptar à imagem" } , { "valor" : "retrato" , "rótulo" : "Retrato" } , { "valor" : "quadrado" , "label" : "Quadrado" } ] , "padrão" : "adaptar" , "label" : "Proporção da imagem" } , { "tipo" : "selecionar" , "id" : "forma_da_imagem" , "opções" : [ { "valor" : "padrão" , "rótulo" : "Padrão" } , { "valor" : "arco" , "label" : "Arco" } , { "valor" : "blob" , "rótulo" : "Blobo" } , { "valor" : "chevronesquerda" , "label" : "Chevron à esquerda" } , { "valor" : "chevrondireita" , "label" : "Chevron à direita" } , { "valor" : "diamante" , "rótulo" : "Diamante" } , { "valor" : "paralelogramo" , "label" : "Paralelogramo" } , { "valor" : "redondo" , "rótulo" : "Redondo" } ] , "padrão" : "padrão" , "label" : "Formato da imagem (funciona SOMENTE no Dawn atualizado)" , "info" : "Cartões de estilo padrão não possuem bordas quando um formato de imagem está ativo." } , { "tipo" : "caixa de seleção" , "id" : "show_secondary_image" , "padrão" : falso , "label" : "Mostrar segunda imagem ao passar o mouse" } , { "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\/ tipos de página#configurações da seção de resultados de pesquisa)" } , { "tipo" : "cabeçalho" , "content" : "Layout móvel" } , { "tipo" : "selecionar" , "id" : "colunas_mobile" , "padrão" : "2" , "label" : "Número de colunas no celular" , "opções" : [ { "valor" : "1" , "label" : "1 Coluna" } , { "valor" : "2" , "label" : "2 colunas" } ] } , { "tipo" : "cabeçalho" , "content" : "Preenchimento de seção" } , { "tipo" : "intervalo" , "id" : "padding_top" , "min" : 0 , "máximo" : 100 , " Passo 4 , "unidade" : "px" , "label" : "Preenchimento superior" , "padrão" : 36 } , { "tipo" : "intervalo" , "id" : "padding_bottom" , "min" : 0 , "máximo" : 100 , " Passo 4 , "unidade" : "px" , "label" : "Preenchimento inferior" , "padrão" : 36 } ] } { % termina o esquema % } |
3. Certifique-se de SALVAR.
É isso (",)