Vitrine de produtos para loja virtual em HTML/CSS toda semântica [Atualizado]

Vitrine para loja virtual toda criada usando apenas HTML/CSS e semântica para melhorar o SEO da loja.

Ter uma vitrine de produtos semântica, mostrará para os buscadores o que você realmente está vendendo, com nome, descrição, valores tudo bem organizado.

Com isso o ranqueamento pode melhorar muito e aumentar as chances de seu site ser encontrados em buscas orgânicas consequentemente aumentando suas conversões, além de passar uma visão organizada para seus clientes.

Nesse componente configurei dois modelos de vitrine com HTML/CSS semântico para ser usada em sua loja virtual. 

A vitrine está pronta para ser usada como forma de inspiração, estudo ou em projetos de loja virtual ou listagem de produtos.

O componente foi todo configurado em HTML e SCSS, para quem tem um pouco de conhecimento não terá dificuldade nenhuma para manipular o componente, todo o estilo pode ser alterados.

Na internet existem alguns conversores de SCSS para CSS, basta remover as variáveis CSS que dão as cores aos elementos e adicionar em algum conversor. Alguns elementos externos como fontes e ícones foram usados, mas também podem ser alterados facilmente.

Os dois modelos são praticamente idênticos, a diferença é apenas na ordem dos valores e no botão “comprar”. Muitos lojistas fazem questão de usar o botão comprar, outro nem tanto, fica a critério de cada um escolher ou não o botão.

A ferramenta de votação em cada plataforma de e-commerce funciona de uma forma, algumas você consegue manipular as estrelas outras não é possível, mas basta adicionar o código dentro do elemento e usar.

Espero que seja útil, bom uso.

Clique aqui para ver a DEMONSTRAÇÃO em HTML/CSS

Clique aqui e confira mais componentes.