Shopify + IA Diseña Tu Propia Tienda
Ver los 4 Ejemplos
Crea y Recrea Elementos para Tu Tienda con IA

Aprende a crear o recrear componentes Shopify para tu propia página

Aprende a transformar cualquier diseño, captura o idea en elementos reales para tu tienda. Dominarás los 3 métodos de Shopify: el Bloque Liquid directo, el Bloque de Tema en /blocks con Schema y la Sección Personalizada en /sections.

Ver los 3 Métodos Clave Ver los 4 Ejemplos
3 Métodos de Código
4 Ejemplos Reales
0€ Sin Pagar Apps Extra
mi-tienda-shopify.liquid
Online Store 2.0 
# LOS 3 MÉTODOS QUE APRENDERÁS EN EL VIDEO:
# 1. Bloque Liquid: Solo pegar el código en el bloque existente.
# 2. Bloque (/blocks): Archivo nuevo con schema para meter en secciones.
# 3. Sección (/sections): Archivo nuevo con schema para filas completas.

<div class="mi-estrategia-shopify">
  <!-- Todo el paso a paso en vivo lo veremos en el video -->
</div>
Pregunta Fundamental

¿Cuándo debo usar esto? Los 3 Métodos

En Shopify tienes 3 formas de agregar código para tu propia tienda. Revisa a continuación cuándo utilizar cada una:

⚡ Método 1: Solo pegar código

Bloque "Liquid Personalizado"

"Es solo poner el código directamente en el bloque que ya viene con ese nombre."

En resumen:

El camino más rápido cuando no necesitas controles visuales y quieres resolverlo en 1 minuto sin crear archivos.

¿Cuándo usarlo en tu tienda?

  • Cero archivos nuevos: Lo pegas directo en el bloque que ya existe en el editor visual de Shopify.
  • Casi nunca se cambia: Ideal para scripts, widgets o popups fijos que dejas listos una sola vez.
  • Sin schema: Si quieres cambiar un texto en el futuro, lo editas directamente en el código dentro de la cajita.
🧩 Método 2: Archivo en /blocks

Bloque de Tema Personalizado

"Es un archivo nuevo en /blocks con schema para meterlo DENTRO de secciones."

En resumen:

Ideal cuando quieres un elemento con controles visuales (cajitas) pero que viva dentro de una sección existente (ej. Ficha de producto).

¿Cuándo usarlo en tu tienda?

  • Schema propio: Tiene cajitas para editar textos, colores y tamaños desde el panel sin tocar código.
  • Dentro de secciones: Lo puedes insertar dentro de Información del producto, Detalles o Banners.
  • Reutilizable y movible: Lo arrastras arriba o abajo con el mouse exactamente donde tú quieras.
📦 Método 3: Archivo en /sections

Sección Personalizada Completa

"Es un archivo nuevo en /sections con schema para crear filas y contenedores completos."

En resumen:

El estándar para componentes grandes e independientes que ocupan su propia fila completa en la página.

¿Cuándo usarlo en tu tienda?

  • Fila completa: Aparece en el menú principal "Agregar sección" para colocarla en cualquier parte de tu tienda.
  • Schema y bloques repetibles: Puedes agregar 2, 3, 4 o más tarjetas dinámicas desde el panel.
  • Componentes grandes: Ideal para tarjetas de autor, carruseles, videos destacados o testimonios.

¿Cómo decidir cuál de los 3 usar para tu página?

1. Rápido / Sin Cambios

Bloque Liquid Personalizado: Lo pegas directo en el editor visual si es un código fijo que casi nunca cambiarás (sin crear archivos).

2. Dentro de Secciones

Bloque en /blocks: Creas un archivo con schema para tener cajitas DENTRO de la ficha de producto u otra sección.

3. Fila Completa

Sección en /sections: Creas un archivo con schema para colocar un componente grande de ancho completo desde "Agregar sección".

Ruta de Aprendizaje

Temario del Tutorial en Video

Este es el paso a paso que seguiremos en el video para que aprendas a dominar los 3 métodos con IA para tu propia tienda:

01
Módulo 1 Fundamentos

Los 3 Caminos de Shopify: /blocks y /sections

Comprende la estructura de tu tema y ten clara la regla de decisión antes de escribir una sola línea.

  • Las 3 formas de agregar código: Bloque Liquid directo, Bloque en /blocks y Sección en /sections.
  • Dónde está el editor de código en Shopify y cómo se conecta con el editor visual.
  • La regla de oro: ¿Cuándo usar solo el bloque visual vs. cuándo crear un archivo con schema?
02
Módulo 2 Estrategia IA

Cómo Guiar a la IA para Obtener Código Limpio

Aprende a comunicarle a la IA qué método de los 3 necesitas a partir de cualquier imagen, captura o idea.

  • Cómo pedirle a la IA el formato exacto: sin romper el tema y con estilos (CSS) aislados.
  • Cómo pedirle que cree las cajitas de control (schema) correctas (textos, colores, márgenes).
  • La clave para que el código sea 100% adaptable a teléfonos móviles.
03
Módulo 3 Práctica Directa

Método 1 en Vivo: Bloque "Liquid Personalizado" (Sin archivos)

Resuelve elementos fijos en 1 minuto pegando el código directo en el editor visual de Shopify.

  • Caso Práctico: Notificación flotante de compras recientes (Social Proof Toast).
  • Cómo pegarlo en el bloque nativo, configurar el tiempo de aparición y probarlo en vivo.
04
Módulo 4 Práctica Modular

Método 2 en Vivo: Bloques en /blocks con Schema Propio

