Menú

Adaptar tienda con tu propio HTML/CSS

Puedes añadir tus propias imágenes, textos, enlaces y demás elementos de HTML.

Para usar tu propio HTML/CSS para tu tienda, en Configuración de tienda > SpreadShop > Configuración avanzada > HTML/CSS tienes a tu disposición tres campos de entrada (Nota: El punto de menú «SpreadShop» solo está visible para usuarios que hayan creado su cuenta de Spreadshirt antes del 30.9.2015):

  • Encabezado de la tienda
  • Pie de página de la tienda
  • Hoja de estilo CSS

En la línea de encabezado/pie de página puedes introducir el HTML que quieras. Para garantizar que tu tienda sigue funcionando, comprobaremos el HTML. En https://validator.w3.org/#validate_by_input también puedes comprobar tú mismo si tu HTML funciona. No olvides que por motivos de seguridad no se puede usar JavaScript y que dado el caso tendremos que eliminarlo.

A continuación encontrarás una selección de clases CSS definibles que te podrían ser útiles para tu tienda. Debería facilitar el diseño de tu tienda. Por supuesto que además también se pueden adaptar otras clases.

¿Qué quieres adaptar?? Clase CSS
Imagen o color de fondo .customPageBackground
Cabecera .customHeader
Pie de página con pie de imprenta y CGC .customFooter
Contador en la cesta de la compra y en la lista de favoritos .customCounter
Advertencias .customNotification
Avisos de error .customNotification.sprd-error
Títulos, p. ej. en la cesta de la compra .customHeadline
Selectores (tamaño, color) .customSelector
Opción elegida en los selectores .customSelector .sprd-active.sprd-item
Selección de categoría (no móvil) .customFilterItem, .customSubfilterItem
Efecto Hover en la selección de categoría (no móvil) .customSubfilterItem:hover
Solo para smartphones. No tabletas ni PC. @media screen and (max-width: 767px) .customSelector.sprd-open
Diferentes botones .customButton
Botones estándar .customButton.sprd-default
.customButton.sprd-default:hover
.customButton.sprd-default:active
Botones importantes como p. ej. «Comprar» .customButton.sprd-primary
.customButton.sprd-primary:hover
.customButton.sprd-primary:active
Botones secundarios como «A la cesta de la compra» (en la lista de favoritos) .customButton.sprd-secondary
.customButton.sprd-secondary:hover
.customButton.sprd-secondary:active
Lightbox .customLightbox
Campo de búsqueda en terminales móviles, menús desplegables en ordenadores de sobremesa .customFilter
Animaciones en la pantalla de carga .sprd-loadable.sprd-loading, .sprd-loader

¿Ha sido útil este artículo?