> ## 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.

# Diseño del catálogo

Las **tarjetas de producto** del listado definen cómo se ve el catálogo: proporción de foto, etiquetas y dónde va el botón de agregar. Conviene revisarlas en la preview del catálogo, no solo en el inicio.

## Dónde configurarlo

Desde el menú lateral, entrá a **Diseño → Catálogo**. En la vista previa, andá a la página de **catálogo** para ver el resultado.

<Frame>
  <img src="https://mintcdn.com/mercantis/4Uy3hrDnn9kZhYiC/images/2026-06-30-catalogo-seo.webp?fit=max&auto=format&n=4Uy3hrDnn9kZhYiC&q=85&s=dc2c7cf7032849a15fa9bf189e4c0ac5" alt="Página de catálogo de la tienda con banner, categorías y grilla de productos" width="1024" height="768" data-path="images/2026-06-30-catalogo-seo.webp" />
</Frame>

## Qué podés ajustar

| Opción                   | Detalle                                          |
| ------------------------ | ------------------------------------------------ |
| **Tarjeta intro**        | Sin fondo o con fondo SVG                        |
| **Proporción de imagen** | Cuadrado, intermedio o retrato                   |
| **Etiquetas**            | Adentro o afuera de la imagen, con transparencia |
| **Botón de agregar**     | Adentro o afuera de la tarjeta                   |
| **Compartir**            | Transparencia del control de share (si aplica)   |
| **Escritorio**           | Espacio entre filas de la grilla                 |

También hay controles de estilo para la **tarjeta de categoría** al inicio del catálogo (fondo, claridad, blur).

## Cómo configurarlo

<Steps>
  <Step title="Abrí Diseño">
    Entrá a **Diseño** desde el menú lateral.
  </Step>

  <Step title="Andá al catálogo">
    En la vista previa, abrí la página de **catálogo**.
  </Step>

  <Step title="Ajustá las tarjetas">
    En la sección **Catálogo**, probá proporción, etiquetas y botón de agregar.
  </Step>

  <Step title="Guardá">
    **Guardá cambios**.
  </Step>
</Steps>

## Relacionado

* [Diseño de la ficha de producto](/documentacion/tienda/diseno-de-producto)
* [Categorías en el inicio](/documentacion/tienda/categorias-en-inicio)
* [Crear y editar productos](/documentacion/catalogo/crear-producto)
* [Editor de diseño](/documentacion/tienda/editor-de-diseno)