Cómo añadir una bolsa de compra a un sitio web
Una bolsa de compra ayuda a los clientes a ver cuántos artículos han añadido a sus pedidos y continuar para pasar por caja. Cuando integre su tienda online, los distintos productos o los botones “Comprar ahora” en un sitio web, el icono de bolsa de compra aparecerá automáticamente en esa página si hay como mínimo un producto añadido en la cesta de la compra.
También tendrá lo opción de añadir una bolsa de compra más en el resto de páginas de su sitio web o de incluirla en el encabezado del sitio web. Este icono permite a los visitantes al sitio web saber que tiene una tienda online donde pueden comprar. Además, puede modificar el diseño de la bolsa de compra: elegir el icono, la información que se va mostrar (número de artículos, subtotal, etc.), definir la posición en la que aparecerá, etc.
Cómo añadir una bolsa de compra a un sitio web
Puede añadir una bolsa de compra a las páginas de su sitio web para que los clientes puedan ir a la página de la cesta de la compra desde cualquier página del sitio. Además, con un icono de bolsa de compra, los clientes recordarán que han añadido productos a su cesta de la compra, para animarles a completar la compra.
Para añadir una bolsa de compra a las páginas del sitio web:
- Vaya al panel de control de su tienda → Sitio web.
- Desplácese hasta la sección “Añadir su tienda a más de un sitio web” y haga clic en Elegir formato → Otras plataformas y generadores de sitio.
- Haga clic en Añadir bolsa de compra. El código de la bolsa de compra para su tienda se copiará en el portapapeles.
- Vaya al editor de su sitio web y abra la página en la que desea añadir la bolsa de compra.
- Pegue el código en el código fuente de la página. Puede ser HTML, una pestaña de código fuente o un botón independiente para añadir códigos. Depende del generador de sitio web que utilice.
- Guarde y publique los cambios de la página.
El icono de la bolsa de compra adicional aparecerá en su sitio web.
Personalización del diseño de la bolsa de compra
Puede personalizar el diseño de la bolsa de compra para que se adapte al de su sitio web. Para cambiar el diseño predeterminado de la bolsa de compra, tiene que cambiar el código predeterminado de la bolsa y añadir una nueva porción de código que aplicará el cambio correspondiente. Verá los códigos para los distintos cambios de diseño a continuación.
Para cambiar el diseño de su icono de bolsa de compra:
- Seleccione el cambio de diseño que desee a continuación.
- Copie el código bajo el cambio de diseño deseado.
- Sustituya VALUE por uno de los valores recomendados y STORE_ID por el ID de su tienda, que puede copiar en el panel de control de su tienda, en la esquina inferior izquierda.
- Vaya al editor de su sitio web y abra la página en la que desea añadir la bolsa de compra.
- Pegue el código en el código fuente de la página. Puede ser HTML, una pestaña de código fuente o un botón independiente para añadir códigos. Depende del generador de sitio web que utilice.
- Guarde y publique los cambios.
Diseño
| Valor | Diseño |
| SMALL_ICON |  |
| SMALL_ICON_COUNTER |  |
| COUNTER_ONLY |  |
| TITLE_COUNTER |  |
| MEDIUM_ICON_COUNTER |  |
| MEDIUM_ICON_TITLE_COUNTER |  |
| BIG_ICON_TITLE_SUBTOTAL |  |
| BIG_ICON_DETAILS_SUBTOTAL |  |
El siguiente es un código para cambiar el diseño de la bolsa de compra:
<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>
donde:
VALUE es el nombre del diseño que desea aplicar a su icono de bolsa de compra. Cópielo de la columna de la izquierda de la tabla anterior.
STORE_ID es el ID de su tienda que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Icono
| Valor | Icono |
| BAG |  |
| CART |  |
| BASKET |  |
El siguiente es un código para cambiar el icono de la bolsa de compra:
<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><<script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script>
<script>Ecwid.init();</script>
</div>
donde:
VALUE se debe sustituir por BAG, CART o BASKET, según el icono que desee usar.
STORE_ID es el ID de su tienda que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Para añadir una imagen personalizada como icono de bolsa de compra, use este código:
<div data-custom-icon-url="VALUE" class="ec-cart-widget">
</div><div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code" charset="utf-8"></script><script>Ecwid.init();</script>
</div>
donde:
VALUE es la URL al archivo de icono personalizado o una revisión SVG. Para obtener una URL para su icono, cargue su imagen en una galería desde la que pueda acceder a las imágenes mediante un enlace directo.
STORE_ID es el ID de su tienda que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Forma de borde
Para cambiar la forma del borde que rodea el icono de bolsa de compra, use este código:
<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
donde:
VALUE debe sustituirse por NONE para no incluir borde, RECT si se desea un borde rectangular o PILL en caso de borde rectangular redondeado.
STORE_ID se debe sustituir por el ID de su tienda, que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Posición
| Parámetro | Valor | Descripción |
| data-fixed | TRUE / FALSE | Permite incluir la bolsa de compra en un lugar específico de sus páginas |
| data-fixed-position | TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT | Ancla la bolsa de compra a la pantalla, para que el icono se mueva conforme se desplace por la página |
| data-horizontal-indent | Entero positivo, incluido el cero | Define el margen horizontal entre el widget de bolsa de compra y el borde de la pantalla o un contenedor de iframe |
| data-vertical-indent | Entero positivo, incluido el cero | Define el margen vertical entre el widget de bolsa de compra y el borde de la pantalla o un contenedor de iframe |
El siguiente es un código para cambiar la posición de la bolsa de compra:
<div data-fixed="VALUE"
data-fixed-position="VALUE"
data-fixed-shape="VALUE"
data-horizontal-indent="VALUE"
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script></div>
donde:
VALUE se debe sustituir por uno de los valores de la tabla anterior según la posición en la que desee aplicar la bolsa de compra.
STORE_ID se debe sustituir por el ID de su tienda, que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Animación
Puede mostrar o desactivar el efecto de animación cuando se añade un artículo a la cesta de la compra usando el siguiente código:
<div data-show-buy-animation="VALUE"
class="ec-cart-widget"></div>
<div><script data-cfasync="false"
type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
donde:
VALUE se debe sustituir por TRUE para mostrar la animación o por FALSE para desactivarla.
STORE_ID se debe sustituir por el ID de su tienda, que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Use el mismo diseño de bolsa de compra en todos los dispositivos
El icono de bolsa de compra se adapta al ancho de la pantalla y puede parecer diferente en los dispositivos con otros anchos de pantalla. Para que la bolsa de compra use el mismo diseño en todos los dispositivos, use este código:
<div data-responsive="VALUE"
class="ec-cart-widget"></div>
<div><script data-cfasync="false"
type="text/javascript"
src="https://app.shopsettings.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"></script><script>Ecwid.init();</script>
</div>
donde:
VALUE se debe sustituir por TRUE para que la cesta de la compra se adapte automáticamente a los distintos tamaños de pantalla o por FALSE para que la cesta tenga el mismo diseño con tamaños de pantalla diferentes.
STORE_ID se debe sustituir por el ID de su tienda, que puede copiar en el panel de control de la tienda, en la esquina inferior izquierda.
Cómo añadir una bolsa de compra a las páginas de WordPress
Puede añadir su tienda en línea a un sitio web de WordPress con el plugin de tienda online. Este plugin también permite añadir un icono de bolsa de compra y cambiar su formato y diseño.
Para añadir una bolsa de compra a un sitio web de WordPress:
- Vaya al panel de control de WordPress → Apariencia → Personalizar.
- En el menú de la barra lateral, haga clic en Tienda online.
- Haga clic en el widget de cesta de la compra.
- Seleccione dónde desea mostrar la cesta de la compra, configure el diseño, el icono y otros ajustes en la página.
- Seleccione la opción Mostrar vacía si desea que el icono de la cesta esté visible incluso si no hay productos en la cesta de la compra.
Personalización de la apariencia de la bolsa de compra en WordPress
Para cambiar la apariencia del icono de la cesta de la compra añadido a un sitio de WordPress:
- Vaya al panel de control de WordPress → Apariencia → Personalizar.
- En el menú de la barra lateral, haga clic en Tienda online → Widget de cesta de la compra.
- Pruebe los ajustes del widget de la cesta. La apariencia del widget de la cesta cambia en la vista previa conforme selecciona ajustes nuevos.
- Cuando encuentre un diseño que le guste, haga clic en Publicar.
Para ocultar el widget de cesta de la compra que se añade de forma predeterminada, seleccione “No mostrar” en la primera opción de diseño. Si desea destacar su tienda para los visitantes del sitio, seleccione “Mostrar en todas las páginas”. El icono de cesta de la corra implica que el sitio tiene una tienda.