Props: upsells, add-ons, notes, discounts, badges and empty cart

Conventions are the same as in the first props page: StyleVars props are style objects, builtIn props are Oxify's own nodes, isPreview is true in the Cart Editor preview.

Upsells

Custom template tab

The same template is used for the side panel. When the template is Active and there are no products (and no loading), nothing is shown.

Each products entry has: id, title, productUrl, imageUrl, priceHtml, compareAtPriceHtml, showCompareAtPrice, buttonText, isLoading, onAddToCart() (adds, or opens the variant sheet), reviews (node), vendorText, showVendor, savingsHtml, savingsPosition ("top_of_card" or "alongside_pricing"), and style objects containerStyleVars, imageStyleVars, titleStyleVars, priceStyleVars, originalPriceStyleVars, buttonStyleVars, savingsStyleVars, sliderCardStyleVars, gridSliderButtonStyleVars, cardWidthVar (string), spotlightImageStyleVars, spotlightAddButtonStyleVars, spotlightTitleStyleVars, vendorStyleVars.

Bottom sheet tab (also used by Upsells with Discount)

imageUrl, title, productUrl, variantTitle, priceHtml, originalPriceHtml (empty when none), showCompareAtPrice, hasDiscount, options (array of name, values, selectedValue, onChange(value)), buttonText, isAddToCartLoading, isOutOfStock, onAddToCart(), onClose(), buttonStyleVars, builtInBottomSheetContent.

Upsells with Discount

Props: isPreview, shopLocale, moneyFormat, styles, titleHtml, titleStyleVars, products, showSkeleton (always false), arrowColor, containerStyleVars (backgroundColor and color), carouselItemWidth ("100%"), carouselPadding ("0px 16px"), onCarouselPrevious, onCarouselNext, builtInUpsellDiscount. With no products, nothing is shown.

Each products entry has: id (product id and offer id joined by a dash), title, productUrl, imageUrl, buttonText, isLoading, onAddToCart(), reviews (node), showOriginalPrice (always true), priceHtml (discounted), originalPriceHtml, saveTextHtml, savingsAmount (number, cents), discountType ("PERCENTAGE" or "AMOUNT_OFF"), discountValue (number), and style objects containerStyleVars, imageStyleVars, titleStyleVars, priceStyleVars, originalPriceStyleVars, buttonStyleVars, savingsStyleVars. On this module the style objects hold normal CSS properties (such as fontSize), not CSS variables.

Add Ons

Add-ons tab

isPreview, moneyFormat, styles, items, autoAddInProgress (boolean, true while default add-ons are being added; block the switches), builtInAddOns. With no items, nothing is shown.

Each items entry has: id, rowKey, selectedProduct (object), shouldIncludeInRewards, isEnabledByDefault, imageUrl, titleHtml, subtitleHtml, priceHtml, hasVariantSelector, variantOptions (array of id, label, price, image, available), imageStyleVars, titleStyleVars, subtitleStyleVars, priceStyleVars, switchStyleVars, and:

• toggle: state ("enabled", "disabled" or "loading"), onEnable(), onDisable().
• variantSelector: isActive, selectedVariantId, variantOptions, onVariantChange(variantId).

Only show a variant dropdown when variantSelector.isActive is true.

Loading skeleton tab

styles, skeletonCount, imageStyleVars, builtInAddOnsSkeleton. It shows only on the live storefront while add-ons load, never in the preview.

Additional Notes

isPreview, isExpanded, toggleCollapsible(), notesTitle (node), chevronIcon (node), isLoading (true while a typed note is being saved), cartNote (string), handleCartNoteChange(value), notesPlaceholder, titleStyleVars, iconStyleVars, expanderStyleVars, builtInNotes.

Split Payments

isPreview, containerStyleVars, titleStyleVars, builtInSplitPayments, and options: an array of title (node), titleHtml (string), quantity (string), installmentAmount (formatted string), imageUrl, rowStyleVars, titleStyleVars. The {{INSTALLMENTS}} and {{SPLIT_PAYMENT}} tokens are already replaced.

Discount Codes

Basic input

isPreview, discountCodeInput (string), setDiscountCodeInput(value), onApply(), handleSubmit(event), indicator ("idle", "validating" or "invalid"), showInvalidCross (true when invalid), placeholder, buttonText, applyButtonStyleVars, builtInBasic.

Advanced banner

isPreview, icon (node), iconColor, iconSize (strings), title, subtitle (strings), offersCount (number), offersCountText (node), containerStyleVars, titleStyleVars, subtitleStyleVars, countStyleVars, onOpen (optional function), builtInAdvancedOuter. The banner is visual only; Oxify's wrapper opens the sheet.

Advanced sheet

isPreview, headerTitle, backIcon (node), onClose(), placeholder, buttonText, inputValue, setInputValue(value), onApplyTyped(), isApplying, showError (booleans), errorText, availableCouponsTitle, coupons (array of couponCode, description (node), isApplied, applyButtonText, onApply()), builtInAdvancedBottomSheetContent.

Trust Badges

isPreview, showBadge (boolean), mode ("list" or "single"), badges (array of imageUrl), badgeUrl, iconWidth (number, default 40), listStyleVars, builtInTrustBadges, fileUrl, selectedPredefinedTrustBadgeIconUrl, listOfSelectedTrustBadgeIconsUrls (string[]), styles.

Empty Cart

Empty state

isPreview, titleText, descriptionText, showButton (boolean), buttonText, buttonHref, buttonAction ("open_link" or "close_cart"), onButtonClick(), titleStyleVars, descriptionStyleVars, buttonStyle, builtInEmptyShell.

Recommendations

isPreview, recommendationsTitle (node), titleStyleVars, arrowColor (default "#000"), carouselItemWidth ("100%"), carouselPadding ("0px 4px"), onCarouselPrevious(), onCarouselNext(), builtInRecommendations, and products: an array of id, imageUrl, productUrl, title, priceHtml, compareAtPriceHtml, buttonText, isLoading, onAdd(), styleVars, imageStyleVars, titleStyleVars, originalPriceStyleVars, priceStyleVars, buttonStyleVars. Oxify's variant sheet for these products is not part of the template.