1. Centro de ayuda
  2. Base de conocimiento
  3. Diseño
  4. Personalización del diseño con CSS
Base de conocimientos
Guías
Academia
Tutoriales en vídeo
Intenta buscar:
Artículos vistos recientemente:

Tabla de contenidos

esc para cerrar

Ecwid CSS Cookbook

Puede personalizar fácilmente el aspecto de su tienda Ecwid utilizando Hojas de Estilo en Cascada (Cascade Style Sheets o CSS). Este recetario tiene una colección de recetas CSS diseñadas para ayudarle a a hacer que la tienda Ecwid tenga el aspecto que usted desea. El recetario no es exhaustivo. Modificando las plantillas HTML y la hoja de estilos CSS, el número de cosas que puede hacer solo está limitado por su imaginación.

Si no tiene experiencia previa con CSS, consulte los siguientes tutoriales para ponerse al día:

Considere la posibilidad de contratar al equipo de desarrollo personalizado de Ecwid si no se siente cómodo editando los códigos.

Colección de recetas CSS (índice)

Este recetario está organizado en secciones que cubren elementos del escaparate de Ecwid. Cada sección incluye códigos CSS que puede pegar directamente en su tienda. Utilice el código tal cual o edítelo para hacerlo suyo.

Aprenda a añadir códigos CSS a su tienda Ecwid →

Si está utilizando Instant Site de nueva generación entonces los códigos aplicados a su escaparate (la tienda donde los clientes buscan los productos) no afectarán a los bloques de tienda en la página de inicio de su sitio web. Si necesita configurar el aspecto de los bloques de la tienda, puede hacerlo individualmente, por ejemplo, utilizando los ajustes de diseño en el Editor del sitio.

Botones

Fuentes

Cuadrícula de productos (Escaparate de la tienda)

Página de categoría

Detalles del producto

Carrito

Cuadro de búsqueda

Caja

Botones

En su tienda hay muchos botones grandes y pequeños como los botones «Añadir a la cesta» o «Continuar» Puede cambiarlos todos a la vez o individualmente.

Cambiar el color de todos los botones Grandes a la vez

Los botones grandes de su tienda incluyen Añadir a la cesta, Seguir comprando en la página del producto, Continuar, Caja, Hacer pedido. Utilice el siguiente código CSS para actualizar todos los botones a la vez. Modifique «#F0F8FF» y «negro» en el ejemplo por cualquier color que le guste:

/*Color del botón*/
  .ec-size .ec-store .form-control--primary .form-control__button 
  { background-color: red;}
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .form-control--primary .form-control__button:hover {
  background: #F0F8FF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .form-control--primary .form-control__button:hover {
  background: #F0F8FF;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .form-control--primary .form-control__button:hover {
  color: black;
  }

Aquí puede ver diferentes combinaciones de colores y tonos y elegir cualquier color y su número hexadecimal: Colores CSS.

¿Necesita cambiar también el texto de los botones? Puede hacerlo con el Editor de etiquetas de la tienda.
Si su tienda Ecwid está añadida a un sitio web Wix, configure las fuentes en los ajustes de la aplicación Ecwid.

Cambiar el color del botón Añadir a la cesta

Sustituya #FFA500 (naranja) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

