Personalizaciones avanzadas de la visualización de productos y colecciones para el plugin de Shopify

Estas configuraciones avanzadas ayudan a personalizar la tienda online en WordPress, definir la identidad de marca del negocio y mejorar la experiencia de compra de los clientes.

Plugin de Shopify y componentes de la tienda online de Shopify

El plugin de Shopify está construido con Shopify Storefront Web Components. Los siguientes componentes se utilizan como bloques fundamentales de la tienda online de Shopify:

• Componente de tarjeta de producto: este componente muestra la información de un producto individual, generalmente en publicaciones de producto o páginas de colección. Suele incluir elementos como la imagen del producto, el título, el precio y un botón Agregar al carrito.
• Componente modal de vista rápida de producto: este componente muestra un modal sobre el contenido existente con información del producto, un botón Agregar al carrito y un enlace para ver la información completa del producto.
• Componente de página de información del producto: este componente muestra un único producto con toda la información del producto. Cada componente de página de información del producto tiene una URL única.
• Componente de colección: este componente muestra las colecciones de productos que creaste.

Personalización de la visualización de productos y colecciones de Shopify

Los componentes predeterminados de la tienda online de Shopify en el plugin incluyen herramientas para crear una experiencia de compra fluida. También tienes la flexibilidad de personalizar la visualización de estos componentes para alinearlos con la identidad de marca y los requisitos de diseño del negocio.

Para realizar estas personalizaciones, debes tener acceso para modificar los archivos y directorios del tema de WordPress. El proceso consiste en crear una carpeta dedicada dentro del directorio del tema activo de WordPress.

Pasos:

1. Crear la carpeta Shopify: empieza por crear una carpeta nueva llamada Shopify directamente dentro del directorio del tema activo. Esta carpeta servirá como ubicación central para sobrescrituras personalizadas de componentes.
2. Sobrescribir componentes individuales: Para modificar un componente específico, agrega un archivo PHP con un nombre designado dentro de la recién creada Shopify carpeta. La convención de nombres de estos archivos de sobrescritura es fundamental para que el plugin reconozca y aplique las versiones personalizadas:
   • Para sobrescribir el componente de tarjeta de producto, crea un archivo PHP llamado product-card.php dentro de la carpeta Shopify.
   • Para sobrescribir el componente modal de vista rápida de producto, crea un archivo PHP llamado modal.php dentro de la carpeta Shopify.
   • Para sobrescribir el componente de la página de producto, crea un archivo PHP llamado pdp.php dentro de la carpeta Shopify.
   • Para sobrescribir el componente de colección, crea un archivo PHP llamado component.php dentro de la carpeta Shopify.

Cuando creas el archivo PHP personalizado, el plugin deja de usar su archivo de componente predeterminado para ese elemento. Puedes implementar cualquier código en estos archivos de sobrescritura, desde bloques HTML estáticos hasta lógica PHP compleja.

Aunque se recomienda usar Shopify Storefront Web Components (como en la estructura predeterminada del plugin) para mantener la coherencia y acceder a funcionalidades integradas de Shopify, no estás limitado a ellos. Puedes integrar otros métodos para obtener y mostrar datos de productos y colecciones, lo que permite personalizaciones avanzadas.

Para obtener más información y mejores prácticas, consulta la WordPress plugin developer documentation.

Reescrituras de productos y colecciones de Shopify

Cuando publicas un producto o una colección en Shopify, cada producto y cada colección tiene una URL única. De forma predeterminada, esas URL se crean con el dominio de Shopify. Con la función de reescritura, puedes acceder a esas URL únicas con el dominio público de WordPress.

Pasos:

1. Desde el plugin de Shopify, ve a Configuración.
2. En la pestaña Avanzado, asegúrate de que las dos casillas de verificación de la sección Reescritura de enlaces de Shopify estén activadas.
3. Ve a Enlaces permanentes.
4. Haz clic en Guardar para aplicar esta nueva regla.
5. Ve al panel de control de Shopify y después navega a la página de detalles del producto o de la colección para la que quieres crear un enlace de WordPress.
6. En la tarjeta de listado en motores de búsqueda, se muestra una URL que lleva a los clientes directamente al producto o a la colección. Por ejemplo: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
7. Agrega products/huskee-reusable-cup al final de la URL del sitio de WordPress. Por ejemplo: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Personaliza el comportamiento de la tarjeta de producto

Con los componentes de la tienda online de Shopify, hay dos tipos de tarjetas de producto:

1. Vista rápida: cuando pasas el cursor sobre la tarjeta de producto, el cliente tiene la opción de Compra rápida. Al hacer clic, los detalles del producto se muestran en un popup or modal style over existing content en segundo plano.
2. Página de producto detallada: cuando un cliente hace clic en la tarjeta de producto, por ejemplo en la imagen o en el nombre del producto, los detalles del producto display in a full page view con una URL única.

Puedes cambiar esta configuración para mostrar solo la vista rápida, solo la página de producto detallada o ambas.

Pasos:

1. Desde el plugin de Shopify en WordPress, ve a Configuración.
2. En la pestaña Avanzado, ve a la sección Vista del producto.
3. Elige la opción que mejor funcione para la tienda.
4. Haz clic en Guardar.