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/>

{{description}}

{{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

  • {{description}} --Description of the Add-on

  • {{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