Design estantes de produtos

[giselevieira]

Boa noite!

Vimos que tem se usado muito as estandes com visualização de 1 produto por vez em tamanho grande (tela cheia), conseguimos este tipo de visual no ecom?

[Matheus]

Boa noite, tudo bem?
Tem sim! Consegue nos mandar uma foto por favor, só pra ver como fica, caso eu precise fazer algum ajuste em css para a loja.

[twoforyouloja]

Boa noite, tem como ter no estande de produtos as fotos em tela cheia? fotos maiores nos estandes

[Matheus]

Boa noite, tudo bem?
Fiz uma simulação rápida e tem jeito d e melhorar sim o que tem hoje, como:

[twoforyouloja]

Show, é um códico css?

[Matheus]

Sim, eu vou preparar o código css para colocar aqui, caso outros queiram a mesma situação e mais tarde colo aqui, pode ser?

[twoforyouloja]

Top, muito obrigado

[Matheus]

Pronto, na sua loja vai aparecer já em 5 minutos.
Para as demais, basta aplicar o código ao acessar o CMS > Layout > Inserir Código > Editar CSS:

@media (min-width: 992px) {
	 .product-item .product-card {
		 height: 410px;
		 padding: var(--spacer-2) 0;
	}
	 .product-item .product-card__pictures {
		 height: unset;
	}
	 .product-item .product-card__pictures img {
		 max-height: 350px;
		 object-fit: cover;
		 width: 100%;
	}
}
 @media (max-width: 576px) {
	 .product-item .product-card, .product-item .product-card.search-engine__item {
		 height: 330px;
		 padding: var(--spacer-2) 0;
	}
	 .product-item .product-card__pictures {
		 height: unset;
	}
	 .product-item .product-card__pictures img {
		 max-height: 300px;
		 object-fit: cover;
		 width: 100%;
	}
}
 .product-card.search-engine__item {
	 height: 280px;
	 padding: var(--spacer-3) 0;
}
 .product-card.search-engine__item .product-card__pictures {
	 height: unset;
}
 .product-card.search-engine__item .product-card__pictures img {
	 max-height: 250px;
	 object-fit: cover;
	 width: 100%;
}
 

Observação: Esse código tende a funcionar bem para imagens verticais.

[twoforyouloja]

Show, muito obrigado.

[Matheus]

De nada!