Tamanho e formato das imagens da l

Storefront (loja)
#1

Qual o tamanho que essas imagens tem que ter? (dimensões em px)

CMS → Configurações:

  • LOGO
  • ÍCONE DO APP (.svg?)
  • ÍCONE GRANDE (.svg?)
  • FAVICON (qual formato?)

CMS → LAYOUT → MENU LATERAL

  • ÍCONES DAS CATEGORIAS DO MENU LATERAL (formato .svg ou .png?)
  • ÍCONES DAS CATEGORIAS DO MENU PRINCIPAL (formato .svg ou .png?)

OBS: Qual o tamanho indicado para as imagens dos produtos? (.png quadrado ou retangular)

Sugestão: essa informação poderia ter lá na loja como algo indicado (perdão caso já haja e eu não tenha visto)

Dimensões dos banners do site
Quais as dimenções da imagem para mobiel, no banner?
#2

Bom dia, tudo bem?
Todos os formatos são em png.

  • Logo, ícone do app, ícone grande: Depende de como é o logotipo: Em média: 170px de largura com a altura proporcional.
  • Favicon: Deve ser quadrada, tamanho mínimo (segundo o google): 48 x 48, ou múltiplos superiores disso. Para que o Google consiga redimensionar para 16x16 posteriormente

Ícone categorias: 40 x 40 é um bom tamanho

2 curtidas
#3

oi @germano , sobre os banners, tem esse video aqui também:

Abraço!

2 curtidas
#4

Como eu configuro essa “versão mobile” do banner??

#5

Olá!

No CMS você tem a opção para colocar o banner para o desktop e a versão do banner para mobile:

Screenshot - 2021-03-25T211834.933
Screenshot - 2021-03-25T211834.933611×695 33.1 KB

Se você colocar outra imagem aqui, ela vai somente para o mobile.
Blz?

Abraço!

1 curtida
#6

@thais e as imagens dos produtos, qual as dimensões “recomendadas”? dos .png

#7

1000 px de largura

#8

Oi pessoal, boa tarde! Temos banners full na loja, mas qual a altura em px recomendada para a imagem para não estourar tanto na horizontal, quanto na vertical, como está hoje na loja por exemplo : https://customic.com.br

#9

Boa tarde a altura em px desejável é 450px no máximo

1 curtida
#10

Ah, beleza!

Vamos testar aqui com essa resolução.

Valeu! :call_me_hand:

#11

Bom dia, tudo bem? A largura do banner ficou ótima :+1:, mas a altura ainda esta bem estourada no desktop, cortando o banner na parte de baixo, encobrindo infos do produto: https://customic.com.br/

image
image1812×919 229 KB

Ideal que fosse que nem esta hoje na https://mobifans.com.br/, somente com alguns pixels mais na vertical.

image
image1846×825 313 KB

Tem esse código css de outro tópico que aplicamos lá no CMS ativo, para deixar o banner full, seria algum ajuste nele que precisamos fazer para melhorar ali o tamanho?

}
@media (min-width: 992px) {
  .banner-slider {
    max-width: 100%;
    max-height: calc(200rem*var(--banner-aspect-ratio))
  }
}

obrigado

Abs

#12

Bom dia, problema é seguinte. A largura criada é 800px e a altura é 450px, ou seja, conforme for aumentando a largura para ocupar a tela inteira, a altura também irá aumentar proporcional. Uma largura total normal é 1300px, fazendo isso proporcional, vai aumentar bastante a altura. Então a largura da imagem precisa ser maior, mantendo os 450px máximo. Nesses moldes ai a altura está dando quase 700px

#13

Ta blz, esse banner por exemplo esta com a largura de 1920 px, altura 1000px, para que fique então sem estourar na vertical, e full na horizontal, precisa ser 1300 px na horizontal por 450 px na vertical, isso? O código css ali não muda em nada então, o problema é o tamanho do banner, isso?

#14

Não, se for largura de 1920, então precisa ser largura 1920 e 450px

1 curtida
#15

Muda nada, porque ele ajusta de acordo com o tamanho do banner pegando 100%

1 curtida
#16

Ah, show então, vamos trabalhar nos ajustes das resoluções . :+1:

Valeu pelo suporte!! :clap:

1 curtida
#17

Exemplo interessante: Criando um banner em versão desktop e mobile para a loja virtual de primeiros passos - YouTube

Ele fez o banner com 1200 x 300 px e é uma proporção boa porque não consome toda tela

VERSÃO MOBILE: 480 x 300

2 curtidas
#18

Qual o tamanho das imagens indicado para o GRID DE BANNERS? @thais

#19

oi, tudo bem @germano!

Tem um video aqui nesse link: da uma olhada aqui .

Qualquer dúvida, estou à disposição!

Abraço.

1 curtida
#20

Matheus, boa noite!
A foto do aplicativo mobile está distorcida, eu devo alterar no campo Favicon e com essas medidas e em PNG?

Agradeço desde já.