Personalizar lista de produtos

Layout
1

Alguém pode ajudar eu queria colocar uma linha pequena abaixo dos nomes lançamento ,mais vendidos e destaque só para dar um destaque , e no botão compra da pagina inicial aumentar o tamanho do texto é possível para igualhar a imagem ?

1 curtida
2

Sobre os subtítulos.

Em “incluir código html” vá em “código no rodapé” e coloque:

 <script>
    const titleOnHome = [
      {
    title: "vitrine-lancamento",
    active: true, // true or false
    message: "Subtítulo lançamento entra aqui.",
      },
      {
    title: "vitrine-mas-vendido",
    active: true, // true or false
    message: "Subtítulo mais vendidos entra aqui.",
      },
      {
    title: "vitrine-destaque",
    active: true, // true or false
    message: "Subtítulo mais vendidos entra aqui.",
      },
    ];

    titleOnHome.forEach((item) => {
      if (item.active) {
          const vitrine = document.getElementsByClassName(item.title);
          const element = document.createElement("div");
          const textElement = document.createTextNode(item.message);
          element.appendChild(textElement);
          vitrine[0].appendChild(element);
      }
    });
</script>

Como as coisas mudam com o tempo, eu vou manter esse código atualizado em https://www.breno.com.br/loja-integrada-subtitulos/

Sobre o botão “comprar”, você fala do seu atual “Eu quero”?

1 curtida
3

Não aconteceu nada , será que coloquei no local errado?

4

sim o botão eu quero qria ele alinhado a imagem

5

Talvez. Como você fez? Consegue me mandar um print?

1 curtida
6

corrigir rs! desculpa
deu certo eu queria uma linha abaixo cmo nesse tema https://clean-store-beauty.lojaintegrada.com.br/

mas deu certo eu coloquei em vez do nome uma linha só ficou distante.

agradeço!

vc sabe como tira esse efeito ou diminuir d botão eu quero na pagina inicial https://www.grifearts.com.br/

eu não consigo aumenta e colocar imagem alinhada nesse botão

7

Ah sim. Eu entendi errado. Fui além. Seria bem mais fácil resolver. Testa isso e pode remover aquele script.

.listagem .titulo-categoria strong {
  position: relative;
  display: block;
}


.listagem .titulo-categoria strong:after {
  content: "";
  width: 48px;
  height: 2px;
  background: #fc87b5;
  left: 50%;
  bottom: -20px;
  margin-left: -24px;
  position: absolute;
}
1 curtida
8

O botão você quer remover o efeito e deixar do tamanho da imagem, certo?

1 curtida
9

é pq ele esta desproporcionais… vc sabe como faz esse efeito de uma caixa em cima da imagem como nesses produtos quando a gente coloca o mouse ele realça , eu já rodei e não acho nada tipo assim https://clean-store-beauty.lojaintegrada.com.br/
existe um codigo css ou só comprando o template?

1 curtida
10

O sombreamento é só css. A quantidade de produto já precisa de um script ou comprar um tema. Assim que der eu te mando um exemplo desse código.

1 curtida
11

Muitissimo obrigadooooooooooo !:slight_smile:
era isso mesmo que eu estava procurando.

2 curtidas
12

Bom dia , e mais uma vez obrigado … :slight_smile:

1 curtida
13

Teste esse código no seu css.

// Para o sombreamento caixa
.listagem .produtos-carrossel .listagem-linha li .listagem-item {
  border: transparent 1px solid;
}

.listagem .produtos-carrossel .listagem-linha li .listagem-item:hover {
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.1);
  border-color: #e9e9e9;
}

// Para deixar a sombra em cima mais suave
.flexslider .flex-viewport {
  padding: 16px 0;
}

// Ajsute botão
.listagem-item .acoes-produto {
  position: relative;
  border: 0;
  padding: 0;
  margin-top: 1rem;
}
.listagem-item .acoes-produto a {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
2 curtidas
14

Nossa sem palavras muitoooooooooo obrigada ficou ótimo , o botão EU QUERO ficou na mesma largura tem como diminuir https://www.grifearts.com.br/
:slight_smile:

me ajuda numa coisa rs! mas uma já tentei vários código e não consigo deixa um ícone no botão HOME como aquelas casinha.

15

Pra diminuir o botão pode fazer isso:

.listagem-item .acoes-produto a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%; // Controla a largura aqui
    margin: 0 auto;
}

Você prefere o botão por cima da foto mesmo ou assim? O código que eu mandei, ficaria assim.

image
image762×1286 167 KB

1 curtida
16

Ícone home

.menu.superior .nivel-um li:first-child a:before {
    font-family: FontAwesome;
    content: "\f015";
    margin-right: 7px;
    font-size: 14px;
    vertical-align: middle;
    color: #fc87b5;
}

image

1 curtida
17

obrigada mais uma vez tava cansada de procurar rs! mais esse como coloco um icone?

18

assim é melhor , mas no que me enviou ta no meio

19

@Aurys Não entendi as últimas mensagens.

1 curtida
20

Quando clico na imagem o botão aparece no meio e não abaixo como na foto