Custom Styles

If you need styling which is not available with basic option, you can provide your own CSS Styles via the Custom CSS Options that is available from Styling tab

Common Customization Scenarios

• Change Image Height and Width

By default app sets a height of 50px for all the images, to change height and width use .upsell-addon-img CSS class, here are few examples:

.upsell-addon-img {

height: 100px!important;

width: 100px;

}

If you would like to use the original height and width of the image (only recommend if you your original images are of thumbnail sizes):

.upsell-addon-img {

height: initial!important;

}

• Change Product Title Font-Size/Color

In most cases you would not need to change this as App inherits the syles from the theme, but if you need to change styles of product title use follow CSS class

.upsell-addon-title {

color: #d98cb3;

}

Use a Color picker like from W3 Schools in order to find HEX value of the color

• Restrict Product Title to certain characters and add ...

Example of CSS to restirc the width of the title and add ... at the end

.upsell-addon-title {

width: 170px;

overflow: hidden;

white-space:nowrap;

text-overflow:ellipsis

display:inline-block;

}

CSS Classes

• Main Container Class that Wraps the entire app widget including the Heading

.upsell-container {}

• Add-on Item Container (container for each item)

.upsell-addonbox {}

Each Add-on container item is divided into three columns, col #1 has the image, col #2 has the Product title and See Details link and col #3 has Price info along with Checkbox or Add to cart Button

Below are CSS classes for each column

.upsell-addonbox-col1 {}

.upsell-addonbox-col2 {}

.upsell-addonbox-col {}

Details of Css classes within each column:

Col # 1 has Image:

.upsell-addon-img {}

Col #2 has Product Title and See details link:

.upsell-addon-title {}

.upsell-addon-details {}

Col #3 has Price + Checkbox or Add to Cart button

.upsell-price {}

To change checkbox style, following selector can be used:

.upsell-price input[type='checkbox'] {}

Css for add to cart button:

.upsell-addToCart {}

Css for Qty box:

.upsell-qty-input {}

If you need advanced customization please contact support as app can offer much more than documented above.