MyProductUpsell - Design

Design

The MyProductUpsell window is fully customizable. The design section lets you easily adjust all the elements within the Upsell. As soon as you change an element the live example will be updated.

The Screen

myproductupsell overview

Screen Description

1 This determins the overlay background color

2 This determines the overlay opacity

3 The background-color of the box

4 This determines the thickness of the border

5 This determines the color of the border around the box

6 This determines the squareness of the edges of the big box

7 This determines the font size of the header title. If you usually have long titles, use a smaller font-size

8 This determines the color of the title.

9 This determines the background color of the add to cart button

10 This determines the font size of the add to cart button text

11 This determines the color of the font within the add to cart button

12 This determines the squareness of the button. Increase the number to make the edges rounder

13 This determines the background color of the variant select field and the quantity field

14 This determines the font size of the texts within the fields

15 This determines the text color of the texts within the fields

16 This determines the border color of the input fields

17 This determines the squareness of the input fields. Increasing the number increases the roundness of the edges.

18 This determines the font size of the product title.

19 This determines the font color of the product title below the images

20 This determines the background color of the Go to Cart button

21 This determines the font size of the Go to Cart button

22 This determines the text color of the text within the Go to Cart button

23 This determines the squareness of the edges of the Go to Cart button

24 This determines the background color of the Continue Shopping button

25 This determines the font size of the Continue Shopping button

26 This determines the text color of the text within the Continue Shopping button

27 This determines the squareness of the edges of the Continue Shopping button