From b53902a1a7754ae81ca8a0d71a9139f0746f8164 Mon Sep 17 00:00:00 2001
From: Stivenjs <stevenjaime164@gmail.com>
Date: Thu, 5 Jun 2025 22:04:38 -0500
Subject: [PATCH] feat(store): add createStoreWithTemplate function to
 initialize store with default template and data

---
 amplify/data/resource.ts                      |  12 +
 .../config/defaultCollections.json            |  30 +++
 .../config/defaultSections.json               | 156 ++++++++++++
 .../config/templateStructure.json             |   5 +
 .../functions/createStoreTemplate/handler.ts  |  76 ++++++
 .../functions/createStoreTemplate/resource.ts |   7 +
 .../services/collectionService.ts             |  46 ++++
 .../services/templateService.ts               |  62 +++++
 .../services/validationService.ts             |  28 +++
 .../createStoreTemplate/types/index.ts        | 145 +++++++++++
 .../utils/templateBuilder.ts                  |  59 +++++
 .../first-steps/hooks/useFirstStepsSetup.ts   |  10 +-
 .../first-steps/hooks/useUserStoreData.ts     |  57 +++++
 template/layout/theme.liquid                  | 139 ++++++++++
 template/sections/collection-list.liquid      | 237 ++++++++++++++++++
 template/sections/featured-products.liquid    | 202 +++++++++++++++
 template/sections/footer.liquid               | 216 ++++++++++++++++
 template/sections/header.liquid               | 131 ++++++++++
 template/sections/hero-banner.liquid          | 113 +++++++++
 19 files changed, 1726 insertions(+), 5 deletions(-)
 create mode 100644 amplify/functions/createStoreTemplate/config/defaultCollections.json
 create mode 100644 amplify/functions/createStoreTemplate/config/defaultSections.json
 create mode 100644 amplify/functions/createStoreTemplate/config/templateStructure.json
 create mode 100644 amplify/functions/createStoreTemplate/handler.ts
 create mode 100644 amplify/functions/createStoreTemplate/resource.ts
 create mode 100644 amplify/functions/createStoreTemplate/services/collectionService.ts
 create mode 100644 amplify/functions/createStoreTemplate/services/templateService.ts
 create mode 100644 amplify/functions/createStoreTemplate/services/validationService.ts
 create mode 100644 amplify/functions/createStoreTemplate/types/index.ts
 create mode 100644 amplify/functions/createStoreTemplate/utils/templateBuilder.ts
 create mode 100644 template/layout/theme.liquid
 create mode 100644 template/sections/collection-list.liquid
 create mode 100644 template/sections/featured-products.liquid
 create mode 100644 template/sections/footer.liquid
 create mode 100644 template/sections/header.liquid
 create mode 100644 template/sections/hero-banner.liquid

diff --git a/amplify/data/resource.ts b/amplify/data/resource.ts
index 6a8a38fd..995acd02 100644
--- a/amplify/data/resource.ts
+++ b/amplify/data/resource.ts
@@ -9,6 +9,7 @@ import { apiKeyManager } from '../functions/LambdaEncryptKeys/resource'
 import { getStoreProducts } from '../functions/getStoreProducts/resource'
 import { getStoreData } from '../functions/getStoreData/resource'
 import { getStoreCollections } from '../functions/getStoreCollections/resource'
+import { createStoreTemplate } from '../functions/createStoreTemplate/resource'
 
 export const MODEL_ID = 'us.anthropic.claude-3-haiku-20240307-v1:0'
 
@@ -62,6 +63,16 @@ const schema = a
       .authorization(allow => [allow.publicApiKey()])
       .handler(a.handler.function(generatePriceSuggestionFunction)),
 
+    initializeStoreTemplate: a
+      .mutation()
+      .arguments({
+        storeId: a.string().required(),
+        domain: a.string().required(),
+      })
+      .returns(a.json())
+      .authorization(allow => [allow.authenticated()])
+      .handler(a.handler.function(createStoreTemplate)),
+
     UserProfile: a
       .model({
         email: a.string(),
@@ -196,6 +207,7 @@ const schema = a
     allow.resource(getStoreProducts),
     allow.resource(getStoreData),
     allow.resource(getStoreCollections),
+    allow.resource(createStoreTemplate),
   ])
 
 export type Schema = ClientSchema<typeof schema>