/*Color del botón*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
  background: #FFA500;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
  color: #000000;
  }

Cambiar el color del botón Comprar ahora

Los botones Comprar ahora aparecen en las páginas de categorías. Sustituya «#FFFAFA» (color del botón, blanco nieve) y «#000000» (color del texto, negro) por los códigos de color que desea que aparezcan en su tienda.

.ec-size .ec-store .grid-product__buy-now .form-control__button { 
      background: #FFFAFA;
      color: #000000; 
  }

Si ha añadido un Botón Comprar a su sitio web o blog, su diseño también puede tener un botón Comprar ahora. Para cambiar el color de este botón, puede utilizar el siguiente código (sustituya los códigos de color por los que necesite):

.ecsp .ecwid-btn--primary,
  .ecwid .ecwid-btn--primary {background-color:#2A54D8;}
  .ecsp .ecwid-btn--primary:hover,
  .ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}

Cambiar el color del botón Caja

Sustituya «#FFFFFF» (blanco) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

/*Color del botón*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
  background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar por encima*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
  color: #000000;
  }

Cambiar el color del botón Continuar

Sustituya «#FFFFFF» (blanco) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

/*Color del botón*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button {
      background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
      background: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button {
      color: #000000
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
      color: #000000
  }

Cambiar el color del botón Hacer pedido

Sustituya «#FFFFFF» (blanco) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.


  /*Color del botón*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button {
      background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
      background: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button {
      color: #000000
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
      color: #000000
  }

Cambiar el color de todos los botones Pequeños a la vez

También puede cambiar los botones más pequeños como Añadir más, Ir a la caja, y Seguir comprando en la página del carrito. Aquí tiene los códigos para cambiar dichos botones. Sustituya «#FFFFFF» (blanco) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

Para cambiar los colores de los botones Añadir más e Ir a caja:


  /*Color del botón*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
  color: #000000;
  }

Para cambiar el color del botón Seguir comprando:


  /*Color del botón*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  color: #000000;
  }

Cambia el color del botón Añadir más

Sustituya «#FFA500» (naranja) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

/*Color del botón*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
  background-color: #FFA500;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
  color: #000000;
  }

Cambiar el color del botón Ir a caja

Sustituya «#FFA500» (naranja) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.

/*Color del botón*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
  background: #FFA500;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
  background: #FFA500;
  }
  
  /*Color del texto*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
  color: #000000;
  }

Cambiar el color del botón Seguir comprando en la página del carrito

Sustituya «#FFA500» (naranja) y «#000000» (negro) por los códigos de color que desea que aparezcan en su tienda.


  /*Color del botón*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  background-color: #FFFFFF;
  }
  
  /*Color del botón al pasar el ratón por encima*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  background-color: #FFFFFF;
  }
  
  /*Color del texto*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button {
  color: #000000;
  }
  
  /*Color del texto al pasar el ratón por encima*/
  .ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
  color: #000000;
  }

Colocar los botones Comprar ahora en el mismo nivel

Cuando los títulos de sus productos tienen longitudes diferentes, es posible que los botones Comprar ahora no estén alineados en la página del escaparate. Para alinear los botones Comprar en una vista de cuadrícula:

Buy Now buttons.png

.grid-product__wrap {
    display: flex;
  }
  .grid-product__price {
      flex: 1 0 auto;
      align-items: flex-end;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
  }

Ocultar el botón Añadir al carrito en todas las páginas de productos

Oculte el botón Añadir a la cesta en todas las páginas de productos utilizando el código CSS que aparece a continuación:

.details-product-purchase__controls {
  display: none;
  }
Tenga en cuenta que cuando oculta los botones Comprar ahora y Añadir al carrito, sus clientes no podrán comprar sus productos. Más información sobre cómo utilizar Ecwid como catálogo online (en inglés) →

Fuentes

Puede establecer la familia de fuentes predeterminada y su color para toda la tienda.

Cambiar todas las fuentes

Cambiar la familia de fuentes de toda la tienda. Sustituya el NOMBRE_DE_LA_FUENTE por un nombre de fuente real:


  .ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
  font-family: NOMBRE_DE_LA_FUENTE !important;
  }
Más información sobre combinaciones de fuentes de uso común.

Cambiar el color de la fuente

Сambiar el color de todas las fuentes a la vez. Modifique «#262626» (gris muy oscuro) en el ejemplo por cualquier color que le guste:

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
  color: #262626 !important;
  }
Aquí puede ver diferentes combinaciones de colores y tonos y elegir cualquier color y su número hexadecimal: Colores CSS.
Si su tienda Ecwid está añadida a un sitio web Wix, configure las fuentes en los ajustes de la aplicación Ecwid.

Cuadrícula de productos (Página de inicio de la tienda)

La cuadrícula de productos es un diseño que contiene varios productos y puede encontrarse en los siguientes lugares:

  • Las páginas de categorías.
  • La sección de la colección Productos destacados en la página de inicio.
  • La cuadrícula de productos relacionados debajo del producto principal en una página de Producto.

Cambie el color y el tamaño de la fuente del precio en la cuadrícula de productos

