Saltar al contenido principal

Crear un tema desde cero

Esta guía te muestra cómo crear un tema completo para OmniBuy, desde la estructura básica hasta un tema funcional con secciones personalizadas.

Prerrequisitos​

  • Acceso al panel admin de OmniBuy
  • Conocimiento de HTML, CSS y Go templates (o Liquid)
  • Un editor de código (VS Code, etc.)

Paso 1: Crear la estructura básica​

Crea el directorio del tema en themes/<nombre-tema>/:

themes/mi-tema/
├── theme.json
├── config/
│   ├── settings_schema.json
│   └── settings_data.json
├── sections/
├── snippets/
├── templates/
│   └── index.html
├── locales/
│   ├── es.json
│   └── en.json
└── assets/
    ├── theme.css
    └── theme.js

Paso 2: Crear theme.json​

El manifest declara qué ofrece tu tema:

{
  "name": "Mi Tema",
  "industry": "general",
  "sections": [
    "banner",
    "rich_text",
    "image_gallery",
    "newsletter"
  ],
  "addons": [
    { "id": "reviews", "enabled_by_default": true }
  ],
  "templates": ["index", "product", "collection", "cart", "page"]
}

Solo declarea las secciones que implementas. Las que no declares no aparecerán en el visual editor.

Paso 3: Crear el template de homepage​

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="{{ .Lang }}">
<head>
  {{ template "snippets/head" . }}
  <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
</head>
<body>
  {{ template "snippets/section" (dict "ctx" . "id" "header") }}

  <main>
    {{ range .SectionOrder }}
      {{ template "snippets/section" (dict "ctx" $ "id" .) }}
    {{ end }}
  </main>

  {{ template "snippets/section" (dict "ctx" . "id" "footer") }}
  <script src="{{ 'theme.js' | asset_url }}"></script>
</body>
</html>

Paso 4: Crear una sección personalizada​

Crea sections/promo-banner.html:

{{ define "sections/promo-banner" }}
<section class="promo-banner" style="background-color: {{ .section.bg_color | default: "#6366F1" }}">
  <div class="container">
    <h2>{{ .section.title }}</h2>
    <p>{{ .section.subtitle }}</p>
    {{ if .section.cta_text }}
      <a href="{{ .section.cta_url }}" class="promo-cta">
        {{ .section.cta_text }}
      </a>
    {{ end }}
  </div>
</section>
{{ end }}

Agréalo al theme.json en sections:

"sections": ["promo-banner", "banner", "rich_text"]

Y registra su schema en AvailableSections() en admin/handlers/themes.go con sus FieldSchema.

Paso 5: Configuración global​

Define los settings del tema en config/settings_schema.json:

{
  "settings": [
    { "key": "font_heading", "type": "text", "label": "Fuente de títulos", "default": "Inter" },
    { "key": "font_body", "type": "text", "label": "Fuente del cuerpo", "default": "Inter" },
    { "key": "accent_color", "type": "color", "label": "Color primario", "default": "#6366F1" }
  ]
}

Y los valores por defecto en config/settings_data.json:

{
  "current": {
    "font_heading": "Inter",
    "font_body": "Inter",
    "accent_color": "#6366F1"
  }
}

Paso 6: Locales (i18n)​

// locales/es.json
{
  "sections.promo-banner.title": "Oferta especial",
  "sections.promo-banner.cta": "Comprar ahora",
  "sections.promo-banner.subtitle": "Solo por tiempo limitado"
}

Úsalos en templates:

{{ t .Lang "sections.promo-banner.title" }}

Paso 7: Probar y publicar​

  1. Abre el Theme Editor visual
  2. Selecciona tu tema
  3. Verifica que las secciones aparezcan en el catálogo
  4. Agrega y configura secciones en el preview
  5. Publica cuando esté listo

Herencia de _base y dawn​

Tu tema no necesita implementar header, hero, footer ni snippets básicos. Los hereda de las capas inferiores:

  • header.html — 25+ variantes de header
  • hero.html — 10 variantes de hero
  • product-card.html, breadcrumb.html, etc.

Solo implementa los archivos que cambian. El overlay de 4 capas se encarga del resto.

Siguientes pasos​