Custom Templates

If you need to fully control the look & feel of Add-ons, you can provide custom templates.

Add-On Templates

App uses following default template to render "Add-on" box.

"Add-on" box is the individual Add-On item box within which an Add-on is displayed:

By default same template is used on Cart Page and Product Page. Text within {{....}} are "TOKENS" and are required, App replaces them with actual values.

<div class="upsell-addonbox" id="upsell-addon-{{addOnProductHandle}}">
              <div class="upsell-addonbox-col1">
                  <img src="{{img}}" class="{{imageClassName}}">
              </div>
              <div class="upsell-addonbox-col2">
                  <span class="product-single__title upsell-font-color upsell-addon-title">{{titleSnippet}}</span>
                  <br/>
                  {{variantDropdown}}
                  <a href="{{addOnSlug}}" target="_blank" class="upsell-addon-details {{seeDetails}}">{{seeDetailsText}}</a>                  
              </div>
              <div class="upsell-addonbox-col3">
                    {{addToCartInput}}
              </div>
          </div>

Token Details

  • {{addOnProductHandle}} -- Product Handle of the Product with Add-Ons (This is required and is used by App internally)
  • {{img}} -- Image Url of the Add-on
  • {{imageClassName}} -- If no Image is found then app will replace the token with "hidden" class to hide the image or else it is simple repalced by class name upsell-addon-img
  • {{titleSnippet}} -- Title of the Add-on, if Link product title option is checked then this is replaced by an <a> tag with Add-on title
  • {{variantDropdown}} -- Replaced by dropdowns containing variant option
  • {{addOnSlug}} -- Url to the Add-on
  • {{seeDetails}} -- This is replaced by a "hidden" class name if See details option is unchecked
  • {{seeDetailsText}} -- See details text ex: (See details)
  • {{addToCartInput}} -- This is either an "Add to cart" button or "Checkbox" or "Qty" box, You can provide a custom template for the input but option may not be available depending upon your exact requirements, please contact support for more info