Ejecuta tu tienda Shopify en local

En este tutorial, aprenderás a ejecutar 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

Las marcas más grandes confían en nosotros.

Con más de 10 años, 20 expertos, y 200 clientes de más de 10 diferentes sectores, resolvemos la desconexión entre marcas y la experiencia premium.