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

¿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.

¿Es posible desarrollar themes con un 'simple' editor de textos?
📣 IMPORTANTE:
Ten en cuenta que Shopify es una plataforma alojada, por lo que nos tendremos que conectar a sus servidores para poder compilar y renderizar el código Liquid y poder obtener los datos de la tienda.

 

¿Tienes una idea de negocio?

Comienza a usar Shopify gratis por 14 días, sin necesidad de ingresar los datos de tu tarjeta de crédito

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.

Shopify Theme Kit

 

El uso de Theme Kit te permitirá:

✅ Subir temas a múltiples entornos
✅ Subidas y bajadas rápidas
✅ Detectar cambios en local y subirlos automáticamente a Shopify
✅ Funciona en Windows, Linux y MacOS

    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:

    curl -s [<https://shopify.github.io/themekit/scripts/install.py>]

    (<https://shopify.github.io/themekit/scripts/install.py>) | sudo python

      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.

      Versión más actualizada de Theme Kit

      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.

      → Para ello necesitamos dos cosas: una API privada y el identificador del tema.

      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:

      mkdir [your-theme-name]

      Luego, accede al directorio usando el comando cd:

      cd [your-theme-name]

      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:

      theme get --password=[your-api-password] --store=[your-store.myshopify.com] --themeid=[your-theme-id]

      Por ejemplo:

      theme get --password=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 --store=colaboration-blog.myshopify.com --themeid=1173934573

      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:

      theme new --password=[your-password] --store=[your-store.myshopify.com] --name="New Theme"

      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:

      theme watch

      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.

      ¿Te has quedado con dudas acerca de cómo trabajar desde el editor local?

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

      Sí. Tenemos que 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.

      ¿Cómo instalar Theme Kit en la web de mi ecommerce Shopify?

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

        curl -s [] () | sudo python

      ¿Qué ventajas tiene usar Theme Kit en tu tienda Shopify?

      El uso de Theme Kit te permitirá:
      • Subir temas a múltiples entornos
      • Subidas y bajadas rápidas
      • Detectar cambios en local y subirlos automáticamente a Shopify
      • Funciona en Windows, Linux y MacOS

      ¿Cómo puedo activar el desarrollo de aplicaciones privadas en mi tienda Shopify?

      En el administrador de Shopify, ve a "Aplicaciones", luego a "Administrar aplicaciones privadas" y habilita el desarrollo de aplicaciones privadas.

      Laura Bonmatí MendozaAcerca del autor: 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.

      ¿Quieres comenzar con tu propio negocio?

      Empieza hoy mismo con tu prueba gratis de 14 días para montar tu negocio con Shopify.

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

      Mapa de categorias: