Erro scrolling imagem de produto

Bom dia!
Tudo certo?

Os produtos da nossa loja que apresentam uma quantidade grande de fotos, estão com esses marcadores que sinalizam o scroll das imagens ficando por cima das fotos do produto, como aqui:

Podem nos indicar como ajustar?

Bom dia, pela quantidade de imagens, talvez faça mais sentido esconder todas as opções com exceção da primeira que é o vídeo, o que acha?

Bom dia.

Estamos pensando em manter os marcadores de foto, até deixar mais parecido com alguns sites referência, como fazem por exemplo a casetify e a chillibeans nos seus produtos:

Ex. 1:

Ex. 2:

É possivel?

abs

Bom dia, o primeiro no caso, mostram todos em mesma linha, mas tem a quantidade de fotos que você possui? Se sim, me mande por favor, pois penso em uma forma de isso dar certo, mas com exemplo é melhor pra ver o que penso. Sobre a segunda, também é possível, no caso editar e mostrar 1/14, me envie link também por favor

1 curtida

segue link para ambos os produtos do exemplo:

Groovy Pattern Clear – CASETiFY
Óculos de Sol Feminino Chilli Beans Quadrado Degradê Preto OC.CL.3519.2001 - Chilli Beans

Ambos exemplos que estamos falando, se referem a visualização dos produtos somente no mobile.

Se ambas opções são possíveis, gere para nós um exemplo de cada, assim podemos validar qual opção fica melhor na loja. :wink:

Abs!

No caso da casetify, esse link que enviou, tem apenas 10 imagens (para 10 imagens, nosso atual fica bem parecido ao deles) e não configura o exemplo que passou com mais de 30, o que poderia fazer essas duas linhas, preciso de um exemplo parecido

De um produto do nosso site, ou de outro produto de exemplo?

No caso, do site da casetify que tem a mesma quantidade de imagens

Não da para usar esse produto como base?

Óculos de Sol Feminino Chilli Beans Quadrado Degradê Preto OC.CL.3519.2001 - Chilli Beans

Ficar assim com o slider de imagens com o numerador separado por barra para mostrar as próximas

Teoricamente é tranquilo de fazer, só precisaremos abri o componente de imagens de produtos para editar isso. Como vou precisar estudar ali, acho que somente na próxima semana conseguimos colocar isso, caso alguém mais queira, nos informe que replicamos o código.

Bom dia, tudo certo?

Algum retorno sobre a melhoria no componente das imagens?

Abraço!

Olá @Matheus bom dia, tudo bem?

Seria possível essa melhoria da visualização das fotos na apresentação dos produtos nos dispositivos mobile para esta semana?

aqui ainda aparecer com os marcadores do slider sobre as imagens do produto:

Aguardamos seus feedbacks!

Um abraço e uma ótima semana! :grinning:

@carlospereira, consegue dar uma olhadinha pra gente?

1 curtida

Boa noite, @lojacustomic! Tudo bem? Consegui um resultado parecido com o modelo da Chilli Beans citado no tópico, alterando o CSS. Segue o código e o print do resultado obtido. É só copiar e colar o código na área de CSS customizado.

@media (max-width: 991px) {
    #page-products #product-block #product {
        counter-reset: pictureCount;
    }
    
    #page-products #product-block .gallery__item {
        visibility: hidden;
    }

    #page-products #product-block .gallery__item:not(.gallery__item--video) {
        counter-increment: pictureCount;
    }
    
    #page-products #product-block .gallery__item--selected {
        position:absolute;
        transform: translateX(-17px) skew(-20deg);
        left: 45%;
    }
    
    #page-products #product-block .gallery__item--selected::before,
    #page-products #product-block .gallery__thumbs::after {
        content: counter(pictureCount);
        padding: 5px;
        box-sizing: border-box;
        background: var(--primary);
        color: var(--primary-yiq);
        height: 35px;
        width: 30px;
        border-radius: 3px;
        border: 1px solid var(--primary-yiq);
    }
    
    #page-products #product-block .gallery__item--selected::before {
        visibility: visible;
    }
    
    #page-products #product-block .gallery__thumbs::after {        
        position: absolute;
        transform: translateX(17px) skew(-20deg);
        left: 45%;
    }   
}

2 curtidas

Olá! Tudo bem e você?

Aplicamos o código aqui no nosso painel a pouco e ainda não atualizou na loja, veja:

Pode somente indicar pra gente se estamos incluindo no campo certo, ou se há algum detalhe que não conseguimos perceber para que rode o código na loja?

Desde já agradeço pelo empenho de vcs em entregar sempre o melhor resultado para os lojistas parceiros!

Vocês são top!

Um abraço.

1 curtida

Bom dia, pode ser por algum conflito que venha por cima e esse código não esteja funcionando para você. Inseri ele aqui em outro local do site e funcionou.

2 curtidas

@Matheus @carlospereira

Funcionou agora! :clap:

Valeu pelo suporte.

Esse icone ali da para mudar de cor ou diminuir o tamanho? Esta bacana mas se ficar um pouco menor, sem chamar tanta evidencia para o contador mas sim para a foto do produto ficaria ótimo!

Qual trecho do código nos permite melhorar essa parte?

Essa parte

certo.

Não podemos talvez no numero que indica as proximas fotos, colocar em uma cor com menos evidencia, como aqui no exemplo da propria chilibeans?

Ex.


Ou até somente indicar para o cliente a página atual, e incluir setas indicando que há proximas fotos na rolagem?

Bom dia, tudo bem?
Só informar a cor de fundo que deseja, que eu substituo no código. Setas não é possível.