Cambiar el color o el tamaño de la fuente del precio en la cuadrícula de productos. Cambie «blue» y «20px» por cualquier color y tamaño de letra que desee.

/*Títulos de los productos en la página del catálogo*/
  /*Cambiar el color de la fuente*/
  .ec-size .ec-store .grid-product__title-inner {
  color: blue;
  }
  
  /*Precios de los productos en la página del catálogo*/
  /*Cambiar color de fuente*/
  .ec-size .ec-store .grid-product__price-amount {
  color: blue;
  }
  
  /*Cambiar el tamaño de la fuente*/
  .ec-size .ec-store .grid-product__price-value.ec-price-item { 
  font-size: 20px !important; 
  }

Desactivar efecto zoom para las miniaturas de productos

Cuando sitúe el cursor del ratón sobre la miniatura de un producto, verá el efecto zoom. Esta función está activada por defecto para todas las tiendas Ecwid. Si desea desactivarlo para su tienda online, puede utilizar los siguientes códigos CSS:

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
      transform: none;
  }

Colocar iconos de «Seguimiento de pedidos», «Favoritos», «Cesta de la compra», «Mi cuenta» en la parte superior de la página de una tienda

Los botones del menú de pie de página «Seguimiento de pedidos», «Favoritos», «Bolsa de la compra», «Mi cuenta» se encuentran por defecto en la parte inferior de la página de la tienda. Para moverlos a la parte superior de la página:

.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
    display: flex;
    flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
    order: -1;
}

Categoría

Las tiendas con diversas líneas de productos utilizan categorías para organizar los productos y ayudar a los compradores a encontrar lo que buscan. Puede aplicar cambios de estilo a una categoría y/o a todas las categorías a la vez.

Para aplicar cambios de estilo a todas las páginas de detalles de categoría de su tienda Ecwid utilice la clase CSS .ec-store__category-page.

Si aún no tiene ninguna categoría, todos sus productos pertenecerán a una categoría por defecto «Página principal de la tienda». Para aplicar cambios de estilo a todos los productos pertenecientes a una Tienda utilice la clase CSS ec-store__category-page--0.

Centrar productos por categorías

Centrar productos en páginas de categorías (funciona mejor si tiene pocos productos en una categoría):


  .ec-size .ec-store .grid__products {
      justify-content: center;
  }

Cambiar el color del precio en una página de categoría específica

Cambiar el color del precio en una página de categoría específica. Cambie «4002» por su ID de categoría. Sustituya «#FFA500» (naranja) por el código de color que desea que aparezca en su tienda.

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
  color: #FFA500;
  }

Desactivar el efecto zoom para las miniaturas de las categorías

Cuando sitúe el cursor del ratón sobre la miniatura de una categoría, verá el efecto zoom. Esta función está activada por defecto para todas las tiendas Ecwid. Si desea desactivarla para su tienda online, puede utilizar los siguientes códigos CSS:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
      transform: none;
  }

Mostrar el número determinado de categorías por fila

Puede especificar cuánto ocuparán las categorías del ancho total de la página. Por ejemplo, si establece la anchura para las categorías en un 20 % a partir del 100 % del espacio, obtendrá 5 categorías en una fila, o si establece la anchura como 25 %, resultará obtendrá 4 categorías por fila, y así sucesivamente.

Mostrar el número determinado de categorías por fila:


  .ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
      width: 20% !important;
  }

Desactivar el efecto hover para los títulos de las categorías

Modifique el siguiente selector:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
      transform: none;
  }

Ocultar imágenes en miniatura y títulos de las categorías

Para las categorías sin imágenes, Ecwid muestra un degradado como imagen de marcador de posición en el escaparate:

Screenshot_2019-12-29_at_17.35.03.png

Puede añadir sus propias imágenes. O puede ocultar las imágenes y los títulos de las fichas de categoría completamente (por ejemplo, si utiliza el menú horizontal como la navegación de su tienda):

.ec-size .ec-store .grid__categories {
  display: none;
  }

Ocultar fichas de categoría en la página de inicio de la tienda

Si desea tener una vista más compacta para la primera página de su tienda (por ejemplo, mostrar solo el menú horizontal y los productos destacados ahí), puede ocultar las fichas de categoría de la página de inicio de la tienda. Al mismo tiempo puede mantener fichas de categorías en sus páginas de categorías para que los clientes puedan ver allí las subcategorías, si las hay.

