Como instalar um preset de uma loja de demonstração
13 min
Criado por Gustavo Metz em 11/09/2020 13:47
Atualizado por Gustavo Metz em 25/02/2021 17:23
Menu Aparência  

O preset é um conjunto de configurações visuais que resultam na aparência das lojas demonstrativas.
Você pode copiar este conjunto de configurações para iniciar a criação do visual da sua loja virtual.

Importante!

  • Todas as configurações visuais cadastradas em sua loja serão substituídas pelas configurações do preset. 
  • Caso você tenha conhecimento técnico, é possível realizar um backup do seu tema.
  • A Dooca não presta suporte para edições de código.

Escolhendo um preset

1º Escolha um dos modelos de loja abaixo e baixe os arquivos de configuração que serão inseridos no painel da Dooca.

DC Concept

http://dcconcept.dooca.store/

dc-concept-capa.jpg
Clique aqui para fazer o download dos arquivos.

Dimensões recomendadas:

  • Logos: .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Ícones personalizados: 70x70px - .svg, .png (preferencialmente .svg).

  • Banner Destaque:
    Desktop:
    1920x1080px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg). 

  • Banner Grid: 
    Imagem principal: 
    600x800px - .jpg, .png ou .gif (preferencialmente .jpg). 
    Imagens secundárias
    - 600x380px - .jpg, .png ou .gif (preferencialmente .jpg). 

  • Banner full:
    Desktop:1920x1000px: .jpg, .png ou .gif (preferencialmente .jpg). 
    Mobile: 600x900px: .jpg, .png ou .gif (preferencialmente .jpg). 

  • Informações comerciais: 60x60px svg.

  • Favicon: 256x256px.png.

  • Share: 1200x628 .jpg ou .png (preferencialmente .jpg). 

DC Gamer

 https://dcgamer.dooca.store/

dc-gamer-capa.jpg
Clique aqui para fazer o download dos arquivos

Dimensões Recomendadas:

  • Logos: .svg.
  • Banners em carrossel:
    Desktop: 1920x700px - .jpg, .png ou .gif (preferencialmente .jpg). 
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Mini banner com texto: 70x70px .svg.
  • Banner Grid:
    Imagem principal 583x304px .jpg, .png ou .gif (preferencialmente .jpg). 
    Imagens secundárias: 582x138px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Vitrine em abas: 420x200px.svg.
  • Banners (Compre por jogo): 300x420px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Imagem de fundo: 1680x1050 - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg). 

DC Market

 http://dcmarket.dooca.store/

dc-market-capa.jpg

Clique aqui para fazer o download dos arquivos.

Dimensões recomendadas: 

  • Logos: .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Ícones Menu: 100x100px - .svg, .jpg, .png ou .gif  (preferencialmente .svg).
  • Menu Alimentos básicos: 450x260px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Banners em carrossel:
    Desktop: 1920x450px - .jpg, .png ou .gif (preferencialmente .jpg). 
    Mobile:
     600x800px - .jpg, .png ou .gif  (preferencialmente .jpg). 
  • Banner Entrega: 1540x90px - .jpg, .png ou .gif  (preferencialmente .jpg). 
  • Banner Duplo: 960x290px - .jpg, .png ou .gif  (preferencialmente .jpg). 
  • Fundo contador de promoção: 1920x700px - .svg, .jpg, .png ou .gif  (preferencialmente .svg). 
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg). 

DC Nutrition

https://dcnutrition.dooca.store/

dc1.png

Clique aqui para fazer o download dos arquivos 

Dimensões recomendadas:

  • Logos: .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banners destaques:
    Desktop:
     1920x600px - .jpg, .png ou .gif
    Mobile: 600x900px - .jpg, .png ou .gif
  • Informações Comerciais: 80x70px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banner Grid:
    Imagem principal:
    583x410px - .jpg, .png ou .gif (preferencialmente .jpg). 
    Imagens secundárias: 602x201px - .jpg, .png ou .gif  (preferencialmente .jpg). 
  • Banner Triplo:
  • Banners: 400x400px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Imagem de fundo: - 1920x600px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Vídeo: 1680x500px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Sobre DC Nutrition: 640x590px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Favicon: 256x256px - .png
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg). 
  • Banner Menu:
    Ícones: 80x70px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
    Banner: 600x400px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Imagem de fundo: 1920x800 - .jpg, .png ou .gif (preferencialmente .jpg). 

DC Pet 

http://dcpet.dooca.store/

dc-pet-capa.jpg

Clique aqui para fazer o download dos arquivos.

Dimensões recomendadas: 

  • Logos:.svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Ícones customizados:
    Carrinho: 60x60px - .png ou .svg (preferencialmente .svg).
    Conta: 50x50px - .png ou .svg (preferencialmente .svg).
  • Banners destaques:
    Desktop:1920x680px - .jpg, .png ou .gif (preferencialmente .jpg). 
    Mobile: 600x900px - .jpg, .png ou .gif.
  • Informações Comerciais: 68x68px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banner Triplo: 380x400px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Banner Cupom: 1185x166px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Fotos Animais: 180x180px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Vídeos:
    Imagem de fundo: 1600x600px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg). 
  • Banner Menu: 600x400px - .jpg, .png ou .gif (preferencialmente .jpg). 

 

Dc Fashion

 http://dcfashion.dooca.store/

dc-fashion-capa.jpg

Clique aqui para fazer o download dos arquivos. 

