Los estilos de página controlan el diseño visual de tus páginas de drop. Un estilo funciona a nivel de cuenta, así que puedes reutilizar el mismo estilo en cada drop o mantener varias variaciones.
Crear un estilo
Ve a Settings y abre la pestaña Page Styles, después haz clic en Create New Style. Esto abre un formulario de estilo en blanco. No hay selector de ruta aquí — siempre comienza desde los valores predeterminados.
Hay otras dos formas de crear un estilo sin rellenar el formulario desde cero:
- Duplicate — cada tarjeta de estilo en la lista de Page Styles tiene un botón Duplicate. Clona ese estilo como "nombre (Copy)", que luego puedes editar.
- Extract from a website — esta opción solo está disponible en el paso Page Design del asistente de drop, no en el área de Page Styles. Consulta How to extract styles from a website.
Primero asigna al estilo un Style Name. Los nombres deben ser únicos; una marca de verificación o una cruz junto al campo te indica si el nombre ya está en uso.
El formulario (tres pestañas)
El formulario tiene tres pestañas: Colors, Typography y Buttons. No hay un panel de vista previa en vivo — solo una pequeña miniatura de tu logo cargado.
Colors
Los colores se agrupan así:
- Core — Background, Text.
- Buttons — Background, Text.
- Secondary — Secondary, Secondary Text (paneles, secciones, áreas destacadas).
- Accent — un único color de acento para destacados.
- Muted — Muted, Muted Text (fondos sutiles, estados deshabilitados).
- Other Elements — Border, Timer Background, Timer Text.
- Logo — Logo Color, más un alternar Logo Background (un scrim detrás del logo). Cuando está activado, estableces su color, opacidad, relleno y estilo de esquina (cuadrado o redondeado).
Cada color abre un selector cuando haces clic en su muestra.
Typography
- Font Sizes — Display, Heading, Subheading, Body, Caption. Cada uno es un valor de texto libre, así que puedes usar rem, px o una expresión
clamp(). - Font Weights — Display, Heading, Body, cada uno de 100–900 (400 normal, 700 bold).
- Font Families — Heading Font y Body Font, elegidos de una lista fija (Inter, Arial, Helvetica, Georgia, Times New Roman, Verdana).
No hay un control de border-radius aquí.
Buttons
A pesar de su nombre, esta pestaña contiene estilos de botón más configuraciones de hero, logo y producto.
- Button Appearance — Shape (Rounded / Square / Pill), Style (Solid / Ghost), Rollover State (Darken / Brighten al pasar el ratón).
- Hero Layout — Vertical Alignment (Top / Bottom / Center) y Horizontal Alignment (Left / Center).
- Logo Image — carga una imagen de logo y establece su ancho.
- Product Display — Preview Images (Artwork / Product / Staging Shot), Thumbnails (Artwork / Product), y el Default Selected product (Smallest / Largest).
- Additional Options — alteradores para un Header Downward Arrow (con texto personalizado), un Low Inventory Warning (con texto personalizado) y un Shipping Cost Display (costos para USA/Canada/Europe y Rest of World).
Guardar
Haz clic en Create Style en la esquina superior derecha. (Cuando editas un estilo existente, el botón dice Update Style.) El estilo se guarda en tu biblioteca de Page Styles y se vuelve seleccionable en el paso Page Design de cualquier asistente de drop.
Editar más tarde
Ve a Settings → Page Styles, haz clic en el botón Edit de un estilo, realiza tus cambios y selecciona Update Style. Consulta How to edit a Page Style para más detalles.