Base de conocimientos
Guías
Academia
Tutoriales en vídeo
Intenta buscar:
Artículos vistos recientemente:

Tabla de contenidos

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.

Antes de empezar, asegúrese de que su panel de control de WordPress y el plugin de Ecwid están actualizados a las últimas versiones para poder acceder a todos los ajustes de diseño descritos en este artículo. Para comprobar las actualizaciones, vaya al Panel de administración de WordPress → Plugins.

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:

customize_ecwid_store_on_wordpress.png

Este es el camino general para cambiar el diseño de la tienda en WordPress:

  1. Vaya al Panel de control de WordPress → Páginas y abra la página con la tienda.
  2. Haga clic en el bloque con la tienda. En la parte derecha verá los ajustes del bloque.
  3. Cambie los ajustes del bloque a su gusto.
  4. Haga clic en Vista previa para ver el aspecto que tendrá la tienda con los nuevos ajustes.
  5. Pulse Actualizar para guardar los cambios.
Es importante que cambie el diseño como se ha descrito anteriormente, en los ajustes del bloque. Si cambia los ajustes de diseño de la tienda en la pestaña Diseño directamente en su administrador de Ecwid, estos ajustes no se reflejarán en su sitio web ya que serán sobrescritos por los ajustes del bloque.

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.
Los ajustes de bloque se aplican solo dentro de un bloque específico. Si desea tener un diseño diferente para las distintas categorías de productos, añádalos a páginas separadas y edite el diseño en cada bloque de la tienda.

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.

Icono del carrito de la compra Ecwid en WordPress

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:

  1. Vaya a su Panel de control de WordPress → Apariencia → Personalizar.
  2. Haga clic en Ecwid en el menú de la barra lateral → Widget de carrito de la compra.
  3. 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.
  4. Seleccione la opción Mostrar cuando esté vacía si desea mostrar el icono de la cesta aunque no haya productos en ella.
  5. Una vez que encuentre su vista preferida, pulse Publicar:

Widget de cesta de la compra del plugin de Ecwid para WordPress

Para ocultar el widget de la cesta de la compra que se añade por defecto, seleccione «No mostrar» en la primera opción de diseño llamada Mostrar cesta de la compra. Si desea destacar su tienda a todos los visitantes del sitio, seleccione «Mostrar en todas las páginas». El icono del carrito transmite que el sitio tiene una tienda.

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 (en inglés) («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:

  1. Vaya a su Panel de control de WordPress → Apariencia → Personalizar.
  2. En la barra lateral izquierda, haga clic en CSS adicional.
  3. Añada sus códigos CSS al campo.
  4. Publique los cambios.

De esta forma puede añadir códigos CSS para su sitio web WordPress y también para su tienda Ecwid.

Si no puede encontrar o realizar el código CSS adecuado para su personalización, nuestro equipo desarrolla soluciones personalizadas para los usuarios de Ecwid. Póngase en contacto con nuestro equipo de personalización para solicitar un presupuesto.

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:

Puede mejorar el diseño de su tienda creando presentaciones. WordPress tiene un gran plugin para esto. Smart Slider 3 es una potente herramienta para crear presentaciones con una interfaz fácil de usar y muchas opciones de personalización.

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:

  1. 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.
  2. 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:

  1. Asigne productos a categorías si aún no lo ha hecho.
  2. Añada categorías de productos a diferentes páginas del sitio web.
  3. 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)

¿Fue útil este artículo?

¡Increíble! ¡Gracias por sus comentarios!

¡Gracias por sus comentarios!

¡Lo sentimos! ¿Qué ha ocurrido?
Usuarios a los que les pareció útil: 17 de 22
10
Usamos cookies y tecnologías similares para recordar sus preferencias, medir la efectividad de nuestras campañas y analizar datos despersonalizados con el fin de mejorar el rendimiento del sitio. Al elegir «Aceptar», da su consentimiento para el uso de cookies.
Aceptar cookies Rechazar