One-Click Upsells

• Overview
• Getting Started
• Enabling the Setting
• Adding the HTML
• Adding the CSS to Style the Widget
• Setting Details

Overview

You can now add multiple products to cart from a product display widget, such as related or featured items, in conjunction with the main product displayed on a product details page. This requires editing the HTML Layout of the widget and adding CSS to style it. Our instructions will direct you precisely where to place the code, however, a familiarity with HTML and CSS is preferred to implement this. 

NOTE: This setting only applies if the widget is displayed on a product details page

Getting Started

To get started, you will need to edit or create a product display widget on the product details page. Navigate to Themes > Edit Theme > Pages > Product Details > Widgets. 

If you already have a Product Display Widget you would like to use, select the edit icon to the left of the widget ID you want to edit. To create a new one, select Add Widget > Product Display next to the widget area you want this located. Then, you can edit the widget after adding it. 

Enabling the Settings

When editing the widget, you will see several settings. There are three settings that need to be enabled for this to work properly. These setting may appear AFTER you have added the HTML in the next section.

1. Show Qty Boxes & Add To Cart Button
2. Show Quantity Spinner
3. Tie To Product Page Add To Cart - This setting only applies to product display widgets that are on the product details page.

 Click the Checkbox to enable these and Save.

Adding the HTML

Next, we will need to add the HTML to the layout of the widget. While editing the widget, select Layout to view or edit the HTML. You can copy the code below and paste it into the HTML, replacing the <ac:visibilityarea id="dvControl"> tags. Essentially, the entire area within the opening and closing widget tags. <ac:widget id="PRODUCTDISPLAY1234...> </ac:widget> See screenshot below code for example. 

 <ac:visibilityarea id="dvControl">
$$ADMINHELP$$
<div class="ProductDisplayAlsoWrapper">
<h3>$$HEADER$$</h3>
<div class="ProductDisplayAlsoLayout">
<ac:layoutarea id="Layout">
$$GROUP$$
</ac:layoutarea>
<ac:layoutarea id="Group">
<div class="ProductDisplayAlsoItem"> $$ITEM$$</div>
</ac:layoutarea>
<ac:layoutarea id="Item">
<div class="homepage-product" data-sku="##ITEMNR##" data-cat="##CATNAME##"> 
<ac:visibilityarea id="dvControlItem"> 
<div class="ProductDisplayAlsoCheckbox">$$ADDTOCARTCHECKBOX$$</div>
<a href="##ITEMURL##" class="thumbnail">
$$PHOTO$$
</a>
<div class="ProductDisplayAlsoCaption">
<a href="##ITEMURL##" class="ProductDisplayAlsoLink"> 
<p class="ProductDisplayAlsoName">##PRODUCTNAME##</p>
</a>
<div class="ProductDisplayAlsoQuantity">
$$QTYBOX$$
</div>
<div class="ProductDisplayAlsoVariant">
<p class="ProductDisplayVariantString">$$VARIANTSTRING$$</p>
<p class="ProductDisplayAlsoVariantPrice">$$PRICE$$</p>
</div>
</div>
</ac:visibilityarea>
</div>
</ac:layoutarea>
</div>
</div>
<div class="ProductDisplayAddCost">
<p class="ProductDisplayAddPriceAdd">$$ADDITIONALADDTOCARTPRICETEXT$$</p>
<p class="ProductDisplayAddPricePrice">$$ADDTIONALADDTOCARTPRICE$$</p>
</div>
<script>
$(document).ready(function() {
$('.ProductDisplayAlsoQuantity input').val('1');
}); 
</script>
</ac:visibilityarea>

After exchanging the code in the widget's HTML, your layout should appear as follows:

Adding CSS to Style the Widget

After adding the HTML, we will need to add some style code to make this look more appealing on the front end. The following CSS can be added to the CSS tab when editing the widget. You can paste this below the current CSS for simplicity's sake. It will move within the Widget comments after saving. 

NOTE: This is very basic styling. You may want to elaborate on this to match the current style of your site. 

.ProductDisplayAlsoItem .ControlItem {display: flex; align-items: center; justify-content: flex-start; padding: 5px 0;}
.ProductDisplayAlsoCheckbox input {width: 30px; height: 30px;}
.ProductDisplayAlsoItem a.thumbnail {border: none; max-height: unset; min-height: unset; line-height: unset; margin: 0 10px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;}
.ProductDisplayAlsoItem a.thumbnail img {max-height: 100%; max-width: 100%;}
.ProductDisplayAlsoCaption {display: flex; align-items: center; justify-content: flex-end; margin-left: auto;}
.ProductDisplayAlsoName {font-size: 16px; margin-bottom: 0; font-weight: 500; line-height: 120%; text-align: right;}
.ProductDisplayAlsoQuantity input {margin: 0 10px; width: 50px !important; padding: 5px; text-align: center; font-weight: 600;}
.ProductDisplayAlsoVariantPrice .ProductDetailsPrice {font-size: 18px; font-weight: 600;}
.ProductDisplayAddCost {display: flex; align-items: center; justify-content: flex-start; padding: 10px 0; border-top: solid 1px #ccc; margin-top: 10px;}
.ProductDisplayAddPriceAdd {margin-bottom: 0; font-size: 16px;}
.ProductDisplayAddPricePrice {margin-bottom: 0; margin-left: auto; font-size: 18px; font-weight: 600;}
@media (max-width: 991px) {
.ProductDisplayAlsoCaption {flex-wrap: wrap;}
.ProductDisplayAlsoLink {width: 100%;}
}
@media (max-width: 767px) {
.ProductDisplayAlsoCaption {flex-wrap: nowrap;}
}
@media (max-width: 500px) {
.ProductDisplayAlsoCaption {flex-wrap: wrap;}
.ProductDisplayAlsoLink {width: 100%;}
}

Here is how the code should look after being applied:

Setting Details

When enabled, it can be used in conjunction with the $$ADDTOCARTCHECKBOX$$ merge code for the products and $$ADDITIONALADDTOCARTPRICETEXT$$ and $$ADDTIONALADDTOCARTPRICE$$ for the widget. The $$ADDTOCARTCHECKBOX$$ is used to check additional items to add to cart when the main product page's add to cart button is clicked, and the $$ADDITIONALADDTOCARTPRICE$$ merge code will display the additional price for the selected items.