¿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 multiplataformapara crear temas en Shopify．Ha sido creada y es mantenida por el equipo de Shopify.

Shopify Theme Kit

El uso de Theme Kit te permitirá:

Puedes hacer la instalación de 3 maneras diferentes:

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

Es interesante tener siemprela 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 estheme updatey le puedes añadir el parámetro de—-version=v1.1.1para 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, necesitamosconectar 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 privadaharemos 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已经“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. 我dentificador 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 archivoconfig.ymlen nuestro entorno local y luego descargaremos nuestro tema completo.

Elconfig.ymles 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,加入directorio usando el第一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:

Estocreará automáticamente un archivo config.ymly descargará el tema de la tienda en base al identificador del tema que hayamos puesto. También lo puedes crear manualmente el archivoconfig.ymlen 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éncarga una copia del tema base en nuestra tienda de Shopifycon 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 ladocumentación oficial．

---

¿Quieres comenzar con tu propio negocio?

Empieza hoy mismo con tuprueba gratispara montar tu negocio con Shopify.

(Sin dejar los datos de tu tarjeta de crédito ni tiempo de permanencia)

Dirección de correo electrónico Prueba gratis

---

Publicadopor Pablo Golán, editor del blog de Shopify en español y responsable de marketing de contenidos para España y Latinoamérica.

Autor invitado:Laura BonmatíMendoza, Freelance con experiencia en el desarrollo de temas desde 0 y adaptación de otros temas de Shopify. Me siento feliz cuando puedo aportar valor y ayudar a las personas que están a mi alrededor.