5 actualizaciones de Shopify que debes conocer para mejorar tu tienda de comercio electrónico

Si está ejecutando un sitio web de comercio electrónico con Shopify, es esencial mantenerse al día con las últimas actualizaciones de Shopify para mantenerse por delante de la competencia. En 2023, el número de tiendas Shopify superó los 6,3 millones, en 175 países de todo el mundo. En particular, Shopify ha establecido su dominio en el mercado de comercio electrónico de EE. UU., con una participación de mercado significativa del 19,8%.

Con una base de usuarios tan masiva, Shopify siempre está trabajando en nuevas características y funcionalidades para satisfacer las necesidades de sus usuarios. Como socio de desarrollo de Shopify de marca blanca, nos mantenemos actualizados con las últimas tendencias y actualizaciones.

Estas actualizaciones recientes de Shopify lo ayudarán a mejorar su tienda en línea y mantenerse al día con el panorama del comercio electrónico en constante cambio.

I. Recopilación Automatizada con Metafield

Las colecciones automatizadas que usan metafield pueden ayudarte a crear colecciones más precisas para tus productos en Shopify. Los metacampos son campos personalizados que le permiten agregar información adicional a sus productos, como el color, el tamaño o el material.

Shopify ahora le permite agregar condiciones de metacampo a las colecciones automatizadas. Esto significa que puede crear recopilaciones automatizadas más precisas para sus productos en función de los metacampos del producto.

Una vez que agregue metacampos a un producto, el producto se agregará automáticamente a la colección automatizada correspondiente.

Para agregar condiciones de metacampo a una colección, debe seguir estos pasos:

Paso 1: crear un metacampo para el producto

Primero, debe crear un metacampo para su producto o variante. Vaya a la sección "Campos personalizados" en su configuración de Shopify y seleccione "Agregar un campo personalizado".

Con las actualizaciones recientes de Shopify, ahora es más fácil agregar información importante sobre tus productos usando metacampos. Puede elegir entre cuatro tipos de metacampos:

• Texto de una sola línea
• Entero
• Decimal
• Verdadero o falso

Si desea crear valores predefinidos para su metacampo, seleccione "Lista de valores".

Paso 2: Configuración de colecciones automatizadas

Una vez que haya creado su metacampo, puede configurar colecciones automatizadas basadas en ese valor de metacampo. Vaya a la sección "Colecciones automatizadas" de su panel de control de Shopify y seleccione "Crear colección automatizada".

Desde allí, puede seleccionar el metacampo que creó anteriormente y establecer las condiciones para su colección. Esta actualización de Shopify te permite organizar productos en colecciones personalizadas, lo que simplifica la gestión de inventario.

Paso 3: Creación de una colección

Después de configurar colecciones automáticas, puede crear una nueva colección. Ve a la sección "Colecciones" en tu panel de control de Shopify y selecciona "Crear colección".

En la sección "Condiciones", seleccione el metacampo que desea usar para su colección y establezca el valor para ese metacampo. Esto agregará automáticamente a su colección productos que coincidan con la condición de su metacampo.

Siga estos pasos para crear colecciones automatizadas con metacampo para sus productos o variantes. Esto puede ayudarlo a organizar mejor sus productos y facilitar que sus clientes encuentren lo que buscan para su tienda en línea.

Para obtener más información sobre los cobros automatizados, haga clic aquí.

II. Extensibilidad de pago

A partir del 13 de agosto de 2024, pago. liquid ya no funcionará para las páginas de pago. Esto significa que si actualmente personaliza sus páginas de pago con pago. liquid necesita actualizarse a la extensibilidad de pago antes de esta fecha.

Debe usar la API de Checkout para personalizar sus páginas de envío y pago. No se admitirán las personalizaciones realizadas fuera de esta API.

Cuando actualiza a la extensibilidad de pago, puede beneficiarse de experiencias de pago mejoradas y una mayor satisfacción del cliente.

Así es cómo:

• Paso 1: navegue a la sección API de pago de Shopify del sitio web de desarrolladores de Shopify.

• Paso 2: familiarícese con la API de Checkout y sus capacidades.

• Paso 3: personalice sus páginas de pago mediante la API de pago.

