Personalizar el diseño de la tienda Ecwid en un sitio WordPress
Cuando añade una tienda Ecwid a un sitio WordPress, Ecwid adapta su diseño con respecto al del sitio web. El escaparate hereda automáticamente los tipos de letra y los colores de su sitio web WordPress para lograr una combinación perfecta.
También puede personalizar el diseño de la tienda mediante la configuración de bloques, temas o códigos CSS. Todas estas opciones le ayudarán a mostrar los productos según sus preferencias de diseño: elija la relación de aspecto que mejor se adapte a las imágenes de sus productos, seleccione la información que desea mostrar en las páginas de la tienda, establezca los colores de los botones, enlaces, textos, etc.
En este artículo:
Ajustes de diseño en un sitio WordPress
Recomendamos añadir Ecwid a un sitio web WordPress utilizando nuestro plugin oficial Ecwid E-commerce Shopping Cart. Con el plugin, puede añadir fácilmente la tienda y determinados productos a diferentes páginas del sitio web, cambiar el diseño de la tienda en cada página por separado, añadir widgets de tienda (icono de carrito de la compra, cuadro de búsqueda, etc.) y mucho más.
En resumen, puede personalizar el diseño de la tienda en los ajustes del bloque donde añadió Ecwid:
Este es el camino general para cambiar el diseño de la tienda en WordPress:
- Vaya al Panel de control de WordPress → Páginas y abra la página con la tienda.
- Haga clic en el bloque con la tienda. En la parte derecha verá los ajustes del bloque.
- Cambie los ajustes del bloque a su gusto.
- Haga clic en Vista previa para ver el aspecto que tendrá la tienda con los nuevos ajustes.
- Pulse Actualizar para guardar los cambios.
En los ajustes del bloque, puede cambiar:
- Qué contenido se mostrará en las páginas de categorías y productos: título del producto, REF, precio, etc.
- Seleccione qué enlaces de navegación de la tienda se mostrarán: ruta de navegación, enlace de inicio de sesión, etc.
- Establezca un tamaño y una relación de aspecto para las categorías y las miniaturas de productos.
- Elija colores para los botones, los textos, los enlaces, el fondo y el precio.
- Y muchos otros ajustes que encontrará en la sección del bloque.
Diseño del icono del carrito de la compra
Los clientes utilizan el icono del carro de la compra para completar su compra. Cuando añade Ecwid a WordPress, se añade por defecto un icono de carrito de la compra en la esquina inferior derecha.
Puede cambiar su posición, seleccionar si desea mostrar el número de artículos/subtotal de la cesta, establecer un borde y elegir un icono.
Si tiene el icono del carrito en otro lugar de la página web (por ejemplo, en la cabecera), puede eliminar este widget de carrito añadido por defecto y ofrecer a los clientes un único carrito.
Para cambiar el aspecto del icono del carrito de la compra:
- Vaya a su Panel de control de WordPress → Apariencia → Personalizar.
- Haga clic en Ecwid en el menú de la barra lateral → Widget de carrito de la compra.
- Pruebe los ajustes del widget de la cesta. El aspecto del widget de la cesta cambia en la vista previa a medida que elige nuevos ajustes.
- Seleccione la opción Mostrar cuando esté vacía si desea mostrar el icono de la cesta aunque no haya productos en ella.
- Una vez que encuentre su vista preferida, pulse Publicar:
Códigos CSS personalizados
Puede utilizar códigos CSS para realizar personalizaciones que de otro modo no estarían disponibles. Supongamos que desea mover los iconos del pie de página («Seguimiento de pedidos», «Favoritos», «Iniciar sesión» y «Bolsa de compra») a la parte superior del escaparate. No hay ningún ajuste incorporado para cambiar esto, pero puede utilizar un código CSS. Debe añadir códigos CSS personalizados para su tienda Ecwid en los ajustes de WordPress.
Para añadir un código CSS a su sitio web WordPress:
- Vaya a su Panel de control de WordPress → Apariencia → Personalizar.
- En la barra lateral izquierda, haga clic en CSS adicional.
- Añada sus códigos CSS al campo.
- Publique los cambios.
De esta forma puede añadir códigos CSS para su sitio web WordPress y también para su tienda Ecwid.
Diseñar temas para WordPress
Ecwid es compatible con cualquier tema de WordPress. Esto incluye temas gratuitos de WordPress, temas premium de un proveedor externo o temas hechos a medida.
Ecwid tiene una herramienta integrada que se adapta al diseño de su tienda y al tema de WordPress. Sea cual sea el tema que utilice, Ecwid detectará el esquema de colores de su sitio (tomado del texto, los enlaces, el fondo y los botones) y lo utilizará automáticamente en el diseño de la tienda.
Si aún no se ha decidido por un tema para WordPress, eche un vistazo a estos temas:
- Responsive de CyberChimps
- HEALTHFLEX de PlethoraThemes
- Colección de temas Ecwid de ThemeForest
Preguntas frecuentes
Mi editor de WordPress no muestra ninguna configuración de bloque para la tienda
¿Ha leído las instrucciones anteriores, pero no encuentra la misma configuración de la tienda en su editor de WordPress? Hay dos posibles explicaciones de por qué puede ocurrir esto:
- Está utilizando la versión antigua de WordPress.
Solución: Actualice su WordPress a la última versión. Asegúrese también de que su plugin de Ecwid está actualizado: vaya al Panel de administración de WordPress → Plugins → Plugins instalados → Ecwid E-commerce Shopping Cart. Haga clic en Actualizar si ve que hay una nueva versión del plugin disponible para usted. - Añadió la tienda a su sitio web antes de que se introdujera el editor de bloques de WordPress (en inglés) (también conocido como Gutenberg).
Solución: Actualice su WordPress a la última versión, elimine la tienda y vuelva a añadirla. Siga las instrucciones sobre cómo añadir una tienda Ecwid a un sitio WordPress.
¿Nada ayudó? Contacte con nosotros. Le ayudaremos a solucionar las cosas.
Los cambios en el diseño de la tienda no se reflejan en la página web
Esto puede ocurrir si cambia los ajustes de diseño directamente en su administración de Ecwid → Diseño. Estos cambios no se reflejarán en su sitio web WordPress ya que son sobrescritos por los ajustes de diseño en el bloque de la tienda.
Debe modificar el diseño de su tienda en el editor de WordPress utilizando la configuración del bloque donde se encuentra la tienda. Consulte las instrucciones aquí: Ajustes de diseño en un sitio WordPress.
¿Puedo establecer diseños diferentes para distintas categorías de productos?
Sí, puede tener diferentes diseños si añade su tienda a WordPress utilizando el plugin Ecwid. A continuación le mostramos cómo establecer diferentes diseños para las categorías de la tienda en diferentes páginas del sitio web de WordPress:
- Asigne productos a categorías si aún no lo ha hecho.
- Añada categorías de productos a diferentes páginas del sitio web.
- Cambie el diseño de la tienda de cada bloque.
Dado que los cambios de diseño se aplican solo al bloque de la tienda donde los ha establecido, puede tener categorías de tienda en diferentes páginas del sitio web con un aspecto diferente.
Artículos relacionados
Vender en WordPress con el comercio electrónico de Ecwid
Configuración inicial de la tienda Ecwid
Los 15 mejores temas gratuitos de WordPress para su sitio web de comercio electrónico (blog en inglés)