> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mercantis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor de diseño

Antes de publicar cómo se ve tu tienda, podés probar todo en una **vista previa en vivo**: colores, encabezado, portada y el resto del look en escritorio y celular.

## Dónde abrirlo

Desde el menú lateral, entrá a **Diseño**. Ahí se abre el editor con la preview y el panel de secciones.

<Frame>
  <img src="https://mintcdn.com/mercantis/4Uy3hrDnn9kZhYiC/images/2026-07-14-design-preview.webp?fit=max&auto=format&n=4Uy3hrDnn9kZhYiC&q=85&s=00a0eba0ab9ad04ee81ba95cccb132a7" alt="Panel de diseño con vista previa en vivo: Tema y preview de la tienda en escritorio" width="1024" height="768" data-path="images/2026-07-14-design-preview.webp" />
</Frame>

## Cómo abrirlo

<Steps>
  <Step title="Entrá al panel">
    Abrí el panel de tu tienda.
  </Step>

  <Step title="Tocá Diseño">
    En el menú lateral, tocá **Diseño**.
  </Step>

  <Step title="Usá la vista previa">
    Se abre el modal con la **vista previa** y el panel de secciones a la izquierda (o en hoja en celular).
  </Step>
</Steps>

## Escritorio y celular

En la barra del editor podés cambiar entre:

* **Escritorio**: preview tipo navegador
* **Celular**: preview tipo teléfono

Algunos controles solo aparecen en una vista. Por ejemplo, la disposición de **categorías en carrusel** se configura en vista **Celular**.

## Guardar o descartar

* **Guardar cambios**: aplica el diseño a la tienda real.
* **Descartar**: vuelve a lo que tenías guardado y cierra sin aplicar.

Mientras no guardes, los cambios viven solo en la sesión del editor.

## Qué se edita acá y qué en Ajustes

| En **Diseño**                                                                                                                                         | En **Ajustes → General**                                                                   |
| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Tema (color), encabezado, barra de anuncios, portada, categorías del inicio, beneficios, botón de WhatsApp, FAQ, estilo del catálogo, ficha y carrito | Logo circular, nombre, descripción, WhatsApp de pedidos, redes sociales, link de la tienda |

El diseño controla la **presentación**. El **contenido** (número de WhatsApp, URLs de redes, textos de FAQ, etc.) se completa en Diseño o en Ajustes según la tabla.

## Secciones del panel

1. [Logo, colores y datos](/documentacion/tienda/logo-y-colores)
2. [Encabezado y logotipo](/documentacion/tienda/encabezado-y-logotipo)
3. [Barra de anuncios](/documentacion/tienda/barra-de-anuncios)
4. [Portada](/documentacion/tienda/portada)
5. [Categorías en el inicio](/documentacion/tienda/categorias-en-inicio)
6. [Beneficios de la tienda](/documentacion/tienda/beneficios-de-la-tienda)
7. [Botón de WhatsApp](/documentacion/tienda/boton-de-whatsapp)
8. [Preguntas frecuentes](/documentacion/tienda/preguntas-frecuentes)
9. [Diseño del catálogo](/documentacion/tienda/diseno-del-catalogo)
10. [Diseño de la ficha de producto](/documentacion/tienda/diseno-de-producto)
11. [Diseño del carrito](/documentacion/tienda/diseno-del-carrito)

## Relacionado

* [Publicar tu tienda](/documentacion/publicar-tienda)
* [Experiencia de checkout](/documentacion/tienda/checkout-del-comprador)