• Paso 4: pruebe sus cambios para asegurarse de que funcionan correctamente.

Esta actualización le permitirá personalizar sus experiencias de pago y brindarles a los clientes más información para tomar decisiones informadas durante el pago.

tercero Creación de grupos de secciones en temas de Shopify

Shopify ha introducido una nueva función que te permite crear grupos de secciones en el diseño de tu tema. Los grupos de secciones son contenedores JSON que permitirán al propietario de la tienda agregar, eliminar y reordenar secciones en áreas del archivo de diseño, como el encabezado y el pie de página.

Con esta actualización de Shopify , puedes personalizar y reorganizar fácilmente las secciones en el diseño de tu tema.Esta característica promete un flujo de trabajo más ágil y eficiente para las tiendas en línea.

Para agregar un grupo de secciones, siga estos pasos:

• Paso 1: navega hasta "Editar código" en tu tienda Shopify.

• Paso 2: Vaya a "Secciones" y haga clic en "Agregar una nueva sección" para agregar una nueva sección.

• Paso 3: agregue un nombre de archivo y agréguele ".json" para crear un nuevo archivo JSON.

• Paso 4: en el archivo JSON, agregue los siguientes cuatro atributos: "Tipo", "Nombre", "Secciones" y "Orden".Estos atributos son obligatorios, sin ninguno de los elementos, el archivo JSON no se guardará. si alguno de ellos falta, dará un error.

• Paso 5: Podemos tener uno de los siguientes valores: "encabezado", "pie de página", "aparte" o "personalizado".<nombre>” para el atributo “Tipo”.

• Paso 6: el atributo "Nombre" puede ser cualquier nombre que necesite asignar al grupo de secciones.

• Paso 7: el atributo "Sección" tiene todos los valores que agregamos desde el personalizador de Shopify.Será generado por Shopify automáticamente en función del contenido que agreguemos. Recomendamos enfáticamente NO EDITAR ese archivo JSON manualmente.

• Paso 8: el atributo "Orden" define la cantidad de bloques que agregamos a las secciones específicas.Se cambiará automáticamente cuando cambiemos el pedido desde el personalizador. Los atributos de orden definen el orden de los bloques.

• Paso 9: ahora que ha creado el archivo JSON del grupo de secciones, surge la pregunta de cómo vincularlo al personalizador y cómo aparecerá en el personalizador.Para hacer esto, puede agregar el siguiente código a su archivo líquido:

• {% secciones “Section_group_file_name” %}

• Paso 10: Esto vinculará el archivo de grupo de secciones al personalizador.Una vez vinculado, podrá agregar varias secciones a ese grupo de secciones, como se muestra en la imagen a continuación:

En general, esta nueva función brinda a los propietarios de tiendas Shopify como usted una gran flexibilidad y opciones de personalización para crear y administrar secciones en su archivo de diseño.

Nota:

• Los grupos de secciones creados en Shopify no aparecerán en el personalizador de forma predeterminada. Si desea agregar un grupo de secciones, deberá hacerlo manualmente en el archivo del código líquido.

• Sin embargo, Shopify ha introducido recientemente una nueva funcionalidad en el esquema de la sección que le permite hacer que su sección ".liquid" personalizada sea visible en grupos de secciones específicos.

• Los atributos "enabled_on" y "disabled_on" en el esquema se pueden usar para realizar esta tarea. Puedes organizar mejor tus secciones ".liquid" personalizadas y usarlas en grupos de secciones específicos con esta actualización de Shopify.

• Por ejemplo, si tiene dos grupos de secciones denominados "group1.json" y "group2.json" y un archivo de sección denominado "section_file.liquid", puede utilizar el atributo "enabled_on" en el esquema para crear el "section_file.liquid". ” visible solo en el “grupo1”.

• Por otro lado, puede usar el atributo "disabled_on" para ocultar la sección "section_file.liquid" en "group1" y mostrarla en todos los demás grupos.

• Los atributos "enabled_on" y "disabled_on" aceptan dos argumentos: "plantilla" y "grupos". Puedes usar ambos al mismo tiempo o uno de ellos. El argumento “plantilla” permite todo tipo de páginas, y [“”] permite todas las páginas.

