Usar la aplicación

Apariencia

La página Apariencia da estilo a todas las tablas de tu tienda a la vez, para que todas encajen con tu marca. Una vista previa en directo en la página muestra cada cambio mientras lo haces.

Haz clic en Guardar en la barra superior para aplicar los cambios. Todas las tablas activas de tu tienda se actualizan al momento: no hace falta volver a guardarlas una a una. ¿Quieres que una tabla se vea distinta? Consulta dar a una tabla su propio estilo.

Ventana de la tabla

Ajuste	Qué hace
Ancho	Estrecha (ideal para tres o cuatro columnas), Mediana (predeterminada), Ancha (espacio para tablas anchas sin desplazamiento horizontal) o Extra ancha (ideal con fotos del producto junto a la tabla).
Radio de las esquinas	0–24 px. 8 px por defecto.
Relleno	0–48 px. 24 px por defecto. Espacio entre el borde de la tabla y su contenido.

La barra de la parte superior de la ventana o del panel.

Ajuste	Qué hace
Mostrar el nombre del producto	Encabeza la ventana con el nombre del producto desde el que se abrió. Si está oculto, los lectores de pantalla lo anuncian igualmente.
Fondo del encabezado	Déjalo vacío para usar el fondo de la tabla.
Color del título	Déjalo vacío para usar el color del texto.
Alineación del título	Izquierda o Centro.
Botón de cierre	✕ simple, o ✕ en un círculo relleno.
Color del icono	La propia ✕. Déjalo vacío para usar el color del título.
Color del círculo	Para el estilo de círculo relleno.

Fotos del producto

Ajuste	Qué hace
Mostrar fotos del producto junto a la tabla	Muestra las fotos del propio producto junto a la tabla, con flechas para recorrerlas. En pantallas grandes solo aparecen en la ventana emergente: los paneles son demasiado estrechos. Combínalo con la ventana Extra ancha.
Mostrarlas también en teléfonos	En los teléfonos, las fotos se colocan encima de la tabla, tanto en la ventana como en los paneles. Si está desactivado, los teléfonos solo muestran la tabla.

Fondo

Ajuste	Qué hace
Color de fondo	La superficie de la tabla. Blanco por defecto.
Color del texto	El texto principal: cámbialo junto con un fondo oscuro para que la tabla siga siendo legible.
Imagen de fondo	Una imagen detrás de toda la tabla.
Ajuste de la imagen	Llenar la tabla, Ajustar la imagen completa o Repetir (mosaico).
Posición de la imagen	Centro, Arriba o Abajo.
Superposición	0–90 %. Difumina la imagen con el color de fondo para que el texto siga siendo legible. Con 0 % la imagen se ve tal cual.

Nota: Las tablas integradas se muestran sobre el fondo de página de tu tema, salvo que definas una imagen de fondo o un color de fondo distinto del blanco.

Tabla

Ajuste	Qué hace
Fondo del encabezado de columnas	Gris claro por defecto.
Texto del encabezado de columnas	Casi negro por defecto.
Líneas de la cuadrícula	El color de las líneas entre filas y celdas.
Sombreado de filas alternas	Colorea una fila sí y otra no para que las tablas anchas se lean con más facilidad.

Cada tabla puede anular estos colores en el editor, en Opciones de estilo.

Texto

Ajuste	Qué hace
Color de los títulos	Los títulos de la tabla, además de detalles como la unidad activa en el selector de unidades y el contorno de foco del teclado.
Tamaño base	11–20 px. 14 px por defecto. Los títulos y el texto se escalan a partir de este valor.

Comportamiento

Ajuste	Qué hace
Cerrar al hacer clic fuera	Activado por defecto. Desactívalo para que la tabla solo se cierre con el botón de cierre. Esc siempre funciona.

CSS personalizado

Para todo lo que no cubren las opciones anteriores. El CSS se añade allí donde aparezca una tabla. Empieza tus selectores con .plug-sc para que solo afecten a la tabla de tallas y no al resto de tu tema.

Nombres de clase útiles:

Ajuste	Qué hace
.plug-sc__trigger	El enlace o botón Tabla de tallas.
.plug-sc__dialog	La ventana emergente o el panel.
.plug-sc__heading	El título de la parte superior de la ventana.
.plug-sc__table	Cada tabla de medidas.
.plug-sc__units	El selector de unidades encima de una tabla.
.plug-sc__float	El botón flotante.
.plug-sc__inline	Una tabla integrada en la página.

/* Texto de tabla más pequeño en la tienda */
.plug-sc .plug-sc__table {
  font-size: 13px;
}

/* Ocultar el botón flotante en teléfonos */
@media (max-width: 749px) {
  .plug-sc .plug-sc__float { display: none; }
}

Importante: El CSS personalizado no se revisa en busca de errores. Si algo deja de verse bien después de un cambio, vacía el cuadro y guarda para volver a los estilos estándar.

Restablecer

Restablecer valores predeterminados devuelve cada opción del formulario a su valor predeterminado. No cambia nada en tu tienda hasta que haces clic en Guardar.