Dimensões recomendadas: 

  • Logos: .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banners Menu: 550x400px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banners em carrossel:
    Desktop:1440x600px - .jpg, .png ou .gif  (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Banners: 900x600px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Imagem com texto: 900x600px -.jpg, .png ou .gif (preferencialmente .jpg). 
  • Vitrine com temporizador: 1920x100px - .jpg, .png ou .gif (preferencialmente .jpg). 
  • Mini Banner com texto: 60x60px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg). 

 Dc Wine

https://dcwine.dooca.store/

dc-wine-capa.jpg
Clique aqui para fazer o download dos arquivos.

Dimensões recomendadas:

  • Logos:.svg, .jpg, .png ou .gif  (preferencialmente .svg).
  • Banners em carrossel:
    Desktop:1920x520px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x800px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banners (duplo adaptavel a tela): 1200x330px - .jpg, .png ou .gif (Preferencialmente .jpg).
  • Banners (duplo centralizado): 800x350px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Mini banner com texto (paises): 512x512px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banners (harmonização): 800x600px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Características:
    Imagem de fundo: 1920x1080px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Favicon: 256x256px - .png (preferencialmente .jpg).
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg).
  • Ícones características: 256x256px - .svg, .jpg, .png ou .gif (preferencialmente .svg).

DC Eletro

https://dceletro.dooca.store/

dc-eletro-capa.jpg

Clique aqui para fazer o download dos arquivos. 

Dimensões Recomendadas:

  • Logos: .svg, .jpg, .png ou .gif  (preferencialmente .svg).
  • Ícones Menu: 100x100px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Menu Eletrodomésticos: 620x400px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banners em carrossel:
    Desktop: 1920x700px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banner Grid:
    Imagem principal: 640x320px - .jpg, .png ou .gif (preferencialmente .jpg).
    Imagens secundárias: - 300x394px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Vitrine com contador superior:
    Imagem de fundo 1920x800px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Mini Banner com texto (Categorias): 400x400px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg).

DC Atacado

https://dcatacado.dooca.store/

dc-atacado-capa.jpg

Clique aqui para fazer o download dos arquivos.  

Dimensões Recomendadas:
  • Logos:.svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banner Destaque:
    Desktop: 1920x600px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banner Triplo: 800x600px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banner Vip:
    Desktop
    : 1205x241px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x600px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Capa loja bloqueada: 1920x600px - .jpg
  • Favicon: 256x256px - .png
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg).

DC Landing

 http://dclanding.dooca.store/

 dc-landing-capa.jpg
Clique aqui para fazer download dos arquivos.

Dimensões Recomendadas:

  • Logos:.svg, .jpg, .png ou .gif (preferencialmente .svg)
  • Ícones customizados: 300x300px - .svg, .jpg, .png ou .gif (preferencialmente .svg)
  • Banner Destaque:
    Desktop: 1920x900px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Imagem Texto: 1000x1000px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Vídeo: 1680x500px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Imagem tópicos:
    Imagem Principal: 1000x1000px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Depoimentos: Imagem de fundo - 1920x800px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Imagens de clientes: 400x400px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Comerciais:
    Imagem de fundo: 1920x450px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Ícones: 60x60px - .svg, .jpg, .png ou .gif (preferencialmente .svg)
  • Favicon: 256x256px - .png
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg).

DC Food

 https://dcfood.dooca.store/
dc-food-capa.jpg
Clique aqui para fazer o download dos arquivos.

Dimensões Recomendadas:

  • Logos: .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Ícones customizados: 100x100px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Ícones Menu: 220x220px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banner menu: 600x400px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Banners em carrossel:
    Desktop:1680x550px - .jpg, .png ou .gif (preferencialmente .jpg).
    Mobile: 600x900px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Ícones comerciais: 360x170px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Fundo cardápio:
    Imagem de fundo 1400x600px - .svg, .jpg, .png ou .gif (preferencialmente .svg).
  • Banner Carrinho/Checkout: 1120x200px - .jpg, .png ou .gif (preferencialmente .jpg).
  • Favicon: 256x256px - .png.
  • Share: 1200x628 - .jpg ou .png (preferencialmente .jpg).

Como configurar o preset

Para configurar o preset escolhido siga as instruções abaixo.

1º No painel de sua loja acesse o menu Aparência, clique em Meus temas e em Editar código.
aparencia1.png

 2º No pop-up Editar código clique em editar.
códigos.png

3º Dentro do Editor de Códigos, clique na pasta Config e em seguida no arquivo "settings-data.json".

json.png

4º Copie todo o conteúdo do arquivo settings-data.txt da loja de demonstração selecionada neste artigo, e cole na opção settings-data.json e clique em salvar.

salvar.png

Importante!

  • As imagens do tema não são inseridas automaticamente, elas estão todas organizadas por pastas no arquivo que você fez o download. Você pode utilizá-las como referência de tamanho para criar as imagens para sua lojas.
  • Para os temas das lojas demonstrativas foram realizados ajustes via CSS Customizado, que podem ser deletados ou editado. Você pode acessar nosso artigo para entender melhor este processo, clique aqui.

Como substituir o preset

Para substituir o preset por outro, siga as instruções abaixo. 

1º Acesse o menu Aparência, clique em Meus temas e em Editar código.

aparencia1.png

2º No pop-up Editar código, clique em editar

códigos.png

3º Dentro do Editor de Códigos, clique na pasta config e em seguida no arquivo "settings-data.json".

json.png

4º Substitua todo o conteúdo do arquivo settings-data.json pelo novo preset desejado e clique em salvar.

15.png

 

Importante!

  • Ao remover o preset, serão removidas todas as alterações feitas na loja.
  • Caso você já tenha inserido um preset, não é possível retornar para as configurações padrão da loja.