El bloque del tema da a una publicación Integrada un lugar visible en la página de producto de Shopify. Configura lo que muestra en Composerie y controla su orden dentro de la plantilla de producto en Shopify.
Elige el diseño Integrado
Para una primera publicación, selecciona Integrado en la pantalla Publicar del producto. Esa pantalla usa los valores predeterminados del modo; el paso Configurar anterior y el selector de preajustes no forman parte de ella. Revisa los controles de visualización detallados en los ajustes de tienda del producto.
Los controles avanzados pueden sustituir la interfaz de variantes del tema, mostrar la vista previa en vivo, sustituir el título y el precio, añadir elementos de conversión y dejar que Composerie gestione la acción de añadir al carrito. Activa solo los controles que hayas probado con el tema.
Coloca el bloque de Shopify
Usa el cuadro de configuración de Composerie para abrir la plantilla de producto de Shopify. Mantén el bloque dentro del formulario principal del producto, cerca de los controles de compra, y guarda.
Da estilo al personalizador en Composerie
Abre Escaparate en el dashboard para definir el tema, los colores de marca, la fuente, los botones, el diseño y las opciones avanzadas. A la derecha hay una vista previa en vivo para escritorio y móvil.
Usa CSS personalizado
En Escaparate, abre Avanzado y usa CSS personalizado para cambios estéticos pequeños. El CSS se queda dentro de la raíz del personalizador y tiene un límite de 4000 caracteres.
Usa estas clases estables en lugar de las clases de utilidad generadas:
| Selector | Elemento |
|---|---|
.composerie-input | Campos de texto y otros controles de entrada |
.composerie-label | Etiquetas de campo |
.composerie-textarea | Controles de texto de varias líneas |
.composerie-select | Controles desplegables |
.composerie-dropzone | Zonas de subida de fotos |
.composerie-variant | Controles de variante y de material |
.composerie-addon | Controles de cada complemento |
Por ejemplo, cambia el color del borde de los campos de texto:
.composerie-input {
border-color: #2563eb;
}Los selectores de añadir al carrito y de precio, los selectores de botones demasiado amplios y el CSS inseguro se filtran. Usa los ajustes de apariencia para los botones de compra y los precios. Conserva los selectores existentes al actualizar tu CSS y prueba los controles previstos en la vista previa en vivo y en la tienda, en tamaños de escritorio y de móvil, antes de publicar.
¿Dónde cambio el diseño integrado?
Elige Integrado en Publicar para una primera publicación. Revisa los controles de visualización detallados en los ajustes de tienda del producto y después comprueba en la tienda la publicación correspondiente.
¿Dónde cambio los colores y las fuentes?
Abre Escaparate en la barra lateral de Composerie y usa Tema y Marca.
¿Debo activar todos los controles avanzados?
No. Activa solo los controles que necesite tu tema y comprueba cada uno con una prueba en la tienda.
Siguiente paso
Repasa la lista de comprobación de la vista previa antes de publicar.