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