Generador de código Shopify con IA
Generador de código Liquid para Shopify
Cuéntale a Klorr qué debe hacer la sección. Escribe el Liquid, el CSS y el JavaScript aislados para esa sección, y un schema que convierte cada texto, color e imagen en un ajuste que puedes cambiar en el editor de temas. Pegas un solo archivo en tu tema: sin app, sin cuota mensual y sin scripts que se carguen en cada página.
“Una barra de anuncios con una cuenta atrás hasta el fin de las rebajas, un mensaje corto y un botón. El comerciante elige los colores y la fecha de fin.”
<div class="acd-{{ section.id }}" data-ends="{{ section.settings.ends_at }}">
<p class="acd__msg">{{ section.settings.message | escape }}</p>
<div class="acd__clock" aria-live="polite">
<span data-unit="d">00</span>d <span data-unit="h">00</span>h
<span data-unit="m">00</span>m <span data-unit="s">00</span>s
</div>
{% if section.settings.button_label != blank %}
<a class="acd__btn" href="{{ section.settings.button_link }}">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% style %}
.acd-{{ section.id }} {
background: {{ section.settings.background }};
color: {{ section.settings.text_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Countdown bar",
"tag": "section",
"settings": [
{ "type": "text", "id": "message", "label": "Message", "default": "Summer sale ends in" },
{ "type": "text", "id": "ends_at", "label": "Ends at (YYYY-MM-DD HH:MM)", "default": "2026-10-31 23:59" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#1c1230" },
{ "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
],
"presets": [{ "name": "Countdown bar" }]
}
{% endschema %}Lo que el generador escribe
Liquid que existe
Objetos, filtros y etiquetas reales —section.settings, image_url, block.shopify_attributes— en la estructura de secciones y bloques que espera Online Store 2.0. Nada inventado que el editor de temas rechace al guardar.
Un schema completo
Cada título, color, imagen, enlace e interruptor se convierte en un ajuste con un valor predeterminado sensato, así que la sección se edita en el personalizador, no en el código. Incluye bloques, límites y un preset.
CSS y JavaScript aislados
Los estilos llevan como prefijo el id de la propia sección, así que dos copias en la misma página nunca chocan entre sí ni con tu tema. Los scripts son pequeños, en JavaScript puro, y solo se ejecutan donde está la sección.
Código que es tuyo
Es un único archivo .liquid en la carpeta sections de tu tema. Sin runtime, sin marca de agua, sin permanencia: cancela Klorr y la sección sigue funcionando exactamente igual.
De una frase a una sección en tu tienda
Descríbela
Escribe con tus propias palabras qué debe mostrar y hacer la sección. Añade los colores de tu marca y una captura de pantalla si la tienes.
Perfecciónala
Lee el código, previsualízalo y pide cambios en lenguaje natural —“haz que el botón ocupe todo el ancho en móvil”— hasta que quede como quieres.
Pégala en tu tema
Copia el archivo en la carpeta sections de tu tema y luego agrégala desde el editor de temas como cualquier otra sección.
Paso a paso: cómo añadir una sección personalizada en Shopify →
Cómo se compara
Hay más de una forma de añadir una sección personalizada a una tienda Shopify. Esta es la versión honesta.
| Klorr | El generador de bloques con IA de Shopify | Apps de creación de páginas | Contratar a un desarrollador | |
|---|---|---|---|---|
| Qué obtienes | Una sección completa con sus propios ajustes y bloques | Un único bloque de tema | Páginas creadas dentro del editor de la app | Lo que definas y pagues |
| Funciona en | Cualquier tema Online Store 2.0 | Temas preparados para bloques de tema, como Horizon | Tiendas con la app instalada | Cualquier tema |
| Coste continuo | Tu plan de Klorr mientras creas; el código sigue funcionando sin él | Incluido en Shopify | Una cuota mensual mientras las páginas sigan publicadas | Por cada cambio, por cada factura |
| El código | Liquid legible en tu tema, tuyo para conservar y editar | Generado dentro del editor de temas | Renderizado por la app | Tuyo, una vez entregado |
| Plazo | Segundos, y luego tantas rondas como quieras | Segundos | Horas de arrastrar y soltar | De días a semanas |
Secciones que más se generan
Algunas de las secciones que los comerciantes más piden a Klorr. Cada una enlaza a versiones listas para usar en el marketplace de Klorr, por si prefieres partir de una.
Sección de cuenta atrás
Fin de rebajas, lanzamientos y plazos de envío.
Sección de FAQ en acordeón
Preguntas y respuestas que se despliegan al hacer clic.
Carrusel de testimonios
Reseñas y citas con fotos y valoraciones.
Sección de características de producto
Ventajas, especificaciones y comparativas junto al producto.
Sección de banner principal
Imagen o vídeo a todo el ancho con titular y botones.
Galería lookbook
Cuadrículas de imágenes comprables y comparadores de antes y después.
Preguntas frecuentes
¿Qué es un generador de código Liquid para Shopify?
Es una herramienta que escribe Liquid —el lenguaje de plantillas con el que están hechos los temas de Shopify— a partir de una descripción. Klorr va más allá de los fragmentos: escribe un archivo de sección completo con marcado, CSS, JavaScript y schema, listo para pegar en tu tema.
¿Con qué temas funciona el código?
Con cualquier tema Online Store 2.0, incluidos Dawn, Horizon y los temas de la Shopify Theme Store basados en 2.0. En un tema antiguo (vintage), las secciones solo se pueden añadir a la página de inicio desde el editor de temas.
¿Necesito saber programar?
No. Describes la sección y después la cambias en el editor de temas. Si programas, el resultado es Liquid sencillo y legible que puedes editar como cualquier otra parte de tu tema.
¿Es una app de Shopify?
No. Klorr es donde escribes y perfeccionas la sección; el resultado es un archivo en tu tema. No se instala nada en tu tienda y nada se ejecuta desde los servidores de Klorr cuando un cliente la visita.
¿La sección sigue funcionando si dejo de usar Klorr?
Sí. El código vive en tu tema, no en nuestros servidores. No hay runtime, ni comprobación de licencia, ni marca de agua que quitar.
¿En qué se diferencia de pedirle código Liquid a ChatGPT?
Un chatbot generalista suele inventarse filtros y ajustes que Shopify rechaza, y te deja el schema a ti. Klorr está entrenado en cómo se construyen las secciones reales de Shopify, comprueba el resultado con las reglas de schema que aplica el editor de temas y mantiene cada contenido editable como un ajuste.