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

# Estilos del selector de productos en la página de producto

> Muestra variantes, precios y cantidades como desplegable o como botones tipo píldora en tu tienda.

En la página de detalles del producto de tu tienda, tus clientes eligen variantes, precios, cantidades y ventas adicionales. Con los estilos del selector decides cómo se muestran esas opciones: en un menú **desplegable** compacto o como **botones tipo píldora** visibles de un vistazo. Elegir bien el estilo hace que comprar sea más fácil y que tu tienda se vea coherente.

## Para qué te sirve

* **Opciones más visibles:** con píldoras, el cliente ve todas las variantes sin abrir ningún menú.
* **Tienda más coherente:** los selectores de variantes, cantidad, ventas adicionales y precios múltiples siguen el mismo estilo visual.
* **Mejor experiencia en el celular:** el comportamiento está optimizado para escritorio y móvil.
* **Control del diseño:** eliges entre un diseño compacto o uno más visual.
* **Vista previa fiel:** lo que ves en el constructor y en su vista previa es lo que verá tu cliente.

## Desplegable o píldoras: cuál elegir

| Estilo | Cómo se ve | Mejor para |
| - | - | - |
| **Desplegable** | Las opciones están dentro de un menú | Productos con muchas variantes, páginas compactas y tiendas que prefieren una selección tradicional |
| **Píldoras** | Las opciones aparecen como botones directamente en la página | Productos con pocas variantes, tiendas más visuales y páginas donde es importante que el cliente descubra todas las opciones |

Con píldoras también puedes personalizar los colores de las opciones seleccionadas y no seleccionadas.

## Cambia el estilo del selector

**1. Abre el constructor de tu tienda**

Entra a tu tienda en línea y abre la **página de detalles del producto** para editarla.

**2. Selecciona el elemento de producto**

Haz clic en el **elemento de producto** de la página.

**3. Busca el estilo de variantes**

En el panel de configuración general, localiza **Estilo de variantes** (Variants styling).

**4. Elige el estilo**

Selecciona **Desplegable** o **Píldoras**.

**5. Revisa la vista previa**

Abre la vista previa del constructor y comprueba cómo se ven las variantes, los precios y la cantidad en escritorio y en móvil.

**6. Guarda y publica**

Guarda los cambios y publica la página.

## Detalles importantes

* **Desplegable** sigue siendo el estilo predeterminado en las tiendas existentes. Tu tienda no cambia a píldoras a menos que lo hagas tú.
* Con píldoras, todas las opciones de variante se muestran en la página.
* Las píldoras permiten **una sola selección por grupo de variantes**: por ejemplo, una talla del grupo de tallas y un color del grupo de colores.
* La personalización de color del **selector de cantidad** solo está disponible con el estilo píldoras.
* Los selectores de **precios múltiples** siguen el mismo estilo que elijas para las variantes.
* Cuando el cliente elige una variante que tiene una imagen asignada, la página muestra esa imagen. Si la variante no tiene imagen, se mantiene la actual. Elegir una imagen no cambia la variante seleccionada.

> [!TIP]
>
> Si un producto tiene más de seis u ocho opciones en un mismo grupo, el desplegable suele verse más ordenado, sobre todo en el celular. Para dos a cinco opciones, las píldoras ayudan a que el cliente compare y decida más rápido.

## Preguntas frecuentes

> **¿Mi tienda cambiará de diseño automáticamente?**
>
> No. Las tiendas existentes siguen usando el desplegable hasta que cambies el elemento de producto a píldoras.

> **¿Cuál es la diferencia entre desplegable y píldoras?**
>
> El desplegable agrupa las opciones en un menú. Las píldoras las muestran como botones directamente en la página.

> **¿El cliente puede elegir varias opciones del mismo grupo?**
>
> No. Las píldoras permiten una sola selección por grupo de variantes.

> **¿Por qué no puedo cambiar los colores del selector de cantidad con el desplegable?**
>
> Porque esa personalización solo está disponible con el estilo píldoras, para mantener un diseño consistente.

> **¿Puedo ver el resultado antes de publicar?**
>
> Sí. El comportamiento se refleja en el constructor y en su vista previa.

> **¿Funciona en la tienda móvil?**
>
> Sí. Los selectores están optimizados para escritorio y móvil.

## Artículos relacionados

> **[Páginas de producto personalizadas](https://help.chateea.com/docs/tienda/pagina-de-producto-personalizada.md)**
>
> Diseña a tu medida la página de cada producto.

> **[Diseños de medios en la página del producto](https://help.chateea.com/docs/sitios/disenos-de-medios-de-producto-para-la-pagina-de-detalles.md)**
>
> Elige cómo se muestran las imágenes del producto.

> **[Crea tu tienda en línea](https://help.chateea.com/docs/tienda/crear-tienda-en-linea.md)**
>
> Configura tu tienda desde cero.

> **[Ventas adicionales después del pago](https://help.chateea.com/docs/tienda/ventas-adicionales-despues-del-pago.md)**
>
> Ofrece productos extra al finalizar la compra.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.