• El argumento "grupos" le permite agregar tipos de grupos de secciones, como encabezado, pie de página, aparte y personalizado. <nombre>. [“”] permite todo tipo de secciones.

• Si usa "enabled_on" con los argumentos de plantilla y grupo, significa que su sección solo aparecerá en el grupo de secciones de esa plantilla. Lo mismo funcionará en "disabled_on" pero a la inversa.

Obtenga más información sobre "enabled_on" y "disabled_on" aquí. También puede leer sobre grupos de secciones aquí.

IV. Función de campo de metaobjetos de Shopify

La función Campo de metaobjetos de Shopify es una manera fácil de agregar y almacenar información estructurada para su tienda. Te permite almacenar información sobre un producto, como sus características, especificaciones y tablas de tallas, que luego se pueden recuperar y editar desde Shopify Admin.

Esta función se puede usar para productos, colecciones, clientes, pedidos y otras partes de su tienda. Esta actualización hace que administrar y actualizar su tienda sea más fácil y eficiente.

Se puede acceder a los metaobjetos a través de Shopify Admin, así como a través de la API de StoreFront y la API de metaobjetos. Esta función permite que las aplicaciones de terceros accedan e interactúen con los metaobjetos.

Esto significa que puede usar MetaObjetos para crear una amplia gama de personalizaciones e integraciones con su tienda.

Configuración de metaobjetos

La configuración de metaobjetos es un proceso sencillo. Hay dos elementos clave para los metaobjetos: el grupo de campos que describen la estructura de un objeto y el contenido o los datos de los metaobjetos.

• Puedes administrar la estructura de los metaobjetos desde la sección Configuración > Datos personalizados en tu panel de control de Shopify, donde puedes agregar o eliminar campos y definir sus tipos de datos.

• Luego, puedes administrar el contenido o los datos de los metaobjetos desde la sección Contenido > Metaobjetos en tu panel de control de Shopify, donde puedes agregar o editar la información almacenada en cada metaobjeto.

Es importante mantenerse actualizado con las últimas actualizaciones de Shopify para garantizar que sus metaobjetos funcionen correctamente.

Al crear metaobjetos en Shopify, es importante tener en cuenta algunas cosas para garantizar que funcionen correctamente.

• Primero, debes darle a cada metaobjeto un nombre claro y conciso para ayudarte a identificarlo dentro del panel de administración de Shopify. A continuación, debe asignar un tipo al metaobjeto, que se utilizará para identificarlo en las API.

• Además del nombre y tipo, debe definir los campos que componen el MetaObjeto. Estos campos determinarán el tipo de contenido que se puede agregar al metaobjeto.

• Cada campo tendrá sus propios detalles, incluidos un nombre, una descripción, un tipo y reglas de validación, límites de caracteres, valores mínimos y máximos o valores actuales.

• Una vez que se haya creado su metaobjeto, puede comenzar a crear entradas para él. Estas entradas se pueden agregar a los productos, colecciones, clientes, pedidos y otras partes de su tienda. También puede hacer referencia a metaobjetos dentro de diferentes áreas de su tienda o a través de aplicaciones de terceros.

• Cuando se trata de mostrar metaobjetos en su tienda en línea, puede adoptar algunos enfoques diferentes. Puede mostrar metaobjetos directamente en las páginas de productos, por ejemplo, o usarlos para crear campos personalizados en su proceso de pago.

En última instancia, Meta Objects tiene como objetivo proporcionar una herramienta flexible y poderosa para administrar datos estructurados y marcado de esquema en su tienda. Cuando sigue las mejores prácticas y diseña cuidadosamente sus metaobjetos, una actualización de Shopify puede ayudarlo a crear una experiencia de comercio electrónico más efectiva y eficiente para su cliente.

Creación de referencias de metacampos para partes específicas de Shopify

Para trabajar con partes específicas de Shopify, como productos, pedidos o clientes, puedes usar metaobjetos creando una referencia de metacampo.

Por ejemplo, si tiene un metaobjeto de "Características del producto" que desea mostrar en las páginas de su producto, puede crear un metacampo de producto que se refiera a este metaobjeto específico.