Crea un archivo de bloque autónomo para insertarlo con controles visuales dentro de la ficha de producto.

  • Caso Práctico: Barra de 3 Beneficios (Trust Badges).
  • Crear el archivo en la carpeta Blocks, configurar el schema y habilitar @theme.
  • Probar cómo cambiar textos/colores desde el panel lateral y moverlo arriba/abajo con el ratón.
05
Módulo 5 Práctica Completa

Método 3 en Vivo: Secciones en /sections con Schema Completo

Construye componentes independientes de ancho completo que se agregan desde "Agregar sección".

  • Casos Prácticos: Card de Video Demo (vinculado a YouTube) y Tarjeta de Autor / Historia.
  • Crear el archivo en Sections, configurar presets para el menú general y enlazar el video.
  • Checklist final: Comprobar la vista en celulares y verificar la velocidad de carga.
Práctica Real

Los 4 Elementos que Recrearemos

Durante el video tutorial construiremos y adaptaremos estos cuatro componentes reales para tu página. Desplázate hacia abajo para ver y probar cada uno:

Ejemplo #1

Barra de 3 Beneficios & Garantías

Líneas punteadas arriba y abajo con los 3 beneficios e íconos: Despacho a todo Chile, Compra Segura y Soporte directo.

Se construirá en el video
Demostración en Vivo para tu Tienda
Despacho a todo Chile
Compra Segura
Soporte directo

Lo que aprenderás a hacer en el video

Verás cómo crear esta barra de confianza para tu tienda, evaluando si te conviene como Bloque Liquid directo, Bloque en /blocks con schema, o Sección completa.

Recreación fiel con IA: Cómo pedirle los 3 íconos limpios, las líneas punteadas y las proporciones exactas.
Personalización para tu tienda: Cómo adaptar los textos de tus beneficios, los colores y los márgenes con cajitas de control.
Vista perfecta en móviles: Cómo asegurar que en celular los íconos se ordenen sin desarmar la página.
Aprenderás a construirlo y probarlo paso a paso en el video.
Ejemplo #2

Card de Video de Demostración

Tarjeta con título elegante y reproductor de video oscuro con botón Play llamativo para mostrar tu producto o curso.

Se construirá en el video
Demostración en Vivo para tu Tienda
DEMOSTRACIÓN DEL CURSO

Mira cómo funciona el método por dentro

▶ PRESIONA PARA VER EL VIDEO

Lo que aprenderás a hacer en el video

Aprenderás a crear una tarjeta de video de alta conversión para que tus visitantes conozcan tu producto o método por dentro.

Estética profesional: Cómo lograr el balance entre el fondo suave, la tipografía destacada y el botón brillante.
Conexión de tu video: Cómo vincular tu video directamente desde YouTube de forma rápida y sencilla.
Ajuste a tus colores: Cómo hacer que los tonos del botón y los fondos armonicen con la identidad de tu marca.
Aprenderás a construirlo y probarlo paso a paso en el video.
Ejemplo #3

Notificación Flotante de Compras Recientes

Popup en la esquina de la pantalla que muestra compras en tiempo real para generar urgencia y confianza en tu tienda.

Se construirá en el video
Demostración en Vivo para tu Tienda (¡Pruébalo!)
Se dispara automáticamente o al presionar el botón
Pack
Nancy Espinosa acaba de comprar Rejuvenece tu cabello...
$19,990 $35,000
just now © WizzCommerce

Lo que aprenderás a hacer en el video

Aprenderás a tener este potente efecto de prueba social en tu tienda totalmente gratis, sin pagar aplicaciones mensuales.

Instalación en 1 minuto: Verás por qué para este caso basta con pegarlo en un Bloque Liquid directo sin tocar archivos.
Configuración de tiempos: Cómo ajustar cada cuántos segundos aparece y cómo permitir que el visitante lo cierre con la X.
Cero impacto en velocidad: Tu tienda seguirá cargando rapidísimo al no depender de apps externas pesadas.
Aprenderás a construirlo y probarlo paso a paso en el video.
Ejemplo #4

Tarjeta de Historia & Quién está detrás

Tarjeta de presentación con tu foto de perfil, métricas de comunidad, historia de tu marca y etiquetas.

Se construirá en el video
Demostración en Vivo para tu Tienda
QUIÉN TE ENSEÑA · MI HISTORIA

Felipe

COMUNIDAD +205K

Empecé vendiendo alfajores para generar ingresos. Nunca imaginé que se convertiría en esto.

¡Hola! Soy Pipe. En 2020 necesitaba generar ingresos adicionales y se me ocurrió hacer alfajores y salir a venderlos. Me fue tan bien que se convirtió en mi pasión y mi principal actividad.

Ya no era solo un ingreso temporal; era algo que la gente pedía constantemente, que se corría de boca en boca, y que me permitía trabajar desde mi casa en mis propios horarios y bajo mis propias reglas.

Hoy en día, tengo una comunidad de más de 205 mil seguidores entre mis redes sociales (+120k en Instagram y +85k en TikTok) donde comparto tips, experiencias y recetas. Y en este curso quiero enseñarte el paso a paso exacto para que tú puedas lograr lo mismo.

Emprendedor Desde Casa Comunidad +205K

Lo que aprenderás a hacer en el video

Crearás una sección de biografía o historia de tu marca con dos columnas para conectar de forma cercana y humana con tus clientes.

Estructura visual atractiva: Distribución limpia entre tu foto circular, tus números de redes y tu historia.
Cajitas para editar tus textos: Cómo armar el Schema para que puedas cambiar tu biografía y tus fotos con facilidad cuando quieras.
Etiquetas personalizadas: Cómo agregar tus propios badges o sellos distintivos abajo de tu historia.
Aprenderás a construirlo y probarlo paso a paso en el video.