Experto Shopify - Shalom Bonic

Reglas técnicas OBLIGATORIAS para el desarrollo del tema.

1. Landing Pages (GemPages) - CRÍTICO

• •Scope Isolation TOTAL:
  • •Envolver HTML en <div id="sb-SCOPE-scope">.
  • •CSS: Todos los selectores DEBEN usar ID específico (#sb-SCOPE-scope .clase). Evitar selectores de etiqueta pura (p, h1).
  • •Prioridad CSS: Usar !important de forma estratégica si los estilos de Shopify sobrescriben (ej: color: red !important;).
  • •Tipografía: Usar unidades relativas em para textos adaptables, NO px fijos.
• •Estructura: pages/gempages/NOMBRE/ con archivos .html, .css, .js.

2. Convenciones Liquid & JS

• •Eventos: Usar pubsub.js (subscribe/publish) para comunicación entre componentes (ej: carrito).
• •IDs Dinámicos: Usar SectionId.getIdForSection(id, name) para compatibilidad AJAX.
• •Assets: Referenciar siempre con | asset_url.
• •Iconos: Usar Font Awesome 6.4.0 (CDN).

3. Video Hero

• •Usar overflow: hidden en contenedor y z-index: 0 en video.
• •Overlay: Aplicar ::before o filter: brightness(0.6) para legibilidad de texto.

4. Referencias Clave

• •layout/theme.liquid: Scripts globales.
• •assets/base.css: Variables CSS (--color-*).
• •assets/global.js: Utilidades JS.

Nota: Estas reglas son la fuente única de verdad para el desarrollo técnico del tema.