Instalación y desarrollo local — Documentación de kingsbell

Documentación de kingsbell

Página 2 de 9

Kingsbell utiliza Shopify CLI para desarrollo, validación, vista previa remota y empaquetado. Trabaja en una tienda de desarrollo dedicada, no sobre una tienda activa.

Instalar requisitos

bash

node --version
npm install --global @shopify/cli @shopify/theme
shopify version
git clone https://github.com/rokadhq/kingsbell.git
cd kingsbell

Se requiere Node.js 20 o posterior. Los scripts de package.json envuelven los comandos de Shopify CLI.

Conectar una tienda de desarrollo

bash

npm run dev -- --store tu-tienda.myshopify.com

Shopify CLI solicitará autenticación cuando sea necesario y creará o reutilizará un tema de desarrollo. Mantén separadas las tiendas de desarrollo, staging y producción.

shopify.theme.toml.example contiene valores de ejemplo sin secretos. Nunca confirmes contraseñas, tokens, cookies, datos de clientes ni credenciales de aplicaciones.

Comandos principales

bash

npm run dev -- --store tu-tienda.myshopify.com
npm run check
npm run package

Comando	Función
`npm run dev`	Inicia la vista previa y sincroniza cambios.
`npm run check`	Ejecuta Theme Check.
`npm run package`	Genera un ZIP instalable de Shopify.

Flujo de desarrollo

Crea una rama para cada cambio.
Ejecuta npm run check antes de comenzar.
Previsualiza la sección o plantilla modificada.
Guarda y vuelve a cargar el editor de temas.
Prueba escritorio, móvil y navegación solo con teclado.
Comprueba estados vacíos, de error, agotados, en oferta y con muchas variantes.
Ejecuta Theme Check antes de confirmar cambios.

Límite del runtime

El código del escaparate pertenece únicamente a:

text

assets/
blocks/
config/
layout/
locales/
sections/
snippets/
templates/

.design, documentos de QA, scripts y contratos de la aplicación complementaria no forman parte del runtime. .shopifyignore los excluye de las operaciones de Shopify CLI.

Secciones y plantillas

Al añadir una sección:

incluye un esquema JSON válido;
proporciona valores predeterminados útiles;
usa rutas, formularios, assets e imágenes nativos de Shopify;
conserva el orden semántico y el foco por teclado;
evita scripts externos bloqueantes;
respeta la preferencia de movimiento reducido.

Al añadir una plantilla JSON:

referencia tipos de sección existentes;
define el orden explícitamente;
evita contenedores vacíos;
verifica que pueda abrirse y guardarse en el editor.

Assets y JavaScript

Usa imágenes y vídeos alojados por Shopify. Proporciona texto alternativo, tamaños responsive y recortes adecuados.

El JavaScript debe ser progresivo, diferido cuando sea posible y compatible con recargas de secciones en el editor. Evita listeners duplicados y conserva un estado útil sin JavaScript.

Theme Check se aplica con severidad estricta en CI. La auditoría adicional valida JSON, esquemas, referencias de secciones, riesgos de accesibilidad, enlaces inseguros, rutas codificadas y presupuestos de CSS y JavaScript.

bash

npm run check
npm run package

El flujo de Phase 8 genera Kingsbell-0.8.0.zip. Instala exactamente ese paquete en una tienda limpia antes de aprobarlo.

El empaquetado demuestra que Shopify puede ensamblar el tema; no demuestra que los flujos comerciales, cuentas, B2B, accesibilidad o rendimiento sean correctos.