() translation by (you can also view the original English article)
Hoy en día, y con la ayuda de plataformas como Shopify y WordPress, construir un sitio web completo y vender productos y servicios en línea se han convertido en tareas muy sencillas.
WordPress, al ser el CMS más popular y potente, te permite crear casi todo tipo de sitios web, incluyendo tiendas en línea. Por otro lado, Shopify es una plataforma administrada y alojada que se diseñó especialmente para construir tiendas en línea rápidas y fáciles de gestionar.
Este tutorial Shopify te mostrará cómo integrar Shopify en WordPress con un plugin (y otros métodos) para que tu negocio en línea pueda obtener los mejores resultados posibles.
Por qué querrías integrar Shopify en WordPress con plugins
Hay muchas maneras de crear una tienda en línea con WordPress (por ejemplo, haciendo uso del plugin WooCommerce). Sin embargo, la instalación de una tienda en línea directamente en tu sitio web de WordPress puede causar gastos generales adicionales, y la adición de contenido (como páginas, productos, imágenes y código) puede ralentizar drásticamente tu sitio.
Además, existe la posibilidad de que te resulte abrumador el tener que gestionar tu tienda en línea desde el mismo lugar en el que tienes tu blog, tus páginas web, y tal vez el sistema de tickets.
Por lo tanto, podría ser una buena idea separar por completo las páginas de tu tienda y su funcionalidad (como el proceso de registro de compras y pagos) de tu sitio web de WordPress. El uso de Shopify con WordPress ayudará a tu negocio en línea a:
- Trabajar mejor y más rápido, tanto para ti como para tus visitantes
- Aprovechar los beneficios que Shopify y WordPress pueden aportar
- Ser fácilmente gestionable (con dos paneles de administración separados y potentes)
- Crecer más rápido con más herramientas (por ejemplo plugins de Shopify y WordPress, etc.)
- Obtener beneficios del potente servicio de atención al cliente de Shopify
- Ejecutar tiendas duplicadas desde un back-end y múltiples front-ends de WordPress
Cómo integrar Shopify en WordPress con un plugin
Cuando se trata de añadir funcionalidad de tiendas en línea a WordPress, tienes dos opciones: hacer uso de un plugin Shopify para WordPress o hacerlo manualmente con código personalizado. Para la primera sección de este tutorial Shopify, quiero utilizar ShopWP: un potente plugin Shopify para WordPress que te permite conectar tu sitio a una tienda Shopify.
1. Instala el plugin ShopWP en WordPress
Para instalarlo, ve al área de administración de WordPress, navega a Plugins > Añadir nuevo y busca ShopWP. Cuando aparezca, como en la imagen a continuación, haz clic en Instalar ahora y actívalo.
2. Conecta tu tienda Shopify
Una vez que hayas instalado y activado este plugin Shopify para WordPress, verás un nuevo elemento (ShopWP) en el menú de la barra lateral. Selecciona ShopWP y, dentro de su pestaña Conectar, haz clic en Iniciar el proceso de conexión.
Esto te redirigirá a una nueva ventana con un proceso de cuatro pasos para conectar tu tienda Shopify con WordPress. Para empezar, escribe la URL de tu tienda y haz clic en Conectar tu tienda Shopify.
Esto te llevará al sitio web de Shopify, donde deberás iniciar sesión en tu cuenta para instalar el plugin Shopify para WordPress ShopWP en tu tienda. Al hacer clic en el botón Instalar aplicación, nuevamente se te redirigirá de forma automática al proceso de conexión.
3. Ajusta la configuración de WordPress
Después de realizar una conexión exitosa entre tu cuenta de Shopify con WordPress, el plugin querrá que realices algunos ajustes a la configuración.
El botón Habilitar página de listado (que puedes ver en la captura de pantalla de arriba) creará páginas predeterminadas para listar tus productos de Shopify en tu sitio web de WordPress. Si habilitas la opción Crear página de detalles de productos, esta creará una sola página para cada producto de tu sitio con el fin de mostrar los detalles de tus artículos dentro de tu sitio web de WordPress.
Yo prefiero desactivar ambas opciones, ya que quiero crear páginas de listados utilizando los shortcodes prefabricados del plugin y redirigir a los usuarios a la página de detalles de productos de Shopify cuando hagan clic en algún artículo. Este enfoque también me ayuda a mantener mi sitio web de WordPress más limpio y más rápido.
También puedes cambiar estas opciones desde la pestaña Configuración del plugin más adelante. Cuando hayas terminado, haz clic en Continuar con el siguiente paso y elige una divisa para los precios en la siguiente pantalla.
Por último, modifica algunas configuraciones básicas para tu carrito y para el proceso de pago. Si desactivas la primera opción, esto desactivará el carrito de WordPress; es una buena opción si has decidido vincular productos directamente a tu tienda Shopify (en el paso anterior).
Cuando sientas que todo está configurado de la manera que deseas, haz clic en Guardar y finalizar la configuración.
¡Eso es todo! Con esto, habrás conectado exitosamente tu cuenta de Shopify y WordPress con un plugin. Si llevaste a cabo todos los pasos anteriores de la manera correcta, es posible que veas un mensaje en la pestaña Conectar de la información del plugin ShopWP que te informará sobre el estado de la conexión entre Shopify y WordPress.
4. Sincroniza tu tienda Shopify con WordPress
Ahora que ya has conectado tu sitio web de WordPress a tu cuenta de Shopify, puedes ir a la pestaña Sincronizar en el elemento de menú ShopWP y luego puedes hacer clic en Sincronizar página de detalles para sincronizar y añadir productos de Shopify en WordPress.
Cuando hagas clic en este botón, todos los productos que tengas disponibles en tu tienda Shopify se copiarán automáticamente al sitio de WordPress. Ahora puedes ir al submenú Productos (en el elemento de menú ShopWP) para ver todos los productos que se añadieron y verificar que la sincronización haya tenido éxito.
5. Muestra tus productos en el sitio de WordPress
Para mostrar productos en tu sitio, puedes utilizar los shortcodes prefabricados de ShopWP y añadirlos a una nueva página. Entonces, crea una nueva página y asígnale el nombre que desees (yo la llamé Store). Agrega uno de los shortcodes de ShopWP (yo usé [wps_products] para mostrar todos mis productos en una lista).
¡Publica tu nueva página y échale un vistazo!
¡Felicitaciones! Ahora, si los usuarios hacen clic en un producto, ellos serán redirigidos a la página de detalles del producto en tu tienda Shopify y podrán comprarlo desde ahí (también puedes cambiar las acciones al hacer clic en los productos).
Recuerda que, cada vez que agregues un nuevo producto a tu tienda Shopify, deberás hacer clic en el botón Sincronizar como lo hiciste anteriormente. Si quieres habilitar la sincronización automática, es necesario que compres la versión prémium del plugin ShopWP (desde la pestaña Licencia).
Cómo integrar Shopify en WordPress sin plugins
Algunos diseñadores y administradores de sitios web de WordPress prefieren instalar la menor cantidad posible de plugins en sus sitios, ya que los plugins pueden añadir miles de líneas de código adicionales. La buena noticia es que el propio Shopify ha proporcionado una manera oficial de mostrar sus productos en otras plataformas ¡y lo llamó botones de compras!
Por lo tanto, si quieres mostrar uno o más productos de Shopify con WordPress sin instalar ningún plugin o aplicación, sigue leyendo este tutorial Shopify para aprender a usar los botones de compras de esta plataforma.
1. Ve a la configuración de Shopify
Primero, inicia sesión en tu cuenta de Shopify y haz clic en Configuración en la esquina inferior izquierda.
2. Añade un canal de ventas
En el menú lateral, selecciona Canales de ventas y haz clic en Añadir canal de ventas. Esto abrirá una ventana emergente donde puedes encontrar el elemento Botón de compras en la lista. Haz clic en el icono con el signo más para activarlo en tu tienda Shopify actual.
3. Crea un botón de compras
En la siguiente pantalla, puedes ver un solo botón llamado Crea un botón de compras que necesitas seleccionar. Elige el tipo de botón de compras que quieras crear.
Yo prefiero mostrar una lista de productos en mi sitio web de WordPress en lugar de un solo producto. Por lo tanto, he elegido el segundo elemento (Botón de compras para una colección). El primer elemento (Botón de compras de producto) es adecuado para mostrar un solo producto dentro de una publicación de blog, una barra lateral, un pie de página, etc.
4. Elige una colección de productos
Después de hacer clic en el Botón de compras para una colección, elige una colección en la ventana emergente y luego haz clic en el botón verde Seleccionar.
En la siguiente página puedes personalizar la apariencia de tu lista de productos en un editor en tiempo real fácil de usar. Cámbiala como tú quieras y haz clic en Siguiente en la esquina superior derecha.
5. Copia el fragmento de código de JavaScript
Ahora puedes copiar el código que contiene la colección de tus productos (la que creaste y personalizaste en los pasos anteriores).
¡Cópialo y pégalo donde quieras! Para mostrar productos en tu sitio de WordPress, debes crear una nueva página y poner este código en su interior.
Luego publica tu página y échale un vistazo. ¡Listo!
Cómo redirigir a los usuarios de WordPress a Shopify manualmente
Si estás buscando una manera más sencilla de mostrar tus productos, o si no te gusta mostrarlos en tu sitio web de WordPress, ¡todavía tienes otra opción! En el último método que veremos en este tutorial Shopify, aprenderás cómo guiar a los usuarios de WordPress a Shopify y traerlos de vuelta a WordPress después de realizar un pago exitoso.
1. Agrega un elemento de menú con un enlace de Shopify
En el panel de WordPress, ve a Apariencia > Menús, crea un nuevo elemento de menú y enlázalo a tu tienda Shopify. Luego colócalo en el menú principal de tu sitio web y haz clic en Guardar menú.
Con este sencillo truco, puedes llevar a tus visitantes de WordPress a tu tienda Shopify, donde pueden explorar y comprar tus productos. Como puedes ver en la siguiente captura de pantalla, todo está listo para tus clientes en tu tienda Shopify.
2. Trae de vuelta a los usuarios
Si quieres traer a los clientes de vuelta a tu sitio web de WordPress después de comprar un producto, es necesario que agregues un poco de funcionalidad a tu tienda Shopify. Puedes añadir este código adicional al cuadro Scripts adicionales, como en la siguiente imagen.
Redirigir a los usuarios después del pago en tu sitio requiere un poco de "hackeo", pero es un problema que ha sido planteado en la comunidad de Shopify. Aquí, en la comunidad de Shopify, puedes encontrar la solución propuesta por el personal de esta plataforma.
Ahora vayamos un paso más adelante para mejorar la experiencia de usuario cuando un visitante vaya de tu sitio web de WordPress a tu tienda Shopify.
Temas para lograr que la integración de Shopify en WordPress ocurra sin problemas
Muchos desarrolladores han creado sus temas pensando en varios CMS y frameworks, con el fin de que puedas usarlos tanto en WordPress como en Shopify. Puedes encontrar estos temas en Envato Elements y ThemeForest.
Ahora mencionemos algunos de estos temas, que puedes descargar e instalar por separado en Shopify y WordPress, con el objetivo de tener un solo diseño para ambos lados de tu sitio web.
1. Unero: Limpio y minimalista tema Shopify en secciones
Unero es uno de los temas más populares de Shopify en ThemeForest. Viene con más de 16 temas preconstruidos y muchas más características. Instalar este tema minimalista en tu tienda Shopify puede atraer más atención a tus productos y evita confusiones al explorar tu tienda y durante el proceso de compra.
Con su versión de WordPress, podrás crear el mismo entorno para tu sitio web en dicha plataforma.
2. Roxxe: Tema Shopify responsivo y multipropósito
Roxxe es un poderoso tema multipropósito disponible para Shopify y WordPress. Te proporciona 79 páginas de inicio de Shopify listas para importar y 15 demostraciones para tu sitio web de WordPress. Por favor consulta la vista previa en tiempo real en ThemeForest para obtener más información sobre este tema.
3. iOne: Tema Shopify responsivo y minimalista con funciones de arrastrar y soltar
Este es otro impresionante tema minimalista de Shopify que incluye diferentes demostraciones y funciones integradas para tu tienda. Echa un vistazo a su versión de WordPress y, si quieres ver más temas de Shopify y WordPress, puedes encontrarlos en Envato Elements o en ThemeForest.
Conclusión
En este tutorial Shopify, aprendiste sobre las mejores maneras de conectar dos de los constructores de sitios web más populares para crear una tienda en línea rápida y potente. Si quieres leer más sobre Shopify y WordPress, por favor consulta Tuts+ o echa un vistazo a los artículos que aparecen a continuación.
Cómo crear una tienda online con Shopify
Cómo editar tu sitio de WordPress
Shopify vs. WooCommerce, ¿con cuál crear una tienda online?
Tutorial de Shopify: Cómo agregar productos en Shopify
Cómo elaborar una tienda WooCommerce con Elementor
Los Mejores Temas Shopify para el Cuidado de la Salud y Bienestar para el 2022
35 mejores temas de Shopify para tienda de ropa y moda