.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
  display: none;
  }

Detalles del producto

La página del producto muestra una imagen del producto, el nombre, el precio, la descripción, etc. Puede cambiar el aspecto del contenido, así como ocultar algunos componentes.

Para aplicar cambios de estilo a todos los productos pertenecientes a una determinada categoría utilice la clase .ec-store__product-page--c12345 CSS. Cambie «12345» por su ID de categoría único.

Cambiar el color y el tamaño de la fuente

Cambiar el color y el tamaño de la fuente en la página del producto. Cambie «#FFA500» (naranja) y «20px» a cualquier color y tamaño de letra que desee.

Color de los títulos:

/*Títulos de productos en la página de productos*/
  .ec-size .ec-store .product-details .product-details__product-title {
      color: #FFA500;
  }

Color y tamaño de la fuente del precio:

/*Precio del producto en la página del producto*/
  .ec-size .ec-store .ec-price-item {
      color: #FFA500;
  }
  .ec-size .ec-store .ec-price-item {
      font-size: 20px; 
  }

Color de la REF:

/*El REF del producto en la página del producto*/
  .ec-size .ec-store .product-details__product-sku {
      color: #FFA500;
  }

Color de la cantidad:

/*Etiqueta de cantidad en la página del producto*/
  .ec-size .ec-store .details-product-purchase__place {
      color: #FFA500;
  }

Color y tamaño de la fuente de Precio por unidad:

/*Campos de precio por unidad en la página del producto*/
  .ec-size .ec-store .product-details__price-per-unit-block  {
      font-size: 20px;
      color: #FFA500;
  }

Cambiar el color de la etiqueta «En oferta».

Modificar el color de la etiqueta EN OFERTA. Cambie RED en background-color y border-color por el color que desee:

/* cambiar el color de la etiqueta en oferta */
  .ec-size .ec-store .label--notice { 
  background-color: RED; 
  }
  .ec-size .ec-store .label--notice::after,
  .ec-size .ec-store .label--notice::before {
  color: RED; 
  }

Mostrar las imágenes de la galería a tamaño completo en los móviles

Añada el selector y la propiedad siguientes:


    .ec-size:not(.ec-size--s)  .ec-store .product-details .product-details__gallery {
      width: 100vw;
      margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
  }

Eliminar el nombre debajo de la imagen detallada en una galería

Para eliminar el texto bajo la imagen detallada:

div.pswp__caption__center { 
  display:none;
  }

Abrir «Mostrar más» en las páginas de productos

La opción Mostrar más permite mantener una vista compacta del producto si un producto tiene una descripción larga. Utilice este código para mostrar una descripción del producto:

.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;   
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img { 
display: inline;
}

Mostrar «Productos relacionados» en la parte superior de una página

Los Productos relacionados se muestran por defecto en la parte inferior de las páginas de productos. Para moverlos a la parte superior de las páginas de productos:

.ec-size .ec-store__content-wrapper {
  display: flex;
  flex-direction: column;
  }
  .ec-size .ec-store__content-wrapper .ec-related-products {
  order: -1;
  }

Ocultar el precio de determinados productos

Ocultar el precio en la página específica del producto. Cambie «123456» por su ID de producto interno único para el producto: (¿Cómo obtener el ID de producto?)

.ec-store__product-page--123456 .product-details__product-price {
      display: none;
  }

Ocultar los precios a los clientes que no hayan iniciado sesión

Puede ocultar los precios a los visitantes que no hayan iniciado sesión. Su catálogo estará disponible para todos los visitantes, pero solo los clientes registrados podrán ver los precios y comprar. Esto es especialmente útil si desea mantener en privado los precios al por mayor.

