Advertisement
  1. Web Design
  2. Shopify

Cómo integrar Shopify en WordPress (y por qué hacerlo)

Scroll to top
Read Time: 12 min

Spanish (Español) translation by Ana Paulina Figueroa (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.

Instala un nuevo plugin en tu sitio web de WordPressInstala un nuevo plugin en tu sitio web de WordPressInstala un nuevo plugin en tu sitio web de WordPress

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.

Conecta Shopify y WordPressConecta Shopify y WordPressConecta Shopify y WordPress

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.

El primer paso para integrar Shopify en WordPressEl primer paso para integrar Shopify en WordPressEl primer paso para integrar Shopify en WordPress

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.

Instala la aplicación ShopWP en tu tienda ShopifyInstala la aplicación ShopWP en tu tienda ShopifyInstala la aplicación ShopWP en tu tienda Shopify

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.

Ajusta las configuraciones del plugin ShopWPAjusta las configuraciones del plugin ShopWPAjusta las configuraciones del plugin ShopWP

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.

Elige una divisa para tu tiendaElige una divisa para tu tiendaElige una divisa para tu tienda

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.

Guarda y finaliza el proceso de configuraciónGuarda y finaliza el proceso de configuraciónGuarda y finaliza el proceso de 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.

Agrega productos de Shopify en WordPressAgrega productos de Shopify en WordPressAgrega 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). 

Crea una nueva página y agrégale shortcodesCrea una nueva página y agrégale shortcodesCrea una nueva página y agrégale shortcodes

¡Publica tu nueva página y échale un vistazo!

Echa un vistazo a tu tienda Shopify en WordPressEcha un vistazo a tu tienda Shopify en WordPressEcha un vistazo a tu tienda Shopify en WordPress

¡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.

Página de configuraciones de ShopifyPágina de configuraciones de ShopifyPágina de configuraciones de Shopify

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.

Agrega un Botón de compras a tu canal de ventasAgrega un Botón de compras a tu canal de ventasAgrega un Botón de compras a tu canal de ventas

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.

Elige el tipo de Botón de compras que quieras crearElige el tipo de Botón de compras que quieras crearElige el tipo de Botón de compras que quieras crear

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.

Esto supone que ya has creado colecciones de productos en tu tienda Shopify. Si no es así, puedes hacerlo navegando a Productos > Colecciones > Crear colección desde el menú de la izquierda en tu cuenta de Shopify.
Selecciona una colección de productosSelecciona una colección de productosSelecciona una colección de productos

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.

Personaliza la colecciónPersonaliza la colecciónPersonaliza la colección

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).

Copia el código que generasteCopia el código que generasteCopia el código que generaste

¡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.

Pega tu código en una nueva página de WordPressPega tu código en una nueva página de WordPressPega tu código en una nueva página de WordPress

Luego publica tu página y échale un vistazo. ¡Listo!

Tu colección aparecerá en tu sitio web de WordPressTu colección aparecerá en tu sitio web de WordPressTu colección aparecerá en tu sitio web de WordPress

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ú.

Crea un nuevo enlace a tu tienda Shopify y colócalo en tu sitio web de WordPressCrea un nuevo enlace a tu tienda Shopify y colócalo en tu sitio web de WordPressCrea un nuevo enlace a tu tienda Shopify y colócalo en tu sitio web de WordPress

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.

Los usuarios verán tu tienda Shopify después de hacer clic en el enlaceLos usuarios verán tu tienda Shopify después de hacer clic en el enlaceLos usuarios verán tu tienda Shopify después de hacer clic en el enlace

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.

Después de la compra, redirige a los usuarios a tu sitio de WordPress con un códigoDespués de la compra, redirige a los usuarios a tu sitio de WordPress con un códigoDespués de la compra, redirige a los usuarios a tu sitio de WordPress con un código

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.

Demo de Unero para Shopify

Demo de Unero para WordPress

Unero: Limpio y minimalista tema Shopify en seccionesUnero: Limpio y minimalista tema Shopify en seccionesUnero: Limpio y minimalista tema Shopify en secciones

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.

Demo de Roxxe para Shopify

Demo de Roxxe para WordPress

Roxxe: Tema Shopify responsivo y multipropósitoRoxxe: Tema Shopify responsivo y multipropósitoRoxxe: Tema Shopify responsivo y multipropósito

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.

Demo de iOne para Shopify

Demo de iOne para WordPress

iOne: Tema Shopify responsivo y minimalista con funciones de arrastrar y soltariOne: Tema Shopify responsivo y minimalista con funciones de arrastrar y soltariOne: Tema Shopify responsivo y minimalista con funciones de arrastrar y soltar

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.