Props: header, footer, announcements, cart items and rewards

Every prop your template receives for the Design, Announcements, Cart Items and Rewards editors.

Read these as props.name inside your template. Names ending in StyleVars are style objects you pass to style={...}. Props starting with builtIn are ready-made nodes of Oxify's own layout, so you can keep part of the built-in UI. Colors given as hex have no #. Money values named ...Html or formatted strings are already formatted with your store's currency format.

Several tabs share props. isPreview is true inside the Cart Editor preview.

Design

isPreview (boolean), shopLocale (string), cartItemCount (number, items in the cart not counting add-on lines), titleType ("text" or "brand-logo"), brandLogoUrl (string), brandLogoSize (number or string, default 32), titleContent (node, the title with the quantity filled in), titleBackgroundColor, titleTextColor (hex), titleFontSize (string), actualTextAlign ("left", "center" or "right"), closeIconPosition ("left" or "right"), shareEnabled (boolean), onCartClose (function), onShareCart (function), builtInButtonsGroup (node, share and close buttons), builtInHeader (node).

Keep onCartClose wired to a button, or shoppers cannot close the cart from the header.

isPreview, shopLocale, moneyFormat (string), footerBackgroundColor (hex), containerStyleVars, finalTotalPrice, displayOriginalPrice, displaySavings (strings such as "12.34"), displayHasSavings (boolean), isTermsAndConditionBoxChecked (boolean), setIsTermsAndConditionBoxChecked (function), showTermsAndConditionError (boolean), setShowTermsAndConditionError (function).

Nodes you can place in any order: builtInHtmlAboveAddOns, builtInAddOns, builtInAdditionalNotes, builtInDiscountDisplay, builtInDiscountInput, builtInSplitPayments, builtInTerms, builtInSubtotal, builtInHtmlAboveCheckout, builtInCheckoutButton, builtInAcceleratedCheckout, builtInHtmlBelowCheckout, builtInGoodApi, builtInContinueShopping, builtInTrustBadges, and builtInFooter (the whole built-in footer). A node is empty when its module is off. The sticky coupon banner above the footer stays outside your template.

Announcements

Both tabs receive the same props.

Prop	Type	Meaning
`announcementTemplate`	string	The announcement text in the shopper's language, may contain `{{TIMER}}`.
`timer`	string	Start of the countdown, like `"05:00"`.
`shouldUseTimer`	boolean	The text contains `{{TIMER}}`.
`isTimerExpiredAndShouldHide`	boolean	The timer ended and the bar is set to hide.
`type`	string	`"DEFAULT"`, `"CAROUSEL"` or `"MOVING_LINE"`.
`slides`	string[]	Texts of the carousel announcements.
`marqueeSpeed`, `marqueeTextGap`	number	Moving-line settings.
`styles`	object	The module's saved styles.
`shopLocale`, `isPreview`	string, boolean
`containerStyleVars`	object	Style for the bar container.
`hideClassName`	string	`"ia-hide-component"` or an empty string.
`defaultContent`	node or null	The text with a live countdown. Null unless type is DEFAULT.
`builtInAnnouncement`	node	The whole built-in content. Use it for carousel and moving line.
`skeletonHeight`	string	Height for a placeholder.

The Skeleton tab shows while the cart is still loading.

Cart Items

Skeleton

Only isPreview.

Product tile

Prop	Type	Meaning
`title`	string	Product title.
`rawItem`	object	The Shopify cart line.
`imageUrl`, `productUrl`	string	Image and product link.
`quantity`	number
`showQuantitySelector`	boolean	False for free gift lines.
`discountCodes`	string[]	Titles of discounts on this line.
`price`, `compareAtPrice`, `savings`	string or null	Formatted. `compareAtPrice` and `savings` are null when there is none.
`formattedPrice`, `formattedCompareAtPrice`, `savingsLabel`	string or null	Same values as above.
`unitPriceText`	string or null
`styles`, `savingsStyle`	object	Cart Items styles, and the savings text style from Design.
`variant`, `properties`	node	The variant and properties parts (your Variant and Properties templates when active).
`bundle`	null	Always null.
`subscription`	object	See below.
`onIncrease`, `onDecrease`, `onDeleteProduct`	function
`onQuantityChange(value)`, `handleInputChange(event)`	function	Set a typed quantity.
`replaceItemWithVariant(variantId)`	function
`variantSwitcher`	object	See below.
`showVariantSelector`	boolean
`isLoading`, `isDeleteLoading`, `isVariantLoading`, `cartItemLoading`	boolean	Loading states.
`setCartItemLoading(value)`	function
`loadingOperation`	string or undefined	`"increase"`, `"decrease"`, `"inputChange"` or `"remove"`.
`setLoadingOperation(value)`	function
`shopLocale`, `isPreview`	string, boolean
`conversionFactor`	number or null
`builtInProductTile`, `builtInVariant`, `builtInVariantText`, `builtInProperties`, `builtInPrice`, `builtInSubscription`	node	Built-in parts. `builtInSubscription` is null when not shown.
`volume`	object	See Volume tiers.
`builtInVolumeDiscount`	node or null