Esta referencia le permite exhibir "Características del producto" únicas en productos específicos. Por ejemplo, puede agregar entradas de referencia como "Sostenibilidad" en el Producto A y "Materiales" en el Producto B.

Esta actualización de Shopify es excelente, ya que aumenta la eficiencia y ayuda a crear mejores experiencias de usuario.

Puede obtener más información sobre los metaobjetos de referencia haciendo clic aquí:

Visualización de metacampos en su tienda en línea de Shopify.

Para mostrar MetaObjetos en su tienda en línea, tiene dos opciones: conectar metacampos a su tema usando el editor de temas o editar su código de tema para agregar MetaObjetos.

Mantenerse al día con las últimas actualizaciones de Shopify es esencial para asegurarse de que está utilizando el método más eficiente.

Estos son los pasos para cada opción:

Conecta metacampos a tu tema usando el editor de temas:

• Vaya a su panel de control de Shopify y haga clic en Tienda en línea > Temas.
• Busque el tema que desea editar y haga clic en Personalizar.
• Navegue a la parte de su plantilla donde desea que aparezca la referencia de metaobjeto.
• Seleccione una sección existente con bloques o agregue una nueva con bloques.
• Haga clic en el bloque que desea conectar a la referencia del metaobjeto.
• Junto al nombre del bloque, haga clic en el icono Conectar fuente dinámica.
• Seleccione las referencias de metaobjetos que desea mostrar con este bloque.

Edite el código de su tema para agregar metaobjetos:

• Solo intente esta opción si tiene experiencia en codificación.
• Vaya a su panel de control de Shopify y haga clic en Tienda en línea > Temas.
• Busque el tema que desea editar y haga clic en Acciones > Editar código.
• En el menú de la izquierda, navegue hasta la plantilla en la que desea agregar la referencia del metaobjeto.
• Use Liquid para hacer referencia a los metacampos en las plantillas de su página.
• Guarde sus cambios y obtenga una vista previa de su tema para asegurarse de que la referencia del metaobjeto aparezca como se esperaba.

Tenga en cuenta que si su tema es un tema antiguo que no admite metacampos, deberá editar el código para agregar tipos de metacampos.

Esta actualización facilita la personalización de los diseños de página y crea una apariencia única para las tiendas.

V. Optimización del código con el complemento Shopify Liquid Prettier

El complemento Shopify Liquid Prettier (1.0.0) permite efectivamente a los desarrolladores formatear el código en un estilo de código consistente al instante. Es una herramienta valiosa para las actualizaciones de Shopify, que elimina la necesidad de discutir pautas de estilo.

Este complemento está disponible en el navegador, terminal o dentro de su editor de código favorito. Con él, puede ahorrar tiempo y mantener sin esfuerzo código de alta calidad.

Está disponible con algunos editores de texto populares, incluidos Visual Studio Code, Vim y WebStorm.

Instale y configure el complemento en su editor preferido para comenzar. Esto lo ayudará a crear un código más limpio y fácil de leer y simplificará las tareas de depuración y mantenimiento.

a. código de estudio visual

Los desarrolladores de todo el mundo usan Visual Studio Code. Aprendamos sobre las dos extensiones que pueden ayudar con el formato del código, Shopify Liquid Prettier Plugin y Prettier.

Complemento más bonito de Shopify Liquid

Shopify Liquid Prettier Plugin es una función integrada en Shopify Liquid, que ayuda a formatear el código de Liquid. Para usar este complemento, puede agregar el siguiente código en el archivo settings.json de su tienda:

{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}
Agregue esta configuración para aplicar formato automáticamente al código de Liquid al guardar.

más bonita

Prettier es una extensión que se puede descargar desde Visual Studio Code Marketplace. Para usar Prettier con Shopify Liquid, debe instalar el complemento Shopify Liquid Prettier localmente en su repositorio.

Para instalar el complemento, puede usar npm o Yarn:

npm install –save-dev prettier @shopify/prettier-plugin-liquid

añadir hilo –dev más bonito @shopify/prettier-plugin-liquid

Después de instalar el complemento, Prettier formateará su código automáticamente según las reglas establecidas en el complemento. Esto puede ayudar a ahorrar tiempo y garantizar la coherencia en el formato del código, lo que facilita su lectura y mantenimiento.

