Skip to main content

Banners Slide

O que é?​

Trata-se dos banners primário e secundário da home. O banner primário é uma grande imagem e possui rotatividade para comportar mais de uma. Os banners secundários são imagens menores que em desktop ficam uma ao lado da outra, e, em mobile, uma embaixo da outra.

Banner primário:

Desktop

Banner primário

Mobile

Banner primário mobile

Banner secundário:

Desktop

Banner secundário

Mobile

Banner secundário mobile

Objetivo​

Têm como objetivo comunicar promoções, lançamentos, campanhas para o público geral que entrou no site da sallve.

Configuração​

A configuração dos banners pode ser encontrada na pagina principal do Customize do Shopify. Trata-se das sections Banners Slider (principal) e Banners grid (secundário).

Configuração

Banners Slider​

A section Banners Slider não possui configurações da section em si, sendo todas as configurações realizadas nos blocos, cada um chamado de Slide Banner.

É possível adicionar vários blocos que serão banners distintos. Caso haja mais de um, eles serão rotacionados em uma velocidade de 5s cada.

Em cada bloco, é possível adicionar uma imagem para desktop e outra para mobile, em uma proporção de mais/menos 16:9 e 2:3 respectivamente. É importante que sejam mantidas essas proporções a fim de não cortar nenhuma parte da imagem.

Além das imagens, os banners principais possuem configuração de Internal Promotion, a fim de serem identificados corretamente pelo Google Tag Manager e Google Analytics.

As configurações estão disponíveis em duas partes: Seleção de Imagens e Internal Promotion.

Em Seleção de Imagens, temos:

  • Desktop | Imagem de background ➡️ seleção da imagem de background para desktop
  • Mobile | Imagem de background ➡️ seleção da imagem de background para mobile
  • Link do botão ➡️ URL para a qual o usuário é direcionado ao clicar na imagem

Configuração Slider 1

Em Internal Promotion, temos:

  • Internal Promotion | Name ➡️ input para o nome da campanha
  • Internal Promotion | Creative ➡️ input para o nome do criativo utilizado
  • Internal Promotion | Position ➡️ input para identificar a posição do banner
  • Internal Promotion | Breakpoint ➡️ input do valor do breakpoint, para identificar se o usuário clicou no banner no desktop ou mobile

Configuração Slider 2

Banners Grid​

Na section Banners Grid, as configurações também são realizadas apenas nos blocos, cada um chamado de grid-block.

É possível adicionar vários blocos, possuindo apenas imagem ou imagem e texto. As configurações estão disponíveis em cinco partes: Background, Tag Fineline, Título, Link de redirecionamento e Internal Promotion.

Em Background, ocorre a seleção da imagem de fundo do banner. Em Tag Fineline, temos as configurações do texto secundário:

  • Cor de fundo da tag ➡️ seleção de hexadecimal para a cor de fundo do texto, se houver
  • Cor de texto tag ➡️ seleção de hexadecimal para a cor da fonte
  • Texto da tag ➡️ input de texto

Configuração Grid 1

Em Título, temos as configurações do texto principal do banner:

  • Cor do título ➡️ seleção de hexadecimal para a cor da fonte
  • Texto título ➡️ input de texto
  • Título | Tamanho de fonte - Desktop ➡️ seletor de valor em pixels para a fonte do desktop
  • Título | Tamanho de fonte - Mobile ➡️ seletor de valor em pixels para a fonte do mobile

Em Link de redirecionamento, estão as configurações do link para qual o usuário é redirecionado ao clicar no banner. Pode haver também um texto separado para o link, sublinhado e com um ícone de seta. Nessa parte, há as seguintes configurações:

  • URL do link ➡️ URL para a qual o usuário é direcionado ao clicar na imagem
  • Cor do link ➡️ seleção de hexadecimal para a cor da fonte
  • Texto do link ➡️ input de texto

Configuração Grid 2

Em Internal Promotion, temos:

  • Internal Promotion | Name ➡️ input para o nome da campanha
  • Internal Promotion | Creative ➡️ input para o nome do criativo utilizado
  • Internal Promotion | Position ➡️ input para identificar a posição do banner
  • Internal Promotion | Breakpoint ➡️ input do valor do breakpoint, para identificar se o usuário clicou no banner no desktop ou mobile

Configuração Grid 3

Usabilidade​

Do ponto de vista do usuário, o controle de qual imagem está sendo exibida no Banners Slider, caso haja mais de uma, pode ocorrer através dos botões centralizados na parte inferior. Além disso, em desktop são exibidas setas laterais, e em mobile é possível passar de imagem através do touchscreen.

Banner controles