Paso 1: Ir a la configuraci贸n del widget
Para configurar el widget de productos, primero debes ir a la configuraci贸n de la aplicaci贸n Upselleandola. Para ello, sigue estos pasos:
En Shopify, ve a la secci贸n de configuraci贸n y luego accede a "Aplicaciones y canales de venta".
Haz clic en el nombre de la aplicaci贸n Upselleandola.
Haz clic en el bot贸n "Abrir la aplicaci贸n".
Paso 2: Configuraciones
En la pesta帽a "Configuraciones", puedes configurar los siguientes aspectos del widget:
Configuraci贸n Global
N煤mero de recomendaciones: La cantidad de recomendaciones que se desplegar谩n en el widget.
Acci贸n despu茅s de agregar al carrito: La acci贸n que suceder谩 al hacer clic en el bot贸n de agregar al carrito en el widget.
Posicionamiento Autom谩tico
Selector de posici贸n (Desktop): Selecciona donde se mostrar谩 el widget en la p谩gina de productos para la versi贸n escritorio.
Selector de posici贸n (Mobile): Selecciona donde se mostrar谩 el widget en la p谩gina de productos para la versi贸n de dispositivos m贸viles.
Configuraciones de estilo del widget
Desde las configuraciones del estilo del widget puedes controlar como quieres que se vea la aplicaci贸n en la p谩gina de productos.
T铆tulo de la secci贸n
Texto: El t铆tulo que tendr谩 el widget, esto se mostrar谩 sobre las recomendaciones.
Color del t铆tulo: El color de la fuente del t铆tulo.
Tama帽o de fuente para escritorio: Puedes seleccionar el tama帽o de la fuente para el t铆tulo en el formato escritorio.
Tama帽o de fuente para m贸vil: Puedes seleccionar el tama帽o de la fuente para el t铆tulo en el formato m贸vil.
Estilo de la tarjeta de producto
Estilo del nombre del producto: Elige el estilo de la fuente para el nombre del producto.
Estilo del precio del producto: Elige el estilo de la fuente del precio del producto.
Estilo del precio comparado: Elige el estilo de la fuente del precio comparado del producto.
Color del nombre del producto: Puedes seleccionar el color para el nombre del producto.
Color del precio del producto: Puedes seleccionar el color para el precio del producto.
Color del precio comparado: Puedes seleccionar el color para el precio comparado del producto.
Color de fondo de la tarjeta del producto: Puedes elegir el color de fondo del widget.
Color del checkbox: Puedes elegir el color del checkbox.
Color del signo "+": Puedes elegir el color del s铆mbolo m谩s (+) que se muestra entre productos.
Resumen de la compra
Texto "Precio Total": Puedes modificar el texto del precio total.
Color "Precio Total": Puedes modificar el color del precio total.
Relleno superior e inferior para el bot贸n: Modifica el relleno superior e inferior del bot贸n.
Radio del borde del bot贸n: Modifica el radio del borde del bot贸n.
Ancho del borde del bot贸n: Modifica el ancho del borde del bot贸n.
Relleno izquierdo y derecho para el bot贸n: Modifica el relleno a la izquierda y derecha del bot贸n.
Color del bot贸n: Modifica el color del bot贸n.
Color del borde del bot贸n: Modifica el color del borde del bot贸n.
Texto del bot贸n "A帽adir al carrito": Elige el texto que aparecer谩 en el bot贸n. (P) hace referencia a la cantidad de productos.
Peso de la fuente del bot贸n: Modifica el estilo de la fuente del bot贸n.
Color del texto del bot贸n: Modifica el color del texto del bot贸n.
Color de fondo del bot贸n al pasar el rat贸n: Puedes modificar el color que se muestra al pasar el mouse sobre el bot贸n.
Color del borde del bot贸n al pasar el rat贸n: Puedes modificar el color del borde que se muestra al pasar el mouse sobre el bot贸n.
Color del texto del bot贸n al pasar el rat贸n: Modifica el color del texto que se muestra al pasar el mouse sobre el bot贸n.
Color del bot贸n de carga: Puedes modificar el color del bot贸n de carga.
Color del check de carga: Puedes modificar el color del check de carga.
Color del spinner de carga: Puedes modificar el color del spinner de carga.
Configuraciones avanzadas
Puedes acceder a las configuraciones avanzadas desde el bot贸n al final de la configuraci贸n del estilo del widget haciendo clic en "Ir a la configuraci贸n avanzada" al final de la p谩gina.
Posicionamiento mediante selector
Posici贸n del widget (Desktop): Permite dejar el widget en 4 posiciones diferentes, dependiendo el selector para ubicaci贸n.
Selector para ubicaci贸n (Desktop): Permite elegir el selector donde se insertar谩 el widget, se debe utilizar a la par con la posici贸n del widget (Desktop).
Posici贸n del widget (M贸vil): Permite dejar el widget en 4 posiciones diferentes, dependiendo el selector para ubicaci贸n para m贸vil.
Selector para ubicaci贸n (M贸vil): Permite elegir el selector donde se insertar谩 el widget, se debe utilizar a la par con la posici贸n del widget (M贸vil).
CCS
C贸digo CSS extra: Si se desea agregar c贸digo adicional mediante CCS.
Clases extra bot贸n: En el caso de querer adaptar el bot贸n a uno que ya se tiene dentro de la p谩gina de producto, se puede agregar las clases del mismo para adaptar el bot贸n del widget.
Exclusi贸n del widget
Puedes leer respecto de la exclusi贸n del widget aqu铆.
Exclusi贸n de productos
Puedes leer respecto de la exclusi贸n de productos aqu铆.