Ir al contenido 
En este tutorial, aprenderás a ejecuta tu tienda Shopify en local y configurar Shopify CLI en tu máquina local para trabajar con tu tienda Shopify de manera eficiente.
📈 Ventajas
- ✅ Trabaja con tu editor favorito en lugar del editor web de Shopify.
- ✅ Realiza pruebas y cambios en un entorno seguro antes de subirlos a producción.
📉 Desventajas
- ⚠️ La sincronización con la tienda en producción se realiza mediante Git, lo que puede ser un desafío si no estás familiarizado con su uso.
🏗️ Instalación de Node.js
Shopify CLI requiere un entorno de ejecución de JavaScript. Para verificar si ya tienes Node.js instalado, ejecuta:
node --version
Si no muestra un número de versión, necesitarás instalarlo. A continuación, te explicamos cómo hacerlo según tu sistema operativo:
🔹 Windows
- Ve a la página oficial de Node.js.
- Descarga el instalador `.exe`.
- Sigue las instrucciones del asistente de instalación.
- Verifica la instalación con
node --version.
🍏 macOS
Tienes dos métodos para instalar Node.js:
Método 1: Instalación desde la web
- Descarga el paquete `.pkg` desde la página oficial de Node.js.
- Instálalo y verifica la instalación con
node --version.
Método 2: Instalación con Homebrew
Si prefieres gestionar Node.js con Homebrew, primero verifica si Homebrew está instalado:
brew --version
Si no lo tienes, instálalo con:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Luego, instala Node.js con:
brew install node
🐧 Linux
Tienes dos opciones recomendadas para instalar Node.js:
- Usar el gestor de paquetes de tu distribución (
apt,yum,dnf, etc.). - Usar NVM (Node Version Manager), lo que permite instalar y cambiar versiones fácilmente.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
Después, instala Node.js con:
nvm install node
🛠️ Instalación de Git
Verifica si Git está instalado ejecutando:
git --version
Si no lo tienes, sigue la guía oficial de instalación de Git.
🚀 Instalación de Shopify CLI
Instala Shopify CLI globalmente con npm:
npm install -g @shopify/cli@latest
Verifica que la instalación fue exitosa con:
shopify --version
📥 Clonar tu repositorio de Shopify
Dirígete a la carpeta donde deseas alojar tu tienda y clona el repositorio de Git:
git clone https://github.com/<usuario>/<repositorio>.git
🖥️ Ejecutar la tienda en local
Una vez clonado el repositorio, accede a su carpeta y ejecuta el servidor local con:
cd <repositorio> shopify theme dev --store=<nombretienda.myshopify.com>
Esto abrirá una ventana en el navegador pidiendo iniciar sesión con tu cuenta de Shopify.
Recuerda reemplazar <repositorio> con el nombre de tu carpeta y <nombretienda> con tu dominio de Shopify.
Para detener el servidor, usa:
Ctrl + C
🎁 Bonus Track: Recomendaciones para trabajar en local
1️⃣ Instalar la extensión de VSCode para Shopify
Instala la extensión de Shopify para VSCode para obtener autocompletado, sugerencias y formato de código. Descargar aquí.
2️⃣ Formatear código con Prettier
Si usas VSCode, puedes formatear tu código con ⇧⌥F en Mac o Shift+Alt+F en Windows. Para configurarlo manualmente, instala Prettier:
npm install --save-dev prettier @shopify/prettier-plugin-liquid
📂 Estructura recomendada del proyecto
|- .git
|- .gitignore
|- .shopify/
|- .prettierrc <-- Configuración de Prettier
|- .shopifyignore
|- node_modules/
|- assets/
|- layout/
|- snippets/
|- config/
|- locales/
|- sections/
|- templates/
|- package.json
|- package-lock.json
