Guía práctica

Primeros pasos con Shopify

Desde cero hasta tu primer tema publicado. Sigue esta guía paso a paso.

Requisitos

Antes de empezar

🤝

Cuenta de Partner

Regístrate gratis en partners.shopify.com. Te da acceso a Development Stores ilimitadas sin coste.

💻

Entorno de desarrollo

Node.js 18+, npm y Git. El Shopify CLI se instala con npm o Homebrew en macOS.

📝

Editor de código

VS Code con la extensión Shopify Liquid para syntax highlighting y autocompletado.

Paso a paso

Tu primer tema con Dawn

1

Crear una Development Store

En tu dashboard de Partner, ve a Stores → Add store → Development store. Es completamente gratuita.

2

Instalar Shopify CLI

Instala el CLI con npm:

npm install -g @shopify/cli @shopify/theme
3

Autenticarse

Conecta el CLI con tu tienda:

shopify auth login --store=tu-tienda.myshopify.com
4

Clonar Dawn

Dawn es el tema base oficial de Shopify, open source:

shopify theme init mi-primer-tema
cd mi-primer-tema
5

Servidor de desarrollo

Inicia el servidor local con hot reload:

shopify theme dev --store=tu-tienda.myshopify.com
6

Editar tu primer archivo

Abre sections/header.liquid y modifica algo. Guarda y verás el cambio al instante.

7

Explorar el Theme Editor

En el admin ve a Tienda online → Temas → tu tema → Personalizar para editar visualmente.

8

Publicar el tema

Cuando estés listo:

shopify theme push --store=tu-tienda.myshopify.com
Tips desde la BD

Consejos para desarrolladores

🗂️

Usa Git desde el principio

Inicia un repo Git en tu tema desde el día uno. El CLI no versiona: Git sí.

🧪

Aprende Liquid gradualmente

Empieza con variables y filtros. Añade lógica cuando realmente la necesites.

📐

Respeta la estructura Dawn

Dawn está muy bien organizado. Aprende su patrón antes de crear tu propia estructura.

🔍

Theme Check es tu amigo

Corre shopify theme check regularmente. Detecta errores de Liquid y rendimiento.

📱

Mobile first siempre

Más del 70% del tráfico en Shopify es móvil. Diseña para móvil primero.

⚡

Cuidado con el JavaScript

Menos JS = mejores conversiones. Dawn usa módulos ES y muy poco JavaScript.

📋

Documenta tu schema

Los schemas bien documentados facilitan la vida al cliente en el Theme Editor.

🌍

Prepara i18n desde el inicio

Usa {{ 'key' | t }} y locales/es.json para que el tema sea multilingüe desde el inicio.