Estiliza tus diseños in situ en Clerk.io
Los diseños determinan cómo deben mostrarse visualmente los productos en las recomendaciones, búsquedas y correos electrónicos de Clerk.io. **Un diseño se puede utilizar en varios bloques de contenido.
El lenguaje de diseño es una versión modificada de Handlebars. Puedes leer más sobre el Lenguaje de diseño web aquí.
Creación de un nuevo diseño
En el menú de la izquierda de my.clerk.io, selecciona Diseño debajo de Buscar, Recomendaciones o Correo electrónico, sea cual sea el contenido para el que estás creando un diseño.
En la página siguiente, selecciona Nuevo diseño en la esquina superior derecha.
A continuación, elija el tipo de contenido con el que le gustaría empezar su diseño. En este ejemplo, estamos utilizando el Deslizador de productos.
A continuación, seleccione Siguiente en la esquina inferior derecha.
En la siguiente sección puedes nombrar tu diseño. Una vez hecho esto, selecciona Siguiente.
A continuación podrás elegir si quieres trabajar en tu diseño a través del Editor de diseño o Código.
NOTA: Si tienes poca experiencia con código, específicamente HTML y CSS te aconsejamos que utilices el Editor de Diseño.
Una vez que haya elegido, seleccione Crear diseño. Su diseño listo para usar se mostrará donde podrá realizar cualquier cambio en el diseño con unos pocos clics.
Cambiando Diferentes Partes de un Diseño En Código
HTML
El código HTML se utiliza para renderizar el HTML del bloque Clerk.io, incluyendo los datos del Producto y el contenedor que lo rodea.
Los atributos pueden insertarse a través de nuestro lenguaje de plantillas y luego utilizarse como parte del diseño. Asegúrate de que cualquier atributo personalizado que quieras utilizar en tus diseños está sincronizado con Clerk.io.
CSS
Puede utilizar este editor para escribir CSS personalizado para utilizarlo en sus plantillas. Cualquier CSS que escriba se inyectará en la parte superior de la página.
Los códigos de incrustación de Clerk.io simplemente inyectan todo a tu tienda web, lo que significa que todo tu ** CSS existente** puede estar disponible en tu Diseño.
Para ajustar cualquier CSS en tu diseño, primero localiza la clase o el valor ID que quieras modificar en el contenedor CSS del diseño. A continuación, puede ajustar los componentes existentes del CSS de ese elemento o añadir elementos a la pantalla en esa clase/ID.
Copiar un diseño existente y convertirlo en un diseño de Clerk.io
Si tienes diseños existentes en tu tienda online que te gustaría utilizar con Clerk.io, tienes la opción de convertirlos y copiarlos en tus diseños de Clerk.io. Esto puede ser particularmente útil cuando consideres el Diseño para la Página de Búsqueda de tu tienda web.
Después de identificar el diseño que te gustaría replicar, copiar y modificar tu diseño a un Diseño de Clerk.io toma 3 pasos principales:
1. Copia + pega tu diseño existente
En primer lugar, identifique el diseño utilizado actualmente en los archivos de tema para su tienda web que desea copiar en Clerk.io, a continuación, copie y pegue en el contenedor HTML en un diseño vacío de Clerk.io.
Si tienes CSS asociado al diseño, inclúyelo en el contenedor CSS debajo del HTML.
2. Sustituye los valores de las variables por el valor y la sintaxis del atributo Clerk.io.
Para utilizar los atributos de tu tienda en tu diseño Clerk.io, asegúrate de cambiar el nombre del valor por el utilizado en tus datos Clerk.io, y actualizar a la sintaxis {%raw%} {{ attribute }}.
- Por ejemplo, si haces referencia a una lista precio en tu tienda online, el atributo puede llamarse lista_precio en tus Datos Clerk.io, y entonces necesitaría ser referenciado como {{ product.list_price }} en tu Diseño Clerk.io.{%endraw%}
3. **Envolver el diseño en un bucle de producto.
El último paso es añadir un bucle for a su Diseño copiado y modificado, para asegurar que el código del Diseño itera para los productos aplicables en su contenido de Búsqueda o Recomendaciones.
Para ello, basta con añadir {%raw%} {% for product in products %} antes de su deslizador principal
