Step 1: Go to the widget configuration
To configure the product widget, first you need to go to the Upselleandola app settings. To do this, follow these steps:
In Shopify, go to the Settings section and then access Apps and sales channels.
Click on the name of the Upselleandola app.
Click on the Open app button.
Step 2: Settings
In the Settings tab, you can configure the following aspects of the widget:
Global settings
Number of recommendations: The number of recommendations that will be displayed in the widget.
Action after adding to cart: The action that will happen when you click on the add to cart button in the widget.
Automatic positioning
Position selector (Desktop): Select where the widget will be displayed on the product page for the desktop version.
Position selector (Mobile): Select where the widget will be displayed on the product page for the mobile version.
Widget style settings
From the widget style settings, you can control how you want the app to look on the product page.
Section title
Text: The text that the widget will have, this will be displayed above the recommendations.
Title color: The color of the title font.
Font size for desktop: You can select the font size for the title in desktop format.
Font size for mobile: You can select the font size for the title in mobile format.
Product card
Product name style: Choose the font style for the product name.
Product price style: Choose the font style for the product price.
Compared at price style: Choose the font style for the product's compared price.
Product name color: You can select the color for the product name.
Product price color: You can select the color for the product price.
Compared price color: You can select the color for the compared price.
Product card background color: You can choose the background color of the widget.
Checkbox color: You can choose the color of the checkbox.
Plus sign color: You can choose the color of the plus (+) symbol that is displayed between products.
Purchase summary
"Total Price" text: You can modify the text of the total price.
"Total Price" color: You can modify the color of the total price.
Top and lower padding for button: Modify the top and bottom padding of the button.
Button border radius: Modify the border radius of the button.
Button border width: Modify the border width of the button.
Left and right padding for the button: Modify the padding to the left and right of the button.
Button color: Modify the color of the button.
Button border color: Modify the color of the button border.
"Add to cart" button text: Choose the text that will appear in the button. (P) can be used to show the number of products to add to the cart.
Button font weight: Modify the font style of the button.
Button text color: Modify the color of the button text.
Button background color when hovering: You can modify the color that is displayed when you hover over the mouse on the button.
Button border color when hovering: You can modify the color of the border that is displayed when you hover over the mouse on the button.
Button text color when hovering: Modify the color of the button text when hovering over the mouse.
Load button color: You can modify the color of the load button.
Load check color: You can modify the color of the load check.
Load spinner color: You can modify the color of the load spinner.
Advanced settings
You can access the advanced settings from the button at the end of the widget style configuration by clicking on "Go to advanced settings" at the end of the page.
Selector positioning
Widget position (Desktop): Allows you to leave the widget in 4 different positions, depending on the selector for location.
Selector for location (Desktop): Allows you to choose the selector where the widget will be inserted, it must be used together with the widget position (Desktop).
Widget position (Mobile): Allows you to leave the widget in 4 different positions, depending on the selector for location for mobile.
Selector for location (Mobile): Allows you to choose the selector where the widget will be inserted, it must be used together with the widget position (Mobile).
CSS
Extra CSS code: If you want to add additional code using CSS.
Extra button classes: In the case of wanting to adapt the button to one that already exists within the product page, you can add the same classes to adapt the widget button.
Widget exclusion
You can read about widget exclusion here.
Product exclusion
You can read about product exclusion here.