# Personalização CCM

***

## Introdução

{% hint style="info" icon="octagon-exclamation" %}
⚠️ **Importante:** o visual pode variar conforme a resolução do celular. Evite colocar textos/elementos importantes muito nas bordas.\
\
Caso queira alterar o visual de seu app, para alguma ação ou seja qual for o motivo, você deve seguir as informações especificadas neste manual, e depois <mark style="color:$success;">**enviar a arte já pronta para nosso suporte através do seu grupo de WhatsApp**</mark>\
\
**Template de Mensagem para enviar no grupo:**\ <mark style="color:$warning;">**(Caso tenha mais de uma loja mencione o nome da filial)**</mark>\
\
"Olá pessoal tudo bem? Gostaria de estar alterando o visual do meu aplicativo, já fiz as artes conforme o manual de personalização de vocês, vou enviar todos os arquivos logo abaixo."
{% endhint %}

***

### Ícones para o aplicativo:

Os ícones serão inseridos no aplicativo e nas lojas **(AppStore** e **PlayStore)**.

<figure><img src="/files/zZeHLWAhXimzBdPVAXFn" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**TAMANHOS:**

* **PNG** 1024 x 1024 pixel&#x20;
* **PNG 215** x 215 pixel
* **PNG** 152 x 152 pixel
* **PNG** 120 x 120 pixel
* **PNG** 76 x 76 pixel
* **PNG** 60 x 60 pixel
  {% endhint %}

***

### Capa PlayStore:

A capa aparece em dois lugares:

1. **Na Google PlayStore**: quando a pessoa abre a página do seu aplicativo.
2. **No compartilhamento do link**: quando alguém envia o link do app (WhatsApp/Instagram/e-mail), essa imagem pode aparecer como “**capa/preview**” do link.

<figure><img src="/files/DTCo54SfOtDJbSOgzgNv" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**TAMANHO:**

* **PNG** 1024(altura) x 500(largura) pixel
  {% endhint %}

***

### Tela de Carregamento Splash:

A **Splash** é a **tela de carregamento** do aplicativo. Ela aparece **assim que o app é aberto**, antes da tela inicial, enquanto o aplicativo está carregando.,

<figure><img src="/files/CKLE4UidiOEOFx6jql3Y" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
**TAMANHO:**

* **PNG** 720(altura) x 1280(largura) pixel - Android
* PNG 1242(altura) x 2688(largura) pixel - IOS(IPhone)&#x20;
  {% endhint %}

***

### Fundo do Aplicativo e Site de Pedidos:

É a **imagem de fundo** que fica **atrás dos botões e componentes** na tela inicial do aplicativo. Nessa arte, deve existir **somente o fundo** (sem botões, sem textos e **sem a logomarca** do estabelecimento).

{% hint style="warning" %}
⚠️ **Importante:** o visual pode variar conforme o tamanho e a resolução do celular. Por isso, evite colocar detalhes importantes muito perto das bordas.
{% endhint %}

<figure><img src="/files/dwRqqZCpvZyxIBLPsXC7" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
**TAMANHO:**

* **JPG** - 1125(altura) x 2436(largura) pixel
  {% endhint %}

***

### Logomarca para uso no App e Site de Pedidos&#x20;

A **logomarca** é a imagem do seu estabelecimento que aparece **na tela inicial do aplicativo** (normalmente no topo), ajudando o cliente a identificar a sua marca.

<div align="center"><figure><img src="/files/4u3Nj7pNacckvcHhxPVn" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**TAMANHO:**

* **PNG** 780(altura) x  400(largura) pixel.
  {% endhint %}

***

### **Fontes**

{% hint style="warning" %}
O estilo das fontes usadas no aplicativo e no site de pedidos são **padrão (Arial)** e **não podem ser alteradas**.
{% endhint %}

***

### Botões do App e Site de Pedidos

Os botões aparecem na **tela inicial** do aplicativo. Atualmente, é possível personalizar os botões de **Delivery**, **Retirada**, **Mesa** e **Sobre Nós**.

Abaixo, veja um exemplo do botão **Delivery**.

<figure><img src="/files/AAbgiKmGPZY3EAVsnMBb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**TAMANHO:**

* **PNG 504** (**largura**) X 122 (**altura**) pixel
  {% endhint %}

***

### **Prints do App nas lojas de aplicativos**

Os prints (imagens) do aplicativo também podem ser personalizados e aparecem na página do app na **Google Play** e na **App Store**.

{% hint style="warning" %}
**Observação:** atualmente, a **Google Play** permite enviar **até 8 prints**, enquanto a **Apple** permite **até 5 prints**.
{% endhint %}

<figure><img src="/files/pDYjm9nqmOK6ZiKB4IDy" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tamanho dos prints da Google Play:**

* **PNG** 1242(**largura**) x 2208(**altura**) pixel

**Tamanho dos prints da Apple Store:**

* **PNG** 1242(**largura**) x 2688(**altura**) pixel
  {% endhint %}

***

### **Imagem de fundo do site de pedidos**

Você também pode trocar a imagem de fundo do site de pedidos por uma imagem da sua preferência. A imagem abaixo mostra um exemplo de como esse fundo aparece no site de pedidos:

<figure><img src="/files/X0NEFI6TcBESonIZDTcd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tamanho:** 1024 (largura) × 683 (altura) Pixel \
**Formato:** JPG
{% endhint %}

***

{% columns %}
{% column %}

## **Dúvidas?**

Ficou com alguma dúvida? Para agilizar o atendimento, o ideal é <mark style="color:$success;">chamar no grupo de suporte do WhatsApp da sua loja</mark>. Assim, você será atendido com muito mais rapidez. \
\
Ou se preferir entre em contato agora mesmo pelo nosso numero abaixo:

* **Telefone:** (17) 3600-9682
* **E-mail:** <suporte@ccmpedidoonline.com.br>
  {% endcolumn %}

{% column %}

<figure><img src="/files/AvT6EIiyIgSLIrXs0P3P" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.ccmpedidoonline.com.br/guias-e-tutoriais/personalizacao-aplicativo-ccm.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.