Como podemos ajudar?

Encontre os artigos que irão ajudá-lo a melhorar sua loja virtual

Produtos
Filtros da busca:
Filtrando por:

FC 15084 :: Como personalizar os banners exibidos na home da loja?

Veja como personalizar e mostrar mais imagens no carrossel de imagens da página inicial.

Este carrossel de imagens, também conhecido como slideshow, é uma maneira bastante usual de apresentar promoções, novidades e outras informações para os clientes, em um mesmo espaço do design.


Normalmente são utilizadas imagens grandes, bonitas e chamativas. Elas devem focar na persuasão do visitante e ser alteradas periodicamente, para divulgar promoções em datas comemorativas, mensagens da loja, ofertas etc.



ATENÇÃO: Os procedimentos deste artigo consideram que loja utiliza o modelo 2 atualizado. Fale com nossa equipe de suporte se sua loja utiliza outro modelo ou tem design personalizado.

Vamos mostrar quatro opções para a inclusão de imagens no carrossel. Verifique qual se enquadra melhor na sua loja:


1ª Opção - Utilizar as tags especiais de banners

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, localize o trecho de código abaixo:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="<banner-redir 11>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="<banner-redir 12>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 12>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 12>">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div>
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

A única parte do código que precisamos copiar e duplicar é onde o banner é exibido.

<div class="swiper-slide">
  <a href="<banner-redir 11>">
    <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
  </a>
</div>

Veja como fica o código do slideshow com três banners cadastrados:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="<banner-redir 11>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="<banner-redir 12>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 12>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 12>">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div> 

      <div class="swiper-slide">
        <a href="<banner-redir 13>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 13>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 13>">
        </a>
      </div>
      
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

Após a inclusão do novo banner, clique em Salvar.

No exemplo acima, deixamos de forma destacada em laranja o que precisa ser alterado para mostrar o banner cadastrado na página BANNERS do site administrativo.

O próximo passo é cadastrar o banner.

No menu esquerdo da administração clique em BANNERS > Incluir banner.

No campo Posição, escolha a opção <banner 13>. Após preencher os campos do formulário do banner, clique em Incluir.

A conexão do banner cadastrado com o slideshow funciona porque seguimos um padrão. Se analisar o código, as opções <banner-redir 13>, <banner-image 13> e <banner-alt 13> são referentes ao <banner 13>.

Se cadastrar um novo banner com a Posição <banner 82>, veja abaixo como ficaria o código:

<div class="swiper-slide">
  <a href="<banner-redir 82>">
    <img WavE-interchange="[none,(max-width: 1024px)],[<banner-image 82>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 82>">
  </a>
</div>



2ª Opção - Utilizar imagem ao invés da tag banner

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, localize o trecho de código abaixo:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop2.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 2">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div>
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

A única parte do código que precisamos copiar e duplicar é onde o banner é chamado:

<div class="swiper-slide">
  <a href="#">
    <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop3.jpg>, (min-width:1025px)]" DisableLazyLoad alt="Banner 3">
  </a>
</div>

Veja como fica o código do slideshow com três banners cadastrados:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="<banner-redir 12>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop2.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 2">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div> 

      <div class="swiper-slide">
        <a href="#">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop3.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 3">
        </a>
      </div>
      
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

Após a inclusão do novo banner, clique em Salvar.

No exemplo acima deixamos de forma destacada em laranja o que precisa ser alterado para mostrar o banner.

Ao contrário da opção 1, nessa opção não é necessário cadastrar a posição do banner.

Envie a imagem do banner para a pasta IMAGES da loja. No topo do site administrativo, clique em Arquivos > pasta IMAGES, e clique no botão Enviar arquivos.

Ao cadastrar de forma manual o banner, é necessário preencher a URL, o nome da imagem e a tag alt.

Por exemplo, se o nome da imagem é promo123.jpg e esse banner será direcionado para promoções, veja abaixo como ficará o código:

<div class="swiper-slide">
  <a href="/prod,offers,1,offers.htm">
    <img WavE-interchange="[none,(max-width: 1024px)],[PathTo file="images/promo123.jpg", (min-width:1025px)]" DisableLazyLoad alt="Banner 3">
  </a>
</div>



3ª Opção - Utilizar a tag Banner nas versões Mobile e Desktop

Nesse exemplo será necessário criar duas imagens, uma imagem para ser mostrada na versão Mobile e outra na versão Desktop.

Por exemplo, se imagem que for mostrada na versão Desktop for salva como banner-slideshow.jpg. A imagem para versão Mobile precisa ter o sufixo -mob no nome do seu arquivo, ou seja, banner-slideshow-mob.jpg.

Recomendamos as seguintes dimensões de imagens:

Desktop: 1900px x 350px (banner-slideshow.jpg)
Mobile: 1024px x 900px (banner-slideshow-mob.jpg)

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, localize o trecho de código abaixo:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="<banner-redir 11>">
          <img WavE-interchange="[<banner-image-mobile 11>,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="<banner-redir 12>">
          <img WavE-interchange="[<banner-image-mobile 12>,(max-width: 1024px)],[<banner-image 12>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 12>">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div>
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