A continuación encontrará un código CSS para ocultar los precios y los botones Añadir a la cesta y Comprar ahora. En este caso, solo los clientes registrados podrán realizar pedidos. Los clientes que no hayan iniciado sesión solo podrán ver su catálogo.


  /*Ocultar el precio en la página del catálogo*/
  body.ecwid-customer-loggedOut .grid-product__price { 
       display: none; 
  } 
  
  /*Ocultar botones Comprar ahora en la página del catálogo*/
  body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
      display: none;
  }
  
  /*Ocultar el precio en la página de detalles del producto*/
  body.ecwid-customer-loggedOut .details-product-price__value,
  body.ecwid-customer-loggedOut .details-product-price-compare__container {
      display: none;
  } 
  
  /*Ocultar Añadir a la cesta en la página de detalles del producto*/ 
  body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
      display: none;
  }

Si se encuentra en un país en el que se muestra una nota Precio con impuestos junto al precio del producto, también tendrá que añadir el siguiente código CSS para ocultar este texto del escaparate:

body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Si desea que solo los clientes registrados puedan ver su escaparate, utilice la aplicación Inicio de sesión requerido para el acceso al escaparate.

Carrito

Cambiar el estilo del botón «Eliminar producto»

Sus clientes pueden eliminar un producto de un carrito de la compra utilizando el icono Eliminar (X). Se muestra junto al producto en el carrito de la compra.

Puede ajustar la altura y la anchura del rótulo, el grosor de sus líneas el redondeo de sus esquinas  así como cambiar el color del rótulo para hacerlo más llamativo.

Este es el código que necesita añadir a su tienda:


    .ec-size .ec-store .ec-cart-item__control-inner svg {
      opacity: 1.5;
      color: red;
      width: 30px;
      height: 30px;
      border-radius: 10px;
  }
  .ec-size .ec-store .ec-cart-item__control-inner svg g {
      stroke-width: 2px;
  }

En la línea «color», escriba el color que desee que tenga su rótulo.

Cuanto mayores sean la anchura y la altura, mayor será el tamaño del rótulo.

Quitar el campo cantidad

Para ocultar Cantidad de la página del carrito:

.ec-size .ec-store .ec-cart-item__count {
  display: none;
  }

Ampliar el campo Cupón de descuento

Puede ampliar la casilla del cupón de descuento (y de la tarjeta regalo) en el carrito:

.ec-size .ec-store .ec-cart-coupon__wrap { visibility: visible } 
  
  .ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply { 
  display: block; 
  }
  
  .ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap { 
  display: flex; 
  align-items: center; 
  height: auto; 
  }
  
  .ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text { 
  display: none; 
  }

Mostrar la bolsa de la compra vacía en Instant Site (versión original)

Por defecto, el icono de la bolsa de la compra en Instant Site aparece si el carrito contiene un producto. Si lo desea, puede mostrar el icono del carrito aunque esté vacío:


  .float-icons__icon--cart.off:not(.off2) {
      opacity: 1;
      height: 48px;
      padding-top: 12px;
      transform: translateX(-8px);
      pointer-events: auto;
  }
  
  @media (min-width: 414px) {
      .float-icons__icon--cart.off:not(.off2) {
          height: 68px;
          padding-top: 16px;
          transform: translateX(-16px);
      }
  }
  
  @media (min-width: 768px) {
      .float-icons__icon--cart.off:not(.off2) {
          padding-top: 24px;
          transform: translateX(-24px);
      }
  }
Este código funciona para la versión original de Ecwid Instant Site solamente.

Cuadro de búsqueda

Un widget de búsqueda ayuda a sus clientes a buscar productos en su tienda. Puede cambiar el aspecto del propio cuadro de búsqueda o moverlo.

Cambiar el diseño del widget de búsqueda

Añada o modifique el selector y las propiedades siguientes. Cambie el tamaño y sustituya códigos de color como #000000 por el código de color que desea que aparezca.

/* Estilos del cuadro de entrada */
  input.ecwid-search-widget__input[type="text"] {
   width: 100px; /* cambie la anchura según sus necesidades */
   height: 20px; /* cambie la altura según sus necesidades */
   border: solid 1px red; /* cambie el color del borde */
   background-color: #000000; /* cambie el color de fondo */
   font-size: 12px; /* cambie el tamaño de letra en el campo de búsqueda */
   color: #000000; /* cambie el color de la fuente en el campo de búsqueda */
  }

Cambiar los estilos de los botones Buscar

Añada o modifique el selector y las propiedades siguientes. Reemplazar image/button_search.png por la ruta real absoluta a la imagen de fondo. Por ejemplo: «http://www.ejemplo.com/images/button_bg.png»

