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í.