¿Cómo trabajar sobre un tema en producción desde un editor local?

Cuando trabajamos es importante sentirnos cómodos con nuestro entorno y materiales de trabajo.

Hay un amplio espectro que podemos tener en cuenta como la temperatura, el orden, una silla cómoda, un buen ordenador e incluso los programas que son necesarios para llevar a cabo nuestras labores...

✅ Y en cuestiones más técnicas, podemos editar el código de nuestra tienda a través del editor de temas de Shopify, que lo podemos encontrar dentro de la tienda online.

En cambio, en este artículo te explicaré como utilizar tu editor de texto favorito para desarrollar tus temas y poder trabajar de una manera más cómoda.

¿Es posible desarrollar themes con un 'simple' editor de textos?

Claro que sí. Para ello lo que haremos es ver como instalar y usar Theme kit que es la herramienta que nos permite trabajar con Shopify mientras utilizas la configuración que más te gusta de tu editor.

Tutorial: cómo desarrollar y editar el tema de tu ecommerce usando un editor de texto

Te dejo un vídeo explicativo donde veremos esta configuración a través de un video completo paso a paso.

Paso 1. Instalar Theme Kit

Theme Kit es una herramienta de comandos multiplataforma para crear temas en Shopify. Ha sido creada y es mantenida por el equipo de Shopify.

El uso de Theme Kit te permitirá:

Puedes hacer la instalación de 3 maneras diferentes:

1. Descargándote el paquete zip e instalándolo de manualmente.
2. Siguiendo los pasos de instalación que proporciona para cada sistema operativo la web de Theme Kit.
3. De manera global si trabajas en Linux o Mac mediante el siguiente comando:

Es interesante tener siempre la versión más actualizada de Theme Kit, ya que van añadiendo nuevas funcionalidades. En la última actualización te dicen los ficheros que tienes, los que se han actualizado y eliminado manera visual.

Para actualizar el comando que tienes que utilizar es theme update y le puedes añadir el parámetro de —-version=v1.1.1 para cambiar a una versión anterior.

Aquí puedes ver cuál es la última versión disponible:

Paso 2. Configurar las credenciales para trabajar con tu tienda online

Una vez tenemos Theme Kit instalado, necesitamos conectar nuestro editor local con una tienda de Shopify.

Vamos a empezaremos creando una aplicación privada de la que obtendremos la API key y la contraseña.

Con la aplicación privada haremos la conexión entre nuestra tienda y el Theme Kit que hemos instalado, esto nos permitirá subir y bajar los ficheros de nuestro tema de una manera ágil.

1. Activar el desarrollo de aplicaciones privadas. En el administrador de Shopify, ve a "Aplicaciones", luego a "Administrar aplicaciones privadas" y habilita el desarrollo de aplicaciones privadas.
   
   
2. Crear la aplicación privada. Debes crear una nueva aplicación privada con un título, un email de contacto y darle permisos de lectura y escritura para "Ver o gestionar plantillas de temas y recursos".
   
   
   
   
3. Guardar para obtener la clave y la contraseña de la API. Shopify cargará una nueva página con una clave API y una contraseña únicas.
   
   
   
   
4. Identificador del tema. Necesitamos conectarnos a un tema existente y para ello tenemos el identificador del tema, que lo podemos encontrar desde el Editor de temas.
   
   
   
   

Paso 3. Fichero de configuración y trabajar en local

Ahora podemos usar toda la información anterior para crear nuestro archivo config.yml en nuestro entorno local y luego descargaremos nuestro tema completo.

El config.yml es vital porque es el archivo que crea la conexión local con el tema de tu tienda Shopify.

Empieza creando un directorio para el tema:

Luego, accede al directorio usando el comando cd:

Para descargar un tema específico y crear el archivo config.yml en el directorio que acaba de crear, hay que ejecutar el siguiente comando desde el directorio, con la información recopilada en el punto 2:

Por ejemplo:

Esto creará automáticamente un archivo config.yml y descargará el tema de la tienda en base al identificador del tema que hayamos puesto. También lo puedes crear manualmente el archivo config.yml en el directorio con tu editor de texto favorito, y se verá así:

Creando un tema desde cero

Si quieres crear un tema desde cero, puedes hacerlo ejecutando el siguiente comando:

Esto nos crea un nuevo tema en el directorio en el que lo se ejecuta y también carga una copia del tema base en nuestra tienda de Shopify con el nombre especificado.

Paso 4. Trabajando en tiempo real

Ya has hecho la conexión con el tema de Shopify y puedes ejecutar el siguiente comando:

Ahora mismo Theme Kit está escuchando los cambios que hagas en local y los subirá de manera inmediata.

¿Aún sigues sin tener una tienda online propia?

Ya puedes trabajar en local 🎉

Ahora puedes hacer un seguimiento de tu código con control un control de versiones, crear un entorno de CI/CD, trabajar con un equipo de desarrolladores, usar tu editor de texto favorito, formateadores de código, configurar accesos directos,...

Esto es solo el principio, hay muchas más funcionalidades y comandos que te invito a descubrir sobre Theme Kit consultando la documentación oficial.