Shopify anuncia su cambio más significativo hasta la fecha: Shopify Tienda en línea 2.0, haciendo referencia a la nueva infraestructura, herramientas y tecnologías que te ayudan a construir una tienda flexible. A continuación, se presentan las nuevas herramientas y características de Shopify Tienda en línea 2.0:

• Arquitectura de temas mejorada: Con secciones disponibles para todas las páginas, comerciantes como tú pueden desbloquear un abanico de nuevas oportunidades para personalizar y mejorar las experiencias de los clientes.
• Contenido de tienda flexible:
• Las extensiones de aplicaciones de temas con bloques de aplicaciones te permiten integrar fácilmente múltiples aplicaciones de Shopify y eliminarlas sin dejar código fantasma detrás.
• El editor de temas mejorado te permite agregar valores meta dinámicamente. Eso significa que puedes añadir fácilmente cualquier información adicional al producto sin esfuerzo. Para obtener más información, consulta nuestro blog de metafields mejorados de Shopify 2.0.
• Mejoras en el editor de temas: En lugar de profundizar en múltiples capas para realizar cambios, el editor de temas mejorado muestra una vista en árbol de todo el contenido de una página en la barra lateral.
• Nuevas herramientas para desarrolladores: Con integración de GitHub, Shopify CLI actualizado y herramientas de comprobación de temas, los desarrolladores de Shopify pueden ayudarte a mejorar el desarrollo de tu tienda.
• Un nuevo tema de referencia: Diseñado y construido para soportar la flexibilidad de la tienda en línea 2.0, el tema Shopify Dawn es el primer tema de referencia disponible en código fuente. Puedes leer más sobre el tema en nuestra detallada reseña del tema Shopify Dawn.

Sumérgete más en estos anuncios de Shopify Tienda en línea 2.0 con nuestro blog de introducción a Shopify 2.0.

¿Pasos para ayudarte a comenzar con Shopify Tienda en línea 2.0?

Antes de empezar a migrar tu tema a Tienda en línea 2.0, necesitas decidir qué herramienta de desarrollo de temas utilizar. Si deseas utilizar el mejorado Shopify CLI, necesitas instalar CLI siguiendo los comandos a continuación.

Para Windows:

• Paso 1: Primero, instala Ruby+Devkit usando RubyInstaller for Windows.
• Paso 2: Usando el gestor de paquetes RubyGems.org, instala Shopify CLI.
• Paso 3: Abre un nuevo terminal, navega hasta el directorio raíz y ejecuta el comando "gem install shopify-cli".
• Paso 4: Para verificar la instalación, necesitas ejecutar el comando "shopify version".

Para macOS:

• Si estás utilizando RubyGems.org, sigue los pasos 3 y 4 para instalar y verificar.
• Si estás utilizando Homebrew, ejecuta los siguientes comandos "brew tap shopify/shopify" y "brew install shopify-cli" para instalar, y para la verificación, sigue el paso 4.

Pasos para ayudarte a migrar un tema a Shopify Tienda en línea 2.0

Para ayudarte a seleccionar los mejores temas de Shopify 2.0 y comprender la arquitectura del tema, hemos redactado un blog de los mejores temas de Tienda en línea 2.0 de Shopify junto con la arquitectura de temas de Shopify 2.0. Una vez que hayas identificado el tema en el que trabajarás, sigue amablemente los pasos a continuación

Paso 1: Haz una copia de seguridad del tema

Siempre es más seguro tener una opción de respaldo para no perderte en el camino. Si estás utilizando el Kit de desarrollo de temas, duplica el tema y mantenlo sin publicar. Usando Shopify CLI, puedes descargar el tema utilizando el comando "shopify theme pull".

Paso 2: Identificar y eliminar referencias de secciones

Dado que las secciones están disponibles para cada página en Shopify Tienda en línea 2.0 al renderizar el tipo de página en formato JSON, necesitas comenzar a convertir la plantilla Liquid de tu tema en una plantilla JSON.

• Para comenzar la conversión, necesitas eliminar cualquier etiqueta {% section %} mientras haces notas continuas.
• En segundo lugar, para eliminar las referencias, debes seguir los pasos a continuación:
• Paso 1: Localiza el archivo en el directorio /templates. En nuestro caso, consideremos el archivo product.liquid.
• Paso 2: Busca cualquier etiqueta {% section %} y anota sus ubicaciones y nombres.
• Paso 3: Elimina las etiquetas del archivo product.liquid.

