Props: product page upsell and product lists

Product Page Upsell

Open the offer, go to the Design tab and scroll to the end. A Custom Templates button opens the Template library, and the Custom template card below it holds the editor. Its title names the slot you are editing: Cross-sell · Carousel, Cross-sell · Stacked, Product add-on · Carousel, Product add-on · Stacked, FBT · Stacked or FBT · Horizontal. The slot follows the offer type and layout. Each slot keeps its own code and its own switch; only the slot that matches the offer's current type and layout runs.

The editor is always shown on this tab, whatever the Enable custom template editors setting says. The template replaces the whole offer block. It only reaches the storefront while the offer is Active.

Block props

summary has: titleHtml, savingsBadgeHtml, discountedPriceHtml, originalPriceHtml, totalHtml, totalOriginalHtml, itemCount (number), showTitle, showSavingsBadge, hasTotals (booleans), and the style objects titleStyleVars, discountedPriceStyleVars, originalPriceStyleVars, savingsBadgeStyleVars.

Each products entry has: id, title, handle, productUrl, imageUrl, isSelected, isTrigger (the product page's own product in an FBT offer), isLoading, isSuccess, hasDiscount, price and discountedPrice (numbers in whole currency units), priceHtml, discountedPriceHtml, selectedVariantId, variants (array of id, title, available), onToggleSelect(checked), onAddToCart(), onVariantChange(variantId), and style objects itemStyleVars, titleStyleVars, variantStyleVars, priceStyleVars, discountedPriceStyleVars, checkboxStyleVars, buttonStyleVars, variantIconStyleVars, buttonIconStyleVars.

Template library

Click Custom Templates. The sheet is titled Template library with the offer type, and says its previews use the offer's title, button text and discount on sample products. Each card shows a preview, a title, a description, a layout badge when the template is made for one layout, and Use template. The card in use shows In use. A template that does not compile shows "No preview: this template doesn't compile." and cannot be used.

Use template compiles the template, fills the slot, switches it on, and moves the offer to the template's layout if it was made for another one. If the slot holds code you wrote by hand, you are asked Replace your edited template? ("Your changes in the code editor will be replaced by this template.") and answer Replace or Cancel. The templates in the library are published by Oxify; you cannot add your own to it.

Product List Widgets

Open the widget, go to the Design tab and scroll to the end: the Custom Templates button and a Custom template card with one tab. The editor is always shown, whatever the Enable custom template editors setting says. It uses the same Template library sheet (with Use template) and a template that fails to compile is applied to the editor but not switched on ("Template applied — compile failed; use Compile in the editor").

The template replaces the whole list (title and products). Oxify keeps the widget's custom CSS when a template is active. A widget with no products shows nothing outside the preview.

Props

There is no builtIn prop for this editor.

Each products entry has: id, title, productUrl ("#" in the preview), imageUrl, buttonText, hasMultipleVariants, variantOptions (array of name, values, selectedValue, onChange(value); undefined for single-variant products), isAddDisabled (true when the chosen variant is sold out; the button text is then "Sold out"), isLoading, onAddToCart(), priceHtml, compareAtPriceHtml, showCompareAtPrice, reviews (node), vendorText, showVendor, savingsHtml, savingsPosition, cardWidthVar, and style objects sliderCardStyleVars, gridSliderButtonStyleVars, containerStyleVars, imageStyleVars, cardStyleVars, titleStyleVars, priceStyleVars, originalPriceStyleVars, buttonStyleVars, savingsStyleVars, spotlightImageStyleVars, spotlightAddButtonStyleVars, spotlightTitleStyleVars, vendorStyleVars.