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.
¿Tienes una idea de negocio?
Comienza a usar Shopify gratis, 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 multiplataformapara 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:
- Descargándote el paquete zipe instalándolo de manualmente.
- Siguiendo los pasos de instalación que proporciona para cada sistema operativo laweb de Theme Kit.
- De manera global si trabajas en Linux o Mac mediante el siguiente comando:
curl -s [
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.
- 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.
![]()
- 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".
![]()
- 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.
![]()
- 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 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:
mkdir [your-theme-name]
Luego,加入directorio usando el第一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
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:
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é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:
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,...
当es独奏el principio干草中央has 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)
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.
¿Te has quedado con dudas acerca de cómo trabajar desde el editor local?
¿Es posible desarrollar themes con un 'simple' editor de textos?
¿Cómo instalar Theme Kit en la web de mi ecommerce Shopify?
- 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 [
¿Qué ventajas tiene usar Theme Kit en tu tienda Shopify?
- 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