Paso 3: Mover el código a la sección desde el formato de la plantilla

Una vez que hayas eliminado las etiquetas de sección, necesitas decidir dónde quieres mover el código de la plantilla.

• Para agregar el código a una sección existente,
• Abre tu archivo de sección seleccionado
• Copia el código de product.liquid
• Pega el código encima de las etiquetas de apertura {% schema %} en el archivo de sección.
• Para agregar código a una nueva sección,
• Primero, necesitas crear un archivo nuevo en el directorio /sections
• Luego, copia y pega el código restante en el archivo de sección vacío.

Paso 4: Eliminar el archivo de plantilla Liquid

Después de haber copiado y pegado, necesitas eliminar el archivo product.liquid del directorio /templates ya que no puedes tener ambos archivos product.liquid y product.json en el directorio /templates al mismo tiempo.

Paso 5: Crear un archivo de plantilla JSON

Después de haber eliminado el archivo product.liquid, puedes crear la plantilla JSON de reemplazo siguiendo los pasos:

• Paso 1: Creación del archivo:
• Si estás utilizando el editor de código,
• Selecciona Agregar una nueva plantilla.
• Desde el menú desplegable Crear una plantilla, elige la opción de producto.
• Selecciona JSON como tipo de plantilla.
• Si lo creas localmente, crea un nuevo archivo JSON (en nuestro caso, asumamos product.json) y guárdalo en el directorio /templates.
• Paso 2: Después de crear el archivo product.json, reemplaza cualquier código predeterminado con tipos apropiados dentro del archivo.
• Paso 3: Guarda el archivo.

Paso 6: Probar la plantilla

Después de crear la plantilla JSON, puedes probar los cambios navegando a tu página de producto desde el editor de temas y buscando la opción "Agregar sección".

Para ver un modelo de cómo Shopify Tienda en línea 2.0 puede beneficiar a los comerciantes y desarrolladores de Shopify este BFCM 2021, echa un vistazo a nuestro blog de beneficios BFCM de Shopify 2.0.

Paso 7: Agregar referencias y orden de las secciones

Si tu archivo de plantilla product.liquid contiene secciones adicionales, puedes definir estas referencias dentro del archivo product.json creado y luego definir su orden.

Paso 8 (Opcional): Agregar soporte para bloques de aplicaciones a las secciones

Con la actualizada arquitectura de temas y la introducción de extensiones de temas con bloques de aplicaciones, puedes aprovechar esta introducción añadiendo el esquema necesario y renderizando el contenido del bloque.

• Para renderizar un contenido de bloque: Verifica el tipo adecuado y, luego, renderiza el bloque usando la etiqueta {% render block %}.
• Para agregar el bloque de la aplicación a una sección: Necesitas agregar bloques de tipo @app al esquema de la sección.

Paso 9: Repetir los pasos

Para convertir todas las secciones, necesitas seguir los pasos anteriores del 1 al 7 para que tu tema sea compatible con Shopify Tienda en línea 2.0

Cómo instalar el tema Dawn de Shopify vía Shopify/Dawn Theme GitHub

No puedes descargar el tema Dawn de Shopify vía Shopify/dawn theme GitHub. Para descargar rápidamente el tema Dawn de Shopify, puedes visitar la Tienda de temas de Shopify y buscar el tema Dawn.

Dado que Shopify/dawn theme GitHub te ayudará a crear y rastrear cambios en el código del tema. La integración con Github permitirá que tus desarrolladores de Shopify colaboren de forma segura con el control de versiones al editar temas y compartir vistas previas de los cambios antes de llevarlos a un tema en vivo.

Conclusión:

Aunque no es obligatorio para los comerciantes aprovechar las funciones de Shopify 2.0, recomendamos encarecidamente a nuestros comerciantes y otros que experimenten Shopify Tienda en línea 2.0. Ofrece flexibilidad para realizar cambios y brinda opciones para crecer más allá de lo básico.

Si estás considerando implementar, migrar o comenzar con el tema Shopify Dawn. En ese caso, nuestros expertos de tienda en línea Shopify 2.0 pueden ayudarte a aprovechar las nuevas funciones, arquitectura, estilos de diseño y otros aspectos.