A única parte do código que precisamos copiar e duplicar é onde o banner é chamado:

<div class="swiper-slide">
  <a href="<banner-redir 11>">
    <img WavE-interchange="[<banner-image-mobile 11>,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
  </a>
</div>

Veja como fica o código do slideshow com três banners cadastrados:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="<banner-redir 11>">
          <img WavE-interchange="[<banner-image-mobile 11>,(max-width: 1024px)],[<banner-image 11>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 11>">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="<banner-redir 12>">
          <img WavE-interchange="[<banner-image-mobile 12>,(max-width: 1024px)],[<banner-image 12>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 12>">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div> 

      <div class="swiper-slide">
        <a href="<banner-redir 13>">
          <img WavE-interchange="[<banner-image-mobile 13>,(max-width: 1024px)],[<banner-image 13>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 13>">
        </a>
      </div>
      
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

Após a inclusão do novo banner, clique em Salvar.

No exemplo acima, deixamos de forma destacada em laranja o que precisa ser alterado para mostrar o banner cadastrado.

O próximo passo é cadastrar o banner.

No menu esquerdo do site administrativo, clique em BANNERS > Incluir banner.

No campo Posição, escolha a opção <banner 13>. Após preencher os campos do formulário do banner, clique em Incluir.

A conexão do banner cadastrado com o slideshow funciona porque seguimos um padrão. Se analisar o código, as opções <banner-redir 13>, <banner-image-mobile 13> <banner-image 13> e <banner-alt 13> são referentes ao <banner 13>.

Obs: Na ficha de cadastro do banner só existe um campo para enviar a imagem. Nesse campo envie a imagem referente ao Desktop. Envie a imagem da versão Mobile pela pasta IMAGES através do Gerenciador de Arquivos.

Se cadastrar um novo banner com a Posição <banner 82>, veja abaixo como ficará o código:

<div class="swiper-slide">
  <a href="<banner-redir 82>">
    <img WavE-interchange="[<banner-image-mobile 82>,(max-width: 1024px)],[<banner-image 82>, (min-width:1025px)]" DisableLazyLoad alt="<banner-alt 82>">
  </a>
</div>



4ª Opção - Utilizar imagem nas versões Mobile e Desktop

Nesse exemplo será necessário criar duas imagens: uma imagem para ser mostrada na versão Mobile e outra na versão Desktop.

Recomendamos as seguintes dimensões de imagens:

Desktop: 1900px x 350px
Mobile: 1024px x 900px

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para editar.

No final do arquivo, localize o trecho de código abaixo:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#>">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop2.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 2">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div>
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

Nesse exemplo de código, preciamos referenciar uma imagem para ser mostrada no Mobile:

<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
  <link rel="stylesheet" rel="preload" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#>">
          <img WavE-interchange="[<PathTo file="images/fundotop-mobile1.jpg">,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">
          <div class="fc-swiper-text-container home-slide-txt-1">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-1-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-1-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-1-slideshow-button"></var></div>
          </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img WavE-interchange="[<PathTo file="images/fundotop-mobile1.jpg">,(max-width: 1024px)],[<PathTo file="images/fundotop2.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 2">
          <div class="fc-swiper-text-container home-slide-txt-2">
            <div class="fc-swiper-text-title"><h2><var key="home-banner-2-slideshow-title"></var></h2></div>
            <div class="fc-swiper-text-subtitle"><h2><var key="home-banner-2-slideshow-subtitle"></var></h2></div>
            <div class="fc-swiper-text-btn"><var key="home-banner-2-slideshow-button"></var></div>
          </div>
        </a>
      </div>
    </div><script>FCLib$.execLazyLoad();</script>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

Para entender melhor o que foi alterado, segue a comparação de mudanças em uma linha:

DE:

<img WavE-interchange="[none,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">

PARA:

<img WavE-interchange="[<PathTo file="images/fundotop-mobile1.jpg">,(max-width: 1024px)],[<PathTo file="images/fundotop1.jpg">, (min-width:1025px)]" DisableLazyLoad alt="Banner 1">

Agora a imagem fundotop-mobile1.jpg será mostrada para Mobile até a dimensão da tela 1024px, e a imagem fundotop1.jpg será mostrada para Desktop em telas acima de 1025px.

O processo para cadastrar mais banners foi explicado nas opções 1, 2 e 3. O procedimento é o mesmo.

 Avaliações dos clientes:
Este produto ainda não recebeu avaliações de clientes.
Clique aqui e seja o primeiro a avaliá-lo

Seu sucesso não pode esperar,

Criar agora sua
Loja Virtual!

Veja Nossos Planos

Ou fale com um de nossos
consultores
especializados
em e-commerce.

Veja nossos Planos e Serviços

Visão Geral

Saiba Mais

Download

Contato

Siga Nossos Canais

Você sabia?

A 1ª plataforma de comércio eletrônico do Brasil é também a mais escolhida pelos lojistas!

Clique aqui e experimente grátis!