/* Estilos del botón "Buscar" */
  button.ecwid-search-widget__btn {
   width: 20px; /* cambie la anchura según sea necesario */
   height: 10px; /* cambie la altura según sea necesario */
   border: solid 1px #ffffff; /*cambie el color del borde */  
   background: transparent url(image/button_search.png) no-repeat bottom center !important; /*añadir imagen de fondo*/
  }

Mover el cuadro de búsqueda

Dependiendo de la posición deseada del widget de búsqueda, introduzca los correspondientes valores de margin-left (margen izquierdo) y margin-top (margen superior) para moverlo.

/* para mover el widget de búsqueda*/
  .ecwid-search-widget {
  max-width: 170px; /* cambie la anchura según sea necesario */
  position:relative;
  margin-left: 400px; /* cambie el margen izquierdo según sea necesario */
  margin-top: 10px; /* cambie el margen superior según sea necesario */
  }

Cambiar el cuadro de búsqueda en Instant Site (versión original)

Sustituya #F3F6F9 por el código de color que desea que aparezca.

.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
  border: 1px solid #e6e6e6; 
  }
  .search-panel .text-field { 
  background-color: #F3F6F9; 
  border: 2px solid #DC230A; 
  }
Este código funciona para la versión original de Ecwid Instant Site. Si está utilizando Instant Site de nueva generación puede cambiar el aspecto del cuadro de búsqueda en el Editor del sitio.

Caja

Eliminar el plazo de entrega de los nombres de los métodos de envío

Algunos transportistas (como USPS, FedEx, etc.) añaden el plazo de entrega a los nombres de los métodos de envío. Si utiliza un transportista de envío online en su tienda Ecwid, puede ver que los métodos de envío se muestran así «USPS Priority Mail (1-3 días)» en la caja. Es posible ocultar este plazo de entrega mediante CSS:

span.ecwid-shippingOption-days, span.ecwid-Invoice-ShippingDetails-transitTime {
  display:none !important;
  }

Cambiar los logotipos de las tarjetas de crédito en las opciones de pago en la caja

Los logotipos bajo las opciones de pago ayudan a los clientes a ver directamente qué opciones pueden utilizar para realizar un pago. Puede utilizar un código CSS para mostrar diferentes logotipos, por ejemplo para mostrar de forma más explícita qué tarjetas de crédito o débito pueden utilizar los clientes. 

Utilice este código CSS: 


  /* Ocultar logotipos actuales del método de pago */
  .ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
  div.ec-cart-accept__icons {
      display: none;
  } 
  
   /* Añadir logotipo personalizado para el método de pago */
  .ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
.ec-radiogroup__info:after {
      content: '';
      background: url('https://example.com/your_image.jpg') no-repeat;
      background-size: contain;
      height: 40px;
      width: 60px; /* The width should be adjusted depending on your logo */
      display: block;
  }

donde deberá sustituir https://ejemplo.com/su_imagen.jpg por una URL a su logotipo y X en :nth-child(X) con el número del método de pago en la caja. Por ejemplo, si se muestran 3 métodos de pago en la caja y desea mostrar nuevos logotipos debajo del segundo método, debe poner «2» en el código, así: :nth-child(2).

Puede utilizar los siguientes logotipos de tarjetas de crédito: 

Mostrar logotipos de tarjetas de crédito en el pie de página de la tienda

En caso de que necesite mostrar qué tarjetas acepta en su tienda (por ejemplo, para conseguir que Google apruebe su cuenta para Google Shopping), puede añadir logotipos de tarjetas al pie de página utilizando el siguiente código CSS:

Instant Site de nueva generación
Instant Site (versión original)

  .ins-tile--footer .ins-tile__made-with:before {
  content: '';
  background: url('https://example.com/your_image.jpg') no-repeat;
  background-size: contain;
  background-position: center;
  height: 50px;
  display: block;
  }

donde deberá sustituir https://ejemplo.com/su_imagen.jpg por una URL a su imagen con logotipos.

Puede utilizar los siguientes logotipos de tarjetas de crédito: 

¿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: 29 de 45
Artículos en esta sección
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