diff --git a/amplify/functions/createStoreTemplate/config/defaultCollections.json b/amplify/functions/createStoreTemplate/config/defaultCollections.json
new file mode 100644
index 00000000..7281de46
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/config/defaultCollections.json
@@ -0,0 +1,30 @@
+[
+  {
+    "title": "Todos los productos",
+    "description": "Nuestra colección completa de productos disponibles",
+    "slug": "todos-los-productos",
+    "isActive": true,
+    "sortOrder": 1
+  },
+  {
+    "title": "Productos destacados",
+    "description": "Nuestros productos más populares y recomendados",
+    "slug": "productos-destacados",
+    "isActive": true,
+    "sortOrder": 2
+  },
+  {
+    "title": "Ofertas especiales",
+    "description": "Productos con descuentos y ofertas por tiempo limitado",
+    "slug": "ofertas-especiales",
+    "isActive": true,
+    "sortOrder": 3
+  },
+  {
+    "title": "Nuevos productos",
+    "description": "Los últimos productos agregados a nuestra tienda",
+    "slug": "nuevos-productos",
+    "isActive": true,
+    "sortOrder": 4
+  }
+]
diff --git a/amplify/functions/createStoreTemplate/config/defaultSections.json b/amplify/functions/createStoreTemplate/config/defaultSections.json
new file mode 100644
index 00000000..bb5ddf04
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/config/defaultSections.json
@@ -0,0 +1,156 @@
+{
+  "header": {
+    "type": "header",
+    "settings": {
+      "logo": "",
+      "logo_width": 120,
+      "logo_height": 40,
+      "menu_title": "Menú Principal",
+      "show_search": true,
+      "show_cart": true,
+      "show_wishlist": false,
+      "show_account": true,
+      "sticky_header": true,
+      "background_color": "#ffffff",
+      "text_color": "#1f2937",
+      "border_bottom": true,
+      "search_placeholder": "Buscar productos...",
+      "cart_type": "drawer",
+      "menu_items": [
+        { "title": "Inicio", "url": "/", "active": true },
+        { "title": "Productos", "url": "/productos", "active": true },
+        { "title": "Colecciones", "url": "/colecciones", "active": true },
+        { "title": "Sobre nosotros", "url": "/sobre-nosotros", "active": true },
+        { "title": "Contacto", "url": "/contacto", "active": true }
+      ]
+    }
+  },
+
+  "hero": {
+    "type": "hero-banner",
+    "settings": {
+      "heading": "Bienvenido a tu tienda",
+      "heading_size": "large",
+      "subheading": "Descubre nuestros productos increíbles y ofertas especiales",
+      "subheading_size": "medium",
+      "button_text": "Ver productos",
+      "button_link": "/productos",
+      "button_style": "primary",
+      "button_size": "large",
+      "background_image": "",
+      "background_position": "center center",
+      "background_size": "cover",
+      "text_color": "#ffffff",
+      "text_alignment": "center",
+      "overlay_opacity": 50,
+      "overlay_color": "#000000",
+      "height": "large",
+      "content_width": "medium",
+      "enable_parallax": false,
+      "show_scroll_indicator": true
+    }
+  },
+
+  "featured-products": {
+    "type": "featured-products",
+    "settings": {
+      "heading": "Productos destacados",
+      "heading_alignment": "center",
+      "description": "Descubre nuestra selección especial de productos",
+      "products_to_show": 8,
+      "columns_desktop": 4,
+      "columns_tablet": 2,
+      "columns_mobile": 2,
+      "show_price": true,
+      "show_compare_price": true,
+      "show_description": true,
+      "show_vendor": false,
+      "show_rating": true,
+      "show_quick_view": true,
+      "show_add_to_cart": true,
+      "show_wishlist": false,
+      "image_ratio": "square",
+      "enable_slider": false,
+      "autoplay": false,
+      "autoplay_speed": 5000,
+      "show_navigation": true,
+      "show_pagination": true,
+      "card_style": "default",
+      "hover_effect": "zoom",
+      "spacing": "medium"
+    }
+  },
+
+  "collection-list": {
+    "type": "collection-list",
+    "settings": {
+      "heading": "Nuestras colecciones",
+      "heading_alignment": "center",
+      "description": "Explora nuestras diferentes categorías de productos",
+      "collections_to_show": 3,
+      "layout": "grid",
+      "columns_desktop": 3,
+      "columns_tablet": 2,
+      "columns_mobile": 1,
+      "show_image": true,
+      "show_description": true,
+      "show_product_count": true,
+      "image_ratio": "square",
+      "overlay_style": "gradient",
+      "overlay_opacity": 30,
+      "text_position": "center",
+      "button_style": "primary",
+      "hover_effect": "zoom",
+      "enable_slider": false,
+      "autoplay": false,
+      "spacing": "medium"
+    }
+  },
+
+  "footer": {
+    "type": "footer",
+    "settings": {
+      "background_color": "#1f2937",
+      "text_color": "#f9fafb",
+      "heading_color": "#ffffff",
+      "link_color": "#d1d5db",
+      "link_hover_color": "#ffffff",
+      "show_social_links": true,
+      "show_newsletter": true,
+      "show_payment_icons": true,
+      "show_store_info": true,
+      "newsletter_heading": "Suscríbete a nuestro newsletter",
+      "newsletter_description": "Recibe las últimas noticias, ofertas y actualizaciones",
+      "copyright_text": "© 2024 Tu tienda. Todos los derechos reservados.",
+
+      "quick_links": [
+        { "title": "Inicio", "url": "/" },
+        { "title": "Productos", "url": "/productos" },
+        { "title": "Colecciones", "url": "/colecciones" },
+        { "title": "Sobre nosotros", "url": "/sobre-nosotros" },
+        { "title": "Contacto", "url": "/contacto" }
+      ],
+
+      "info_links": [
+        { "title": "Política de privacidad", "url": "/politicas/privacidad" },
+        { "title": "Términos y condiciones", "url": "/politicas/terminos" },
+        { "title": "Política de envíos", "url": "/politicas/envios" },
+        { "title": "Devoluciones", "url": "/politicas/devoluciones" },
+        { "title": "Preguntas frecuentes", "url": "/faq" }
+      ],
+
+      "social_links": [
+        { "platform": "facebook", "url": "", "active": false },
+        { "platform": "instagram", "url": "", "active": false },
+        { "platform": "twitter", "url": "", "active": false },
+        { "platform": "youtube", "url": "", "active": false },
+        { "platform": "tiktok", "url": "", "active": false }
+      ],
+
+      "payment_icons": ["visa", "mastercard", "paypal", "amex"],
+
+      "layout": "four-columns",
+      "show_divider": true
+    }
+  }
+}
diff --git a/amplify/functions/createStoreTemplate/config/templateStructure.json b/amplify/functions/createStoreTemplate/config/templateStructure.json
new file mode 100644
index 00000000..5279641d
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/config/templateStructure.json
@@ -0,0 +1,5 @@
+{
+  "layout": "theme",
+  "sections": {},
+  "order": ["header", "hero", "featured-products", "collection-list", "footer"]
+}
diff --git a/amplify/functions/createStoreTemplate/handler.ts b/amplify/functions/createStoreTemplate/handler.ts
new file mode 100644
index 00000000..777b27f0
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/handler.ts
@@ -0,0 +1,76 @@
+import type { Schema } from '../../data/resource'
+import { Amplify } from 'aws-amplify'
+import { generateClient } from 'aws-amplify/data'
+import { getAmplifyDataClientConfig } from '@aws-amplify/backend/function/runtime'
+import { env } from '$amplify/env/create-store-template'
+import { InitializationResult } from './types/index'
+import { validateInputs } from './services/validationService'
+import { checkExistingTemplate, createStoreTemplate } from './services/templateService'
+import { createDefaultCollections } from './services/collectionService'
+import { buildTemplateData, validateTemplateData } from './utils/templateBuilder'
+
+const { resourceConfig, libraryOptions } = await getAmplifyDataClientConfig(env)
+
+Amplify.configure(resourceConfig, libraryOptions)
+
+const client = generateClient<Schema>()
+
+/**
+ * Handler principal para inicializar templates de tienda
+ */
+export const handler = async (event: any): Promise<InitializationResult> => {
+  try {
+    // Validar y extraer argumentos usando el servicio de validación
+    const { storeId, domain, userId } = validateInputs(event)
+
+    // Ejecutar inicialización
+    return await initializeStoreTemplate(storeId, domain, userId)
+  } catch (error) {
+    console.error('Error in createStoreTemplate handler:', error)
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : 'Unknown error occurred',
+    }
+  }
+}
+
+/**
+ * Inicializa el template y datos por defecto para una tienda
+ */
+async function initializeStoreTemplate(
+  storeId: string,
+  domain: string,
+  owner: string
+): Promise<InitializationResult> {
+  try {
+    // Verificar si ya existe un template usando el servicio
+    const existingCheck = await checkExistingTemplate(client, storeId)
+    if (!existingCheck.canProceed) {
+      return existingCheck.result!
+    }
+
+    // Crear template por defecto usando el builder
+    const templateData = buildTemplateData()
+
+    // Validar que el template generado sea válido
+    if (!validateTemplateData(templateData)) {
+      throw new Error('Generated template data is invalid')
+    }
+
+    const templateResult = await createStoreTemplate(client, storeId, domain, owner, templateData)
+
+    // Crear colecciones por defecto usando el servicio
+    const collectionIds = await createDefaultCollections(client, storeId, owner)
+
+    return {
+      success: true,
+      message: 'Store template initialized successfully',
+      templateId: templateResult.storeId,
+      templateData: templateData,
+      collections: collectionIds,
+    }
+  } catch (error) {
+    console.error('Error initializing store template:', error)
+    throw error
+  }
+}
diff --git a/amplify/functions/createStoreTemplate/resource.ts b/amplify/functions/createStoreTemplate/resource.ts
new file mode 100644
index 00000000..21f1ed3b
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/resource.ts
@@ -0,0 +1,7 @@
+import { defineFunction } from '@aws-amplify/backend'
+
+export const createStoreTemplate = defineFunction({
+  timeoutSeconds: 120,
+  name: 'create-store-template',
+  entry: 'handler.ts',
+})
diff --git a/amplify/functions/createStoreTemplate/services/collectionService.ts b/amplify/functions/createStoreTemplate/services/collectionService.ts
new file mode 100644
index 00000000..c8e5ff66
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/services/collectionService.ts
@@ -0,0 +1,46 @@
+import type { Schema } from '../../../data/resource'
+import { generateClient } from 'aws-amplify/data'
+import { DefaultCollection } from '../types/index'
+import defaultCollections from '../config/defaultCollections.json'
+
+export const createDefaultCollections = async (
+  client: ReturnType<typeof generateClient<Schema>>,
+  storeId: string,
+  owner: string
+): Promise<string[]> => {
+  try {
+    console.log(`Creating default collections for store: ${storeId}`)
+
+    const createdCollectionIds: string[] = []
+
+    // Crear todas las colecciones definidas en defaultCollections
+    for (const collectionConfig of defaultCollections as DefaultCollection[]) {
+      try {
+        const collection = await client.models.Collection.create({
+          storeId: storeId,
+          title: collectionConfig.title,
+          description: collectionConfig.description,
+          slug: collectionConfig.slug,
+          isActive: collectionConfig.isActive,
+          sortOrder: collectionConfig.sortOrder,
+          owner: owner,
+        })
+
+        if (collection.data?.id) {
+          createdCollectionIds.push(collection.data.id)
+          console.log(`Collection created: ${collectionConfig.title} (${collection.data.id})`)
+        }
+      } catch (collectionError) {
+        console.error(`Error creating collection ${collectionConfig.title}:`, collectionError)
+        // Continuamos con las demás colecciones aunque una falle
+      }
+    }
+
+    console.log(`Default collections created successfully. Total: ${createdCollectionIds.length}`)
+    return createdCollectionIds
+  } catch (error) {
+    console.error('Error creating default collections:', error)
+    // Retornamos array vacío en caso de error general
+    return []
+  }
+}
diff --git a/amplify/functions/createStoreTemplate/services/templateService.ts b/amplify/functions/createStoreTemplate/services/templateService.ts
new file mode 100644
index 00000000..5bfde825
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/services/templateService.ts
@@ -0,0 +1,62 @@
+import type { Schema } from '../../../data/resource'
+import { generateClient } from 'aws-amplify/data'
+import { ExistingTemplateCheck, CreateTemplateResult, TemplateData } from '../types/index'
+
+export const checkExistingTemplate = async (
+  client: ReturnType<typeof generateClient<Schema>>,
+  storeId: string
+): Promise<ExistingTemplateCheck> => {
+  try {
+    const existingTemplate = await client.models.StoreTemplate.get({ storeId })
+
+    if (existingTemplate.data) {
+      console.log('Template already exists for this store')
+      return {
+        canProceed: false,
+        result: {
+          success: false,
+          message: 'Template already exists for this store',
+          templateId: existingTemplate.data.storeId,
+        },
+      }
+    }
+
+    return {
+      canProceed: true,
+      result: { success: true, message: 'Can proceed with template creation' },
+    }
+  } catch (error) {
+    console.error('Error checking existing template:', error)
+    throw error
+  }
+}
+
+export const createStoreTemplate = async (
+  client: ReturnType<typeof generateClient<Schema>>,
+  storeId: string,
+  domain: string,
+  owner: string,
+  templateData: TemplateData
+): Promise<CreateTemplateResult> => {
+  try {
+    const storeTemplate = await client.models.StoreTemplate.create({
+      storeId: storeId,
+      domain: domain,
+      templateKey: 'default',
+      templateData: JSON.stringify(templateData),
+      isActive: true,
+      lastUpdated: new Date().toISOString(),
+      owner: owner,
+    })
+
+    if (!storeTemplate.data?.storeId) {
+      throw new Error('Failed to create store template')
+    }
+
+    console.log('StoreTemplate created successfully:', storeTemplate.data.storeId)
+    return { storeId: storeTemplate.data.storeId }
+  } catch (error) {
+    console.error('Error creating store template:', error)
+    throw error
+  }
+}
diff --git a/amplify/functions/createStoreTemplate/services/validationService.ts b/amplify/functions/createStoreTemplate/services/validationService.ts
new file mode 100644
index 00000000..4a667823
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/services/validationService.ts
@@ -0,0 +1,28 @@
+import { ValidationResult } from '../types/index'
+
+export const validateInputs = (event: any): ValidationResult => {
+  if (!event.arguments) {
+    throw new Error('Invalid event format: missing arguments')
+  }
+
+  const { storeId, domain } = event.arguments
+  const userId = event.identity?.sub || event.identity?.claims?.sub
+
+  if (!userId) {
+    throw new Error('User not authenticated')
+  }
+
+  if (!storeId || typeof storeId !== 'string') {
+    throw new Error('Invalid or missing storeId')
+  }
+
+  if (!domain || typeof domain !== 'string') {
+    throw new Error('Invalid or missing domain')
+  }
+
+  return {
+    storeId,
+    domain,
+    userId,
+  }
+}
diff --git a/amplify/functions/createStoreTemplate/types/index.ts b/amplify/functions/createStoreTemplate/types/index.ts
new file mode 100644
index 00000000..fa6a27ae
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/types/index.ts
@@ -0,0 +1,145 @@
+export interface SectionSettings {
+  [key: string]: any
+}
+
+export interface TemplateSection {
+  type: string
+  settings: SectionSettings
+  blocks?: any[]
+}
+
+export interface TemplateData {
+  layout: string
+  sections: Record<string, TemplateSection>
+  order: string[]
+}
+
+export interface DefaultCollection {
+  title: string
+  description: string
+  slug: string
+  isActive: boolean
+  sortOrder: number
+}
+
+export interface InitializationResult {
+  success: boolean
+  message: string
+  templateId?: string
+  templateData?: TemplateData
+  collections?: string[]
+}
+
+export interface ValidationResult {
+  storeId: string
+  domain: string
+  userId: string
+}
+
+export interface ExistingTemplateCheck {
+  canProceed: boolean
+  result: InitializationResult
+}
+
+export interface CreateTemplateResult {
+  storeId: string
+}
+
+// ==================== TIPOS DE CONFIGURACIÓN ====================
+
+export type LayoutType = 'theme' | 'minimal' | 'modern'
+
+export type SectionType =
+  | 'header'
+  | 'hero-banner'
+  | 'featured-products'
+  | 'collection-list'
+  | 'footer'
+  | 'testimonials'
+  | 'newsletter'
+  | 'blog'
+  | 'video'
+  | 'gallery'
+
+export type HeaderCartType = 'drawer' | 'page'
+export type ButtonStyle = 'primary' | 'secondary' | 'outline'
+export type ButtonSize = 'small' | 'medium' | 'large'
+export type TextAlignment = 'left' | 'center' | 'right'
+export type ImageRatio = 'natural' | 'square' | 'portrait' | 'landscape'
+export type HoverEffect = 'none' | 'zoom' | 'fade' | 'slide'
+export type Spacing = 'small' | 'medium' | 'large'
+export type OverlayStyle = 'none' | 'solid' | 'gradient'
+export type FooterLayout = 'three-columns' | 'four-columns' | 'simple'
+
+// ==================== INTERFACES ESPECÍFICAS DE SECCIONES ====================
+
+export interface HeaderSettings extends SectionSettings {
+  logo: string
+  logo_width: number
+  logo_height: number
+  menu_title: string
+  show_search: boolean
+  show_cart: boolean
+  show_wishlist: boolean
+  show_account: boolean
+  sticky_header: boolean
+  background_color: string
+  text_color: string
+  border_bottom: boolean
+  search_placeholder: string
+  cart_type: HeaderCartType
+  menu_items: Array<{
+    title: string
+    url: string
+    active: boolean
+  }>
+}
+
+export interface HeroSettings extends SectionSettings {
+  heading: string
+  heading_size: ButtonSize | 'extra-large'
+  subheading: string
+  subheading_size: ButtonSize
+  button_text: string
+  button_link: string
+  button_style: ButtonStyle
+  button_size: ButtonSize
+  background_image: string
+  background_position: string
+  background_size: string
+  text_color: string
+  text_alignment: TextAlignment
+  overlay_opacity: number
+  overlay_color: string
+  height: ButtonSize | 'full-screen'
+  content_width: ButtonSize | 'full'
+  enable_parallax: boolean
+  show_scroll_indicator: boolean
+}
+
+export interface ProductsSettings extends SectionSettings {
+  heading: string
+  heading_alignment: TextAlignment
+  description: string
+  products_to_show: number
+  columns_desktop: number
+  columns_tablet: number
+  columns_mobile: number
+  show_price: boolean
+  show_compare_price: boolean
+  show_description: boolean
+  show_vendor: boolean
+  show_rating: boolean
+  show_quick_view: boolean
+  show_add_to_cart: boolean
+  show_wishlist: boolean
+  image_ratio: ImageRatio
+  enable_slider: boolean
+  autoplay: boolean
+  autoplay_speed: number
+  show_navigation: boolean
+  show_pagination: boolean
+  card_style: 'default' | 'minimal' | 'detailed'
+  hover_effect: HoverEffect
+  spacing: Spacing
+}
diff --git a/amplify/functions/createStoreTemplate/utils/templateBuilder.ts b/amplify/functions/createStoreTemplate/utils/templateBuilder.ts
new file mode 100644
index 00000000..f81aa6e9
--- /dev/null
+++ b/amplify/functions/createStoreTemplate/utils/templateBuilder.ts
@@ -0,0 +1,59 @@
+import { TemplateData } from '../types/index'
+import defaultSections from '../config/defaultSections.json'
+import templateStructure from '../config/templateStructure.json'
+
+export const buildTemplateData = (): TemplateData => {
+  const templateData: TemplateData = {
+    layout: templateStructure.layout,
+    sections: {},
+    order: templateStructure.order,
+  }
+
+  // Construir cada sección usando los datos del JSON
+  for (const sectionKey of templateStructure.order) {
+    if (defaultSections[sectionKey as keyof typeof defaultSections]) {
+      templateData.sections[sectionKey] =
+        defaultSections[sectionKey as keyof typeof defaultSections]
+    }
+  }
+
+  console.log(
+    'Template data construida con',
+    Object.keys(templateData.sections).length,
+    'secciones'
+  )
+  return templateData
+}
+
+export const validateTemplateData = (templateData: TemplateData): boolean => {
+  // Validaciones básicas
+  if (!templateData.layout || typeof templateData.layout !== 'string') {
+    return false
+  }
+
+  if (!templateData.sections || typeof templateData.sections !== 'object') {
+    return false
+  }
+
+  if (!Array.isArray(templateData.order)) {
+    return false
+  }
+
+  // Validar que todas las secciones en order existan en sections
+  for (const sectionKey of templateData.order) {
+    if (!templateData.sections[sectionKey]) {
+      console.warn(`Sección '${sectionKey}' está en order pero no en sections`)
+      return false
+    }
+  }
+
+  // Validar estructura de cada sección
+  for (const [key, section] of Object.entries(templateData.sections)) {
+    if (!section.type || !section.settings) {
+      console.warn(`Sección '${key}' no tiene la estructura correcta`)
+      return false
+    }
+  }
+
+  return true
+}
diff --git a/app/(setup-layout)/first-steps/hooks/useFirstStepsSetup.ts b/app/(setup-layout)/first-steps/hooks/useFirstStepsSetup.ts
index 26ff2345..df46b914 100644
--- a/app/(setup-layout)/first-steps/hooks/useFirstStepsSetup.ts
+++ b/app/(setup-layout)/first-steps/hooks/useFirstStepsSetup.ts
@@ -38,7 +38,7 @@ export const useFirstStepsSetup = () => {
   const [validationErrors, setValidationErrors] = useState<Record<string, any>>({})
   const [saving, setSaving] = useState(false)
   const { userData } = useAuthUser()
-  const { loading, createUserStore } = useUserStoreData()
+  const { loading, createUserStore, createStoreWithTemplate } = useUserStoreData()
   const { encryptApiKey } = useApiKeyEncryption()
 
   const cognitoUsername =
@@ -129,10 +129,10 @@ export const useFirstStepsSetup = () => {
           onboardingCompleted: true,
         }
 
-        const result = await createUserStore(storeInput)
+        const result = await createStoreWithTemplate(storeInput)
         if (result) {
           setTimeout(() => {
-            window.location.href = routes.store.dashboard.main(result.storeId)
+            window.location.href = routes.store.dashboard.main(result.store.storeId)
           }, 3000)
         } else {
           setSaving(false)
@@ -162,11 +162,11 @@ export const useFirstStepsSetup = () => {
       onboardingCompleted: true,
     }
 
-    const result = await createUserStore(quickStoreInput)
+    const result = await createStoreWithTemplate(quickStoreInput)
 
     if (result) {
       setTimeout(() => {
-        window.location.href = routes.store.dashboard.main(result.storeId)
+        window.location.href = routes.store.dashboard.main(result.store.storeId)
       }, 3000)
     } else {
       setSaving(false)
diff --git a/app/(setup-layout)/first-steps/hooks/useUserStoreData.ts b/app/(setup-layout)/first-steps/hooks/useUserStoreData.ts
index c7585a64..43a06066 100644
--- a/app/(setup-layout)/first-steps/hooks/useUserStoreData.ts
+++ b/app/(setup-layout)/first-steps/hooks/useUserStoreData.ts
@@ -203,6 +203,61 @@ export const useUserStoreData = () => {
     return performOperation(() => client.models.UserStore.delete({ storeId }))
   }
 
+  /**
+   * Inicializa el template y datos por defecto para una nueva tienda.
+   * Crea las secciones por defecto, colecciones base y configuración inicial.
+   */
+  const initializeStoreTemplate = async (storeId: string, domain: string) => {
+    if (!storeId || !domain) {
+      setError('Store ID and domain are required')
+      return null
+    }
+
+    return performOperation(() =>
+      client.mutations.initializeStoreTemplate({
+        storeId,
+        domain,
+      })
+    )
+  }
+
+  /**
+   * Función completa para crear una tienda con todos sus datos iniciales.
+   * Crea la tienda y luego inicializa su template automáticamente.
+   */
+  const createStoreWithTemplate = async (
+    storeInput: Omit<Schema['UserStore']['type'], 'id' | 'createdAt' | 'updatedAt'>
+  ) => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      // Primero crear la tienda
+      const storeResult = await performOperation(() => client.models.UserStore.create(storeInput))
+
+      if (!storeResult) {
+        throw new Error('Failed to create store')
+      }
+
+      // Luego inicializar el template con los datos por defecto
+      const templateResult = await initializeStoreTemplate(
+        storeInput.storeId,
+        storeInput.customDomain || storeInput.storeName
+      )
+
+      return {
+        store: storeResult,
+        template: templateResult,
+        success: true,
+      }
+    } catch (err) {
+      setError(err)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return {
     loading,
     error,
@@ -211,5 +266,7 @@ export const useUserStoreData = () => {
     deleteUserStore,
     getStorePaymentInfo,
     configurePaymentGateway,
+    initializeStoreTemplate,
+    createStoreWithTemplate,
   }
 }
diff --git a/template/layout/theme.liquid b/template/layout/theme.liquid
new file mode 100644
index 00000000..0e6be363
--- /dev/null
+++ b/template/layout/theme.liquid
@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang='es'>
+  <head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <title>
+      {% if page_title %}{{ page_title }} - {% endif %}
+      {{ store.name }}
+    </title>
+    <meta name='description' content='{{ page_description | default: store.description }}'>
+
+    <!-- Tailwind CSS -->
+    <script src='https://cdn.tailwindcss.com' defer></script>
+
+    <!-- Custom CSS -->
+    <style>
+      /* Variables CSS personalizadas */
+      :root {
+        --primary-color: {{ store.primaryColor | default: '#3B82F6' }};
+        --secondary-color: {{ store.secondaryColor | default: '#1F2937' }};
+      }
+
+      .btn-primary {
+        background-color: var(--primary-color);
+        color: white;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+      }
+
+      .btn-primary:hover {
+        opacity: 0.9;
+        transform: translateY(-2px);
+      }
+    </style>
+
+    {{ content_for_header }}
+  </head>
+  <body class='min-h-screen bg-gray-50'>
+    <!-- Contenido principal -->
+    <main id='main-content'>
+      {{ content_for_layout }}
+    </main>
+
+    <!-- Scripts -->
+    <script>
+      // Funcionalidad del carrito
+      window.cart = {
+        items: [],
+        total: 0,
+
+        add: function (product) {
+          this.items.push(product)
+          this.updateTotal()
+          this.updateUI()
+        },
+
+        remove: function (productId) {
+          this.items = this.items.filter(item => item.id !== productId)
+          this.updateTotal()
+          this.updateUI()
+        },
+
+        updateTotal: function () {
+          this.total = this.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+        },
+
+        updateUI: function () {
+          const cartCount = document.getElementById('cart-count')
+          if (cartCount) {
+            cartCount.textContent = this.items.length
+          }
+
+          const cartTotal = document.getElementById('cart-total')
+          if (cartTotal) {
+            cartTotal.textContent = `$${this.total.toFixed(2)}`
+          }
+        },
+      }
+
+      // Funcionalidad de búsqueda
+      window.search = {
+        init: function () {
+          const searchInput = document.getElementById('search-input')
+          const searchResults = document.getElementById('search-results')
+
+          if (searchInput) {
+            searchInput.addEventListener('input', this.handleSearch.bind(this))
+          }
+        },
+
+        handleSearch: function (e) {
+          const query = e.target.value.toLowerCase()
+          if (query.length < 2) return
+
+          // Simular búsqueda (en producción sería una llamada a la API)
+          const results = window.products
+            ? window.products.filter(
+                product =>
+                  product.title.toLowerCase().includes(query) ||
+                  product.description.toLowerCase().includes(query)
+              )
+            : []
+
+          this.displayResults(results)
+        },
+
+        displayResults: function (results) {
+          const searchResults = document.getElementById('search-results')
+          if (!searchResults) return
+
+          if (results.length === 0) {
+            searchResults.innerHTML = '<p class="p-4 text-gray-500">No se encontraron productos</p>'
+            return
+          }
+
+          const resultsHtml = results
+            .map(
+              product => `
+          <div class="p-4 border-b hover:bg-gray-50 cursor-pointer">
+            <h3 class="font-semibold">${product.title}</h3>
+            <p class="text-sm text-gray-600">${product.price}</p>
+          </div>
+        `
+            )
+            .join('')
+
+          searchResults.innerHTML = resultsHtml
+        },
+      }
+
+      // Inicializar funcionalidades
+      document.addEventListener('DOMContentLoaded', function () {
+        window.search.init()
+      })
+    </script>
+  </body>
+</html>
diff --git a/template/sections/collection-list.liquid b/template/sections/collection-list.liquid
new file mode 100644
index 00000000..fe758498
--- /dev/null
+++ b/template/sections/collection-list.liquid
@@ -0,0 +1,237 @@
+<section class='py-16 bg-gray-50'>
+  <div class='container mx-auto px-4'>
+    {% if section.settings.heading %}
+      <div class='text-center mb-12'>
+        <h2 class='text-4xl font-bold text-gray-900 mb-4'>{{ section.settings.heading }}</h2>
+        <div class='w-24 h-1 bg-blue-600 mx-auto'></div>
+      </div>
+    {% endif %}
+
+    {% if section.settings.layout == 'carousel' %}
+      <!-- Layout Carousel -->
+      <div class='relative'>
+        <div id='collections-carousel' class='flex space-x-6 overflow-x-auto pb-4 scrollbar-hide'>
+          {% for collection in collections limit: section.settings.collections_to_show %}
+            <div class='flex-shrink-0 w-80'>
+              {% render 'collection-card', collection: collection, settings: section.settings %}
+            </div>
+          {% endfor %}
+        </div>
+
+        <!-- Controles del carousel -->
+        <button
+          id='carousel-prev'
+          class='absolute left-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-lg hover:shadow-xl transition-shadow'
+        >
+          <svg class='w-6 h-6 text-gray-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <button
+          id='carousel-next'
+          class='absolute right-0 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-lg hover:shadow-xl transition-shadow'
+        >
+          <svg class='w-6 h-6 text-gray-600' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+      </div>
+    {% elsif section.settings.layout == 'list' %}
+      <!-- Layout Lista -->
+      <div class='space-y-8'>
+        {% for collection in collections limit: section.settings.collections_to_show %}
+          <div class='flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300'>
+            {% if section.settings.show_image and collection.image %}
+              <div class='md:w-1/3'>
+                <img
+                  src='{{ collection.image }}'
+                  alt='{{ collection.title }}'
+                  class='w-full h-64 md:h-full object-cover'
+                  width='400'
+                  height='300'
+                >
+              </div>
+            {% endif %}
+
+            <div class='flex-1 p-8'>
+              <h3 class='text-2xl font-bold text-gray-900 mb-4'>{{ collection.title }}</h3>
+
+              {% if section.settings.show_description and collection.description %}
+                <p class='text-gray-600 mb-6'>{{ collection.description }}</p>
+              {% endif %}
+
+              <div class='flex items-center justify-between'>
+                <span class='text-sm text-gray-500'>{{ collection.products.size }} productos</span>
+                <a
+                  href='/colecciones/{{ collection.slug | default: collection.id }}'
+                  class='btn-primary px-6 py-2 rounded-lg font-semibold transition-all hover:transform hover:scale-105'
+                >
+                  Ver colección
+                </a>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <!-- Layout Grid (por defecto) -->
+      <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
+        {% for collection in collections limit: section.settings.collections_to_show %}
+          <div class='bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group'>
+            {% if section.settings.show_image and collection.image %}
+              <div class='relative overflow-hidden'>
+                <img
+                  src='{{ collection.image }}'
+                  alt='{{ collection.title }}'
+                  class='w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300'
+                  width='400'
+                  height='256'
+                >
+                <div
+                  class='absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-30 transition-all duration-300'
+                ></div>
+
+                <!-- Overlay con información -->
+                <div class='absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300'>
+                  <a
+                    href='/colecciones/{{ collection.slug | default: collection.id }}'
+                    class='bg-white text-gray-900 px-6 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors'
+                  >
+                    Ver colección
+                  </a>
+                </div>
+              </div>
+            {% else %}
+              <div class='w-full h-64 bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center'>
+                <h3 class='text-white text-2xl font-bold text-center px-4'>
+                  {{ collection.title }}
+                </h3>
+              </div>
+            {% endif %}
+
+            <div class='p-6'>
+              <h3 class='text-xl font-bold text-gray-900 mb-2'>{{ collection.title }}</h3>
+
+              {% if section.settings.show_description and collection.description %}
+                <p class='text-gray-600 mb-4'>{{ collection.description | truncate: 100 }}</p>
+              {% endif %}
+
+              <div class='flex items-center justify-between'>
+                <span class='text-sm text-gray-500'>{{ collection.products.size }} productos</span>
+                <a
+                  href='/colecciones/{{ collection.slug | default: collection.id }}'
+                  class='text-blue-600 hover:text-blue-800 font-semibold transition-colors'
+                >
+                  Ver más →
+                </a>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    <!-- Botón ver todas las colecciones -->
+    <div class='text-center mt-12'>
+      <a
+        href='/colecciones'
+        class='btn-primary inline-block px-8 py-3 rounded-lg font-semibold text-lg transition-all hover:transform hover:scale-105'
+      >
+        Ver todas las colecciones
+      </a>
+    </div>
+  </div>
+</section>
+
+<script>
+  // Funcionalidad del carousel
+  document.addEventListener('DOMContentLoaded', function () {
+    const carousel = document.getElementById('collections-carousel')
+    const prevButton = document.getElementById('carousel-prev')
+    const nextButton = document.getElementById('carousel-next')
+
+    if (carousel && prevButton && nextButton) {
+      const cardWidth = 320 // 80 * 4 (w-80 = 20rem = 320px)
+
+      prevButton.addEventListener('click', function () {
+        carousel.scrollBy({
+          left: -cardWidth,
+          behavior: 'smooth',
+        })
+      })
+
+      nextButton.addEventListener('click', function () {
+        carousel.scrollBy({
+          left: cardWidth,
+          behavior: 'smooth',
+        })
+      })
+
+      // Ocultar/mostrar botones según posición
+      function updateButtons() {
+        prevButton.style.display = carousel.scrollLeft <= 0 ? 'none' : 'block'
+        nextButton.style.display =
+          carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth ? 'none' : 'block'
+      }
+
+      carousel.addEventListener('scroll', updateButtons)
+      updateButtons()
+    }
+  })
+</script>
+
+<style>
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Lista de Colecciones",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Título de la sección",
+      "default": "Nuestras colecciones"
+    },
+    {
+      "type": "range",
+      "id": "collections_to_show",
+      "label": "Colecciones a mostrar",
+      "min": 2,
+      "max": 20,
+      "step": 1,
+      "default": 3
+    },
+    {
+      "type": "select",
+      "id": "layout",
+      "label": "Diseño",
+      "options": [
+        { "value": "grid", "label": "Cuadrícula" },
+        { "value": "list", "label": "Lista" },
+        { "value": "carousel", "label": "Carrusel" }
+      ],
+      "default": "grid"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_image",
+      "label": "Mostrar imagen",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_description",
+      "label": "Mostrar descripción",
+      "default": true
+    }
+  ]
+}
+{% endschema %}
diff --git a/template/sections/featured-products.liquid b/template/sections/featured-products.liquid
new file mode 100644
index 00000000..427deea8
--- /dev/null
+++ b/template/sections/featured-products.liquid
@@ -0,0 +1,202 @@
+<section class='py-16 bg-white'>
+  <div class='container mx-auto px-4'>
+    {% if section.settings.heading %}
+      <div class='text-center mb-12'>
+        <h2 class='text-4xl font-bold text-gray-900 mb-4'>{{ section.settings.heading }}</h2>
+        <div class='w-24 h-1 bg-blue-600 mx-auto'></div>
+      </div>
+    {% endif %}
+
+    <div class='grid grid-cols-{{ section.settings.columns_mobile }} md:grid-cols-{{ section.settings.columns_desktop }} gap-6'>
+      {% for product in products limit: section.settings.products_to_show %}
+        <div class='bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group'>
+          <!-- Imagen del producto -->
+          <div class='relative overflow-hidden'>
+            {% if product.images and product.images.size > 0 %}
+              <img
+                src='{{ product.images[0].url }}'
+                alt='{{ product.name }}'
+                class='w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300'
+                width='400'
+                height='256'
+              >
+            {% else %}
+              <div class='w-full h-64 bg-gray-200 flex items-center justify-center'>
+                <svg
+                  class='w-16 h-16 text-gray-400'
+                  fill='none'
+                  stroke='currentColor'
+                  viewBox='0 0 24 24'
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              </div>
+            {% endif %}
+
+            <!-- Badge de destacado -->
+            {% if product.featured %}
+              <div class='absolute top-4 left-4 bg-red-500 text-white px-2 py-1 rounded-full text-sm font-semibold'>
+                Destacado
+              </div>
+            {% endif %}
+          </div>
+
+          <!-- Información del producto -->
+          <div class='p-6'>
+            <h3 class='text-xl font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors'>
+              {{ product.name }}
+            </h3>
+
+            {% if section.settings.show_description and product.description %}
+              <p class='text-gray-600 mb-4 line-clamp-2'>
+                {{ product.description | truncate: 100 }}
+              </p>
+            {% endif %}
+
+            {% if section.settings.show_price %}
+              <div class='flex items-center justify-between mb-4'>
+                <div class='flex items-center space-x-2'>
+                  {% if product.compareAtPrice and product.compareAtPrice > product.price %}
+                    <span class='text-lg font-bold text-red-600'>${{ product.price }}</span>
+                    <span class='text-sm text-gray-500 line-through'
+                      >${{ product.compareAtPrice -}}
+                    </span>
+                  {% else %}
+                    <span class='text-lg font-bold text-gray-900'>${{ product.price }}</span>
+                  {% endif %}
+                </div>
+
+                {% if product.quantity and product.quantity <= 5 %}
+                  <span class='text-sm text-orange-600 font-medium'>
+                    ¡Solo {{ product.quantity }} disponibles!
+                  </span>
+                {% endif %}
+              </div>
+            {% endif %}
+
+            <!-- Botones de acción -->
+            <div class='flex space-x-2'>
+              <button
+                class='btn-primary flex-1 py-2 px-4 rounded-lg font-semibold transition-all'
+                onclick="addToCart('{{ product.id }}', '{{ product.name }}', {{ product.price }})"
+              >
+                Agregar al carrito
+              </button>
+              <a
+                href='/productos/{{ product.slug | default: product.id }}'
+                class='border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-lg font-semibold transition-all'
+              >
+                Ver detalles
+              </a>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+
+    <!-- Botón ver todos -->
+    <div class='text-center mt-12'>
+      <a
+        href='/productos'
+        class='btn-primary inline-block px-8 py-3 rounded-lg font-semibold text-lg transition-all hover:transform hover:scale-105'
+      >
+        Ver todos los productos
+      </a>
+    </div>
+  </div>
+</section>
+
+<script>
+  function addToCart(productId, productName, productPrice) {
+    // Agregar producto al carrito
+    const product = {
+      id: productId,
+      name: productName,
+      price: productPrice,
+      quantity: 1,
+    }
+
+    if (window.cart) {
+      window.cart.add(product)
+
+      // Mostrar notificación
+      showNotification(`${productName} agregado al carrito`)
+    }
+  }
+
+  function showNotification(message) {
+    // Crear y mostrar notificación toast
+    const notification = document.createElement('div')
+    notification.className =
+      'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300'
+    notification.textContent = message
+
+    document.body.appendChild(notification)
+
+    // Animar entrada
+    setTimeout(() => {
+      notification.classList.remove('translate-x-full')
+    }, 100)
+
+    // Remover después de 3 segundos
+    setTimeout(() => {
+      notification.classList.add('translate-x-full')
+      setTimeout(() => {
+        document.body.removeChild(notification)
+      }, 300)
+    }, 3000)
+  }
+</script>
+
+{% schema %}
+{
+  "name": "Productos Destacados",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Título de la sección",
+      "default": "Productos destacados"
+    },
+    {
+      "type": "range",
+      "id": "products_to_show",
+      "label": "Productos a mostrar",
+      "min": 2,
+      "max": 50,
+      "step": 1,
+      "default": 8
+    },
+    {
+      "type": "range",
+      "id": "columns_desktop",
+      "label": "Columnas en escritorio",
+      "min": 1,
+      "max": 6,
+      "step": 1,
+      "default": 4
+    },
+    {
+      "type": "range",
+      "id": "columns_mobile",
+      "label": "Columnas en móvil",
+      "min": 1,
+      "max": 3,
+      "step": 1,
+      "default": 2
+    },
+    {
+      "type": "checkbox",
+      "id": "show_price",
+      "label": "Mostrar precio",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_description",
+      "label": "Mostrar descripción",
+      "default": true
+    }
+  ]
+}
+{% endschema %}
diff --git a/template/sections/footer.liquid b/template/sections/footer.liquid
new file mode 100644
index 00000000..573abbb8
--- /dev/null
+++ b/template/sections/footer.liquid
@@ -0,0 +1,216 @@
+<footer class="bg-gray-900 text-white">
+  <div class="container mx-auto px-4 py-12">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+      <!-- Información de la tienda -->
+      <div class="space-y-4">
+        <h3 class="text-xl font-bold mb-4">{{ store.name }}</h3>
+        {% if store.description %}
+          <p class="text-gray-300">{{ store.description | truncate: 120 }}</p>
+        {% endif %}
+        
+        {% if store.contactEmail or store.contactPhone %}
+          <div class="space-y-2">
+            {% if store.contactEmail %}
+              <p class="text-gray-300">
+                <span class="font-semibold">Email:</span> 
+                <a href="mailto:{{ store.contactEmail }}" class="hover:text-blue-400 transition-colors">
+                  {{ store.contactEmail }}
+                </a>
+              </p>
+            {% endif %}
+            {% if store.contactPhone %}
+              <p class="text-gray-300">
+                <span class="font-semibold">Teléfono:</span> 
+                <a href="tel:{{ store.contactPhone }}" class="hover:text-blue-400 transition-colors">
+                  {{ store.contactPhone }}
+                </a>
+              </p>
+            {% endif %}
+          </div>
+        {% endif %}
+      </div>
+      
+      <!-- Enlaces rápidos -->
+      <div>
+        <h3 class="text-lg font-semibold mb-4">Enlaces rápidos</h3>
+        <ul class="space-y-2">
+          <li><a href="/" class="text-gray-300 hover:text-white transition-colors">Inicio</a></li>
+          <li><a href="/productos" class="text-gray-300 hover:text-white transition-colors">Productos</a></li>
+          <li><a href="/colecciones" class="text-gray-300 hover:text-white transition-colors">Colecciones</a></li>
+          <li><a href="/contacto" class="text-gray-300 hover:text-white transition-colors">Contacto</a></li>
+          <li><a href="/sobre-nosotros" class="text-gray-300 hover:text-white transition-colors">Sobre nosotros</a></li>
+        </ul>
+      </div>
+      
+      <!-- Políticas -->
+      <div>
+        <h3 class="text-lg font-semibold mb-4">Información</h3>
+        <ul class="space-y-2">
+          <li><a href="/politicas/privacidad" class="text-gray-300 hover:text-white transition-colors">Política de privacidad</a></li>
+          <li><a href="/politicas/terminos" class="text-gray-300 hover:text-white transition-colors">Términos y condiciones</a></li>
+          <li><a href="/politicas/envios" class="text-gray-300 hover:text-white transition-colors">Política de envíos</a></li>
+          <li><a href="/politicas/devoluciones" class="text-gray-300 hover:text-white transition-colors">Devoluciones</a></li>
+          <li><a href="/faq" class="text-gray-300 hover:text-white transition-colors">Preguntas frecuentes</a></li>
+        </ul>
+      </div>
+      
+      <!-- Newsletter y redes sociales -->
+      <div>
+        {% if section.settings.show_newsletter %}
+          <h3 class="text-lg font-semibold mb-4">{{ section.settings.newsletter_heading }}</h3>
+          <form id="newsletter-form" class="mb-6">
+            <div class="flex">
+              <input 
+                type="email" 
+                id="newsletter-email"
+                placeholder="Tu email" 
+                class="flex-1 px-4 py-2 rounded-l-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              >
+              <button 
+                type="submit"
+                class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg font-semibold transition-colors"
+              >
+                Suscribirse
+              </button>
+            </div>
+          </form>
+        {% endif %}
+        
+        {% if section.settings.show_social_links %}
+          <h4 class="text-lg font-semibold mb-4">Síguenos</h4>
+          <div class="flex space-x-4">
+            <a href="#" class="text-gray-300 hover:text-blue-500 transition-colors">
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+              </svg>
+            </a>
+            <a href="#" class="text-gray-300 hover:text-pink-500 transition-colors">
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.621 5.367 11.988 11.988 11.988s11.987-5.367 11.987-11.988C24.004 5.367 18.637.001 12.017.001zm5.524 15.31c-.292 1.447-1.717 2.55-3.19 2.55-1.417 0-2.573-.95-2.982-2.235l-2.233-7.016c-.41-1.285.565-2.235 1.982-2.235 1.473 0 2.898 1.103 3.19 2.55l2.233 7.386z"/>
+              </svg>
+            </a>
+            <a href="#" class="text-gray-300 hover:text-blue-400 transition-colors">
+              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
+              </svg>
+            </a>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+    
+    <!-- Línea divisoria -->
+    <div class="border-t border-gray-700 mt-8 pt-8">
+      <div class="flex flex-col md:flex-row justify-between items-center">
+        <!-- Copyright -->
+        <p class="text-gray-400 text-sm mb-4 md:mb-0">
+          {{ section.settings.copyright_text }}
+        </p>
+        
+        <!-- Métodos de pago -->
+        {% if section.settings.payment_icons %}
+          <div class="flex space-x-4">
+            <span class="text-gray-400 text-sm">Aceptamos:</span>
+            <div class="flex space-x-2">
+              <div class="w-8 h-5 bg-blue-600 rounded text-white text-xs flex items-center justify-center font-bold">VISA</div>
+              <div class="w-8 h-5 bg-red-500 rounded text-white text-xs flex items-center justify-center font-bold">MC</div>
+              <div class="w-8 h-5 bg-blue-500 rounded text-white text-xs flex items-center justify-center font-bold">PP</div>
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</footer>
+
+<script>
+  // Funcionalidad del newsletter
+  document.getElementById('newsletter-form')?.addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    const email = document.getElementById('newsletter-email').value;
+    if (!email) return;
+    
+    // Aquí se haría la llamada a la API para suscribir al newsletter
+    fetch('/api/newsletter/subscribe', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ email }),
+    })
+    .then(response => response.json())
+    .then(data => {
+      if (data.success) {
+        showNotification('¡Te has suscrito exitosamente al newsletter!');
+        document.getElementById('newsletter-email').value = '';
+      } else {
+        showNotification('Error al suscribirse. Inténtalo de nuevo.', 'error');
+      }
+    })
+    .catch(error => {
+      console.error('Error:', error);
+      showNotification('Error al suscribirse. Inténtalo de nuevo.', 'error');
+    });
+  });
+  
+  function showNotification(message, type = 'success') {
+    const notification = document.createElement('div');
+    const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
+    
+    notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+      notification.classList.remove('translate-x-full');
+    }, 100);
+    
+    setTimeout(() => {
+      notification.classList.add('translate-x-full');
+      setTimeout(() => {
+        document.body.removeChild(notification);
+      }, 300);
+    }, 3000);
+  }
+</script>
+
+{% schema %}
+{
+  "name": "Pie de página",
+  "settings": [
+    {
+      "type": "checkbox",
+      "id": "show_social_links",
+      "label": "Mostrar enlaces sociales",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_newsletter",
+      "label": "Mostrar newsletter",
+      "default": true
+    },
+    {
+      "type": "text",
+      "id": "newsletter_heading",
+      "label": "Título del newsletter",
+      "default": "Suscríbete a nuestro newsletter"
+    },
+    {
+      "type": "text",
+      "id": "copyright_text",
+      "label": "Texto de copyright",
+      "default": "© 2024 Tu tienda. Todos los derechos reservados."
+    },
+    {
+      "type": "checkbox",
+      "id": "payment_icons",
+      "label": "Mostrar iconos de pago",
+      "default": true
+    }
+  ]
+}
+{% endschema %} 
\ No newline at end of file
diff --git a/template/sections/header.liquid b/template/sections/header.liquid
new file mode 100644
index 00000000..1d5f0f2c
--- /dev/null
+++ b/template/sections/header.liquid
@@ -0,0 +1,131 @@
+<header class='bg-white shadow-md sticky top-0 z-50'>
+  <div class='container mx-auto px-4 py-4'>
+    <div class='flex items-center justify-between'>
+      <!-- Logo -->
+      <div class='flex items-center'>
+        {% if section.settings.logo %}
+          <img
+            src='{{ section.settings.logo }}'
+            alt='{{ store.name }}'
+            class='h-10 w-auto'
+            width='120'
+            height='40'
+          >
+        {% else %}
+          <h1 class='text-2xl font-bold text-gray-900'>{{ store.name }}</h1>
+        {% endif %}
+      </div>
+
+      <!-- Navegación principal (desktop) -->
+      <nav class='hidden md:flex space-x-8'>
+        <a href='/' class='text-gray-700 hover:text-blue-600 font-medium'>Inicio</a>
+        <a href='/productos' class='text-gray-700 hover:text-blue-600 font-medium'>Productos</a>
+        <a href='/colecciones' class='text-gray-700 hover:text-blue-600 font-medium'>Colecciones</a>
+        <a href='/contacto' class='text-gray-700 hover:text-blue-600 font-medium'>Contacto</a>
+      </nav>
+
+      <!-- Acciones (búsqueda, carrito, etc.) -->
+      <div class='flex items-center space-x-4'>
+        <!-- Búsqueda -->
+        {% if section.settings.show_search %}
+          <div class='relative'>
+            <input
+              type='text'
+              id='search-input'
+              placeholder='Buscar productos...'
+              class='hidden md:block w-64 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+            >
+            <div
+              id='search-results'
+              class='absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-1 hidden'
+            ></div>
+          </div>
+        {% endif %}
+
+        <!-- Carrito -->
+        {% if section.settings.show_cart %}
+          <button class='relative p-2 text-gray-700 hover:text-blue-600'>
+            <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m4.5-5a2 2 0 11-4 0 2 2 0 014 0zM17 13a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            <span
+              id='cart-count'
+              class='absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center'
+              >0</span
+            >
+          </button>
+        {% endif %}
+
+        <!-- Menú móvil -->
+        <button id='mobile-menu-button' class='md:hidden p-2 text-gray-700'>
+          <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Navegación móvil -->
+    <nav id='mobile-menu' class='md:hidden mt-4 hidden'>
+      <div class='flex flex-col space-y-2'>
+        <a href='/' class='text-gray-700 hover:text-blue-600 font-medium py-2'>Inicio</a>
+        <a href='/productos' class='text-gray-700 hover:text-blue-600 font-medium py-2'
+          >Productos</a
+        >
+        <a href='/colecciones' class='text-gray-700 hover:text-blue-600 font-medium py-2'
+          >Colecciones</a
+        >
+        <a href='/contacto' class='text-gray-700 hover:text-blue-600 font-medium py-2'>Contacto</a>
+
+        {% if section.settings.show_search %}
+          <div class='pt-2'>
+            <input
+              type='text'
+              placeholder='Buscar productos...'
+              class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+            >
+          </div>
+        {% endif %}
+      </div>
+    </nav>
+  </div>
+</header>
+
+<script>
+  // Toggle menú móvil
+  document.getElementById('mobile-menu-button').addEventListener('click', function () {
+    const mobileMenu = document.getElementById('mobile-menu')
+    mobileMenu.classList.toggle('hidden')
+  })
+</script>
+
+{% schema %}
+{
+  "name": "Cabecera",
+  "settings": [
+    {
+      "type": "image_picker",
+      "id": "logo",
+      "label": "Logo de la tienda"
+    },
+    {
+      "type": "text",
+      "id": "menu_title",
+      "label": "Título del menú",
+      "default": "Menú Principal"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_search",
+      "label": "Mostrar búsqueda",
+      "default": true
+    },
+    {
+      "type": "checkbox",
+      "id": "show_cart",
+      "label": "Mostrar carrito",
+      "default": true
+    }
+  ]
+}
+{% endschema %}
diff --git a/template/sections/hero-banner.liquid b/template/sections/hero-banner.liquid
new file mode 100644
index 00000000..e2d598bf
--- /dev/null
+++ b/template/sections/hero-banner.liquid
@@ -0,0 +1,113 @@
+<section class='relative bg-gray-900 text-white'>
+  <!-- Imagen de fondo -->
+  {% if section.settings.background_image %}
+    <div class='absolute inset-0 z-0'>
+      <img
+        src='{{ section.settings.background_image }}'
+        alt='Banner principal'
+        class='w-full h-full object-cover'
+        width='1920'
+        height='800'
+      >
+      <div class='absolute inset-0 bg-black opacity-{{ section.settings.overlay_opacity }}'></div>
+    </div>
+  {% endif %}
+
+  <!-- Contenido -->
+  <div class='relative z-10 container mx-auto px-4 py-32'>
+    <div class='max-w-4xl mx-auto text-center'>
+      <h1
+        class='text-5xl md:text-7xl font-bold mb-6'
+        style='color: {{ section.settings.text_color }}'
+      >
+        {{ section.settings.heading }}
+      </h1>
+
+      {% if section.settings.subheading %}
+        <p
+          class='text-xl md:text-2xl mb-8 opacity-90'
+          style='color: {{ section.settings.text_color }}'
+        >
+          {{ section.settings.subheading }}
+        </p>
+      {% endif %}
+
+      {% if section.settings.button_text and section.settings.button_link %}
+        <a
+          href='{{ section.settings.button_link }}'
+          class='btn-primary inline-block text-lg px-8 py-4 rounded-lg font-semibold transition-all duration-300 hover:transform hover:scale-105'
+        >
+          {{ section.settings.button_text }}
+        </a>
+      {% endif %}
+    </div>
+  </div>
+
+  <!-- Indicador de scroll -->
+  <div class='absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10'>
+    <div class='animate-bounce'>
+      <svg
+        class='w-6 h-6'
+        style='color: {{ section.settings.text_color }}'
+        fill='none'
+        stroke='currentColor'
+        viewBox='0 0 24 24'
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+      </svg>
+    </div>
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Banner Principal",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Encabezado",
+      "default": "Bienvenido a tu tienda"
+    },
+    {
+      "type": "textarea",
+      "id": "subheading",
+      "label": "Subtítulo",
+      "default": "Descubre nuestros productos increíbles"
+    },
+    {
+      "type": "text",
+      "id": "button_text",
+      "label": "Texto del botón",
+      "default": "Ver productos"
+    },
+    {
+      "type": "url",
+      "id": "button_link",
+      "label": "Enlace del botón",
+      "default": "/products"
+    },
+    {
+      "type": "image_picker",
+      "id": "background_image",
+      "label": "Imagen de fondo"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Color del texto",
+      "default": "#ffffff"
+    },
+    {
+      "type": "range",
+      "id": "overlay_opacity",
+      "label": "Opacidad del overlay",
+      "min": 0,
+      "max": 100,
+      "step": 10,
+      "default": 50,
+      "unit": "%"
+    }
+  ]
+}
+{% endschema %}