There is no item prop on this tab; use rawItem.

Variant

item, rawItem (the cart line), styles, variantSwitcher, showVariantSelector, isLoading, isDeleteLoading, isVariantLoading, cartItemLoading, setCartItemLoading, loadingOperation, setLoadingOperation, builtInVariant, builtInVariantSwitcher, builtInVariantText.

variantSwitcher has: isActive, isSingleVariant, fetchingOptions (booleans), selectedVariantId, selectedVariantLabel (strings), variantOptions (array of id, label, available), onVariantChange(variantId) and styles.

Properties

productProperties (array of key, value, isUrl; keys that start with an underscore are left out), subscriptionLabel (string or undefined), styles, builtInProperties.

Price

price, compareAtPrice, savings, formattedPrice, formattedCompareAtPrice, savingsLabel, unitPriceText, styles, savingsStyle, rawItem, discountCodes (string[]), isPreview, builtInPrice.

Volume tiers

isPreview, builtInVolumeDiscount and volume with: isActive (boolean), tiers (only tiers above the current quantity; each has id, minQuantity, discountType, discountValue, optional title and titleHtml), currentQuantity, displayType ("BUTTONS" or "BARS"), styles, onTierClick(minQuantity, tierId).

Subscription (`props.subscription`)

isActive, loading (booleans), subscriptionUpgradeData (buttonText, defaultSellingPlanId, or null), sellingPlansData (activeSellingPlanId, oneTimePurchaseText, sellingPlanGroups with id, name, selling_plans; or null), upgradeSellingPlan(rawItem, planId), changeSellingPlan(rawItem, planId), getSellingPlanGroupText(groupName, planName), styles.

Rewards

Full and Skeleton

Both tabs receive the same props.

Prop	Type	Meaning
`rewardsModule`, `styles`	object	Saved Rewards settings and styles.
`cartTotal`	number	In cents. Counts regular lines only (not free gifts, and add-ons only if included in rewards).
`cartItemCount`	number	Quantity of those same lines.
`conversionRate`	number
`moneyFormat`, `currency`	string	`currency` is the active store currency, default `"USD"`.
`incredibleCartMarketGId`, `shopLocale`	string
`isPreview`	boolean
`barFillPercentage`	number	0 to 100.
`rewardsMessageHtml`	string	The message above the bar (HTML).
`milestones`	array	See below.
`milestonesCompleted`	number
`formatMoney(cents)`	function
`refreshCart`	function	Reloads the cart.
`builtInRewards`	node	The built-in bar.
`style5GridTemplateColumns`	string	For Style 5.
`style5AllAchieved`	boolean	For Style 5.

Each milestones entry has id, isAchieved, leftPosition (string), spacerLeftPosition (string), icon (node), descriptionHtml, rawLeftPositionPercent, previousLeftPositionPercent (numbers), afterAchievingHtml (empty string if not set), style5SegmentFillPercent (number), style5IsActiveSegment, style5IsNextTarget (booleans), style5PriceLabel (string) and reward (the reward's saved settings).

Rewards to be achieved

rewardsModule, styles, freeGiftStyles, cartTotal (cents, whole cart), cartItemCount (whole cart), conversionRate, moneyFormat, incredibleCartMarketGId, shopLocale, isPreview, listOfRewardsToBeAchieved, rewardsToBeAchieved (array of id, imageUrl, titleHtml, descriptionHtml, reward), cardStyleVars, imageStyleVars, titleStyleVars, descriptionStyleVars, carouselItemWidth ("85%", or "100%" with one reward), showArrows (boolean, more than one reward), arrowColor (always "#000"), onCarouselPrevious(), onCarouselNext(), formatMoney(cents), refreshCart, handleRewards(cartData), builtInRewardsToBeAchieved. There is no currency prop here.

Pick Free Gift

rewardsModule, styles, upsellStyles, freeGiftStyles, moneyFormat, shopLocale, isPreview, selectedCount, maxFreeGiftUserCanChoose (numbers), achievedTier (object with rewardSettings, availableProducts, maxSelectable, selectedCount, isFullySelected), isCustomerExcluded (boolean), headerTitleHtml, headerStyleVars, arrowColor, leftArrow, rightArrow (nodes), itemStyleVars, freeText, buttonText, showProgress (boolean, true when shoppers can pick more than one), progressText (like "1 of 2 gifts selected"), progressColor, gifts (array of id, product, title (HTML), imageUrl, originalPriceHtml, freeText, buttonText, isLoading, onSelect()), onSelectGift(product), onSliderPrevious(), onSliderNext(), builtInFreeGiftSelection.

Use onSelect or onSelectGift to add a gift: they keep the multi-variant picker working. In the preview they do nothing. Oxify's variant sheet for gifts is not part of the template.

Added Free Gifts

position ("above" or "below"), giftCount (number), giftLines (array of key and node, a ready cart line), builtInAddedFreeGifts, isPreview, shopLocale. It only renders when at least one gift line is in the cart; Oxify adds no wrapper, title or border of its own.

Props: header, footer, announcements, cart items and rewards

On this page