Mantenerse al día con las actualizaciones de Shopify puede garantizar que su aplicación o tema siga siendo compatible con las funciones o los cambios recientemente introducidos.

b. Empuje

Vim también es un editor de texto popular. Exploremos cómo usar Vim Prettier con Shopify Liquid, un complemento que puede ayudar a formatear su código.

• Paso 1: Instalar Vim

Para comenzar, deberá instalar Vim en su máquina. Puede descargar la última versión de Vim desde el repositorio oficial de Git, disponible aquí.

• Paso 2: Instala Vim Prettier

A continuación, deberá instalar Vim Prettier, un complemento que le permite formatear su código usando Prettier desde Vim. Puede encontrar el complemento en el repositorio oficial de Git aquí.

• Paso 3: Instale el complemento Shopify Liquid Prettier

Para usar Prettier con Shopify Liquid, debe instalar el complemento Shopify Liquid Prettier localmente en su repositorio. Puede hacer esto usando npm o Yarn. Ejecute el siguiente comando para instalar el complemento usando npm:

npm install –save-dev prettier @shopify/prettier-plugin-liquid

Alternativamente, puede usar Yarn para instalar el complemento:

añadir hilo –dev más bonito @shopify/prettier-plugin-liquid

Después de instalar el complemento, Prettier formateará su código automáticamente según las reglas establecidas en el complemento. Esto puede ayudar a ahorrar tiempo y garantizar la coherencia en el formato del código, lo que facilita su lectura y mantenimiento.

Además, mantenerse al día con las actualizaciones de Shopify puede ayudar a garantizar que su código siga siendo compatible con las últimas versiones de Shopify y otras dependencias.

C. Tormenta web

WebStorm es un entorno de desarrollo integrado (IDE) para el desarrollo web que proporciona asistencia de codificación avanzada, herramientas de depuración y soporte para tecnologías web populares.

Para usar el complemento Shopify Liquid Prettier en WebStorm, debe seguir los pasos a continuación:

• Paso 1 : Instale el complemento Prettier desde JetBrains Plugins Marketplace.Puede encontrar el complemento aquí: https://plugins.jetbrains.com/plugin/10456-prettier.

• Paso 2 : instale el complemento Shopify Liquid Prettier localmente en su repositorio.Puede instalarlo usando npm o Yarn. Para instalarlo usando npm, ejecute el siguiente comando:
• npm install –save-dev prettier @shopify/prettier-plugin-liquid
• Alternativamente, si prefiere usar Yarn, ejecute el siguiente comando:
• añadir hilo –dev más bonito @shopify/prettier-plugin-liquid
• Paso 3 : reinicie WebStorm.

• Paso 4: en las preferencias de WebStorm, busque Prettier y actualice la opción "Ejecutar para archivos" para incluir archivos "líquidos".También puede marcar la casilla de verificación "Al guardar" para formatear archivos automáticamente al guardar.

• Paso 5: Guarde su configuración para activar el complemento.

Con estos pasos, puede usar el complemento Shopify Liquid Prettier en WebStorm para formatear su código Liquid automáticamente y mejorar la legibilidad de su código.

Es importante mantenerse al día con las actualizaciones de Shopify, actualizando el complemento Shopify Liquid Prettier en WebStorm. Cuando actualiza regularmente un complemento, puede aprovechar las nuevas funciones y mejoras, lo que garantiza que el código de su aplicación Shopify tenga el formato correcto y sea fácil de leer.

Conclusión

Como puede ver, las actualizaciones de Shopify pueden mejorar mucho el funcionamiento de su tienda en línea. Armado con estas actualizaciones, puede dejar atrás a sus competidores. Y aprovechar estas valiosas actualizaciones ahora es más fácil que nunca con nuestros servicios de desarrollo de Shopify de marca blanca.

En E2M, estamos comprometidos con su éxito y nos complace ayudarlo con cualquier pregunta que pueda tener sobre estas actualizaciones. Creemos en su negocio y queremos verlo volar a nuevas alturas. Comuníquese con nosotros si necesita ayuda.

Aprovecha estas valiosas actualizaciones y asegúrate de que tu tienda esté actualizada con las últimas innovaciones de Shopify.