Skip to main content

Setting up custom template in Upcart

This article outlines the key props available for customizing Upcart templates, helping you personalize your cart experience while maintaining core functionality.

Updated this week

⚠️ Important Notice

Custom templates require advanced technical knowledge of HTML, CSS, JavaScript, and React. Please ensure you have sufficient development expertise or access to a qualified Shopify developer before proceeding. Our support team will not provide assistance with custom template development, debugging, or troubleshooting. Technical questions should be directed to a Shopify expert or qualified developer.

General Section

Header

The Header module allows you to customize the cart header with your own design while maintaining essential cart functionality like displaying item count and providing a close button.

Available Props - Full template

cartQuantity

  • Type: string

  • Description: The current number of items in the cart, formatted as a string

  • Usage: Display the cart item count in your custom header design

<h2>Shopping Cart ({props.cartQuantity})</h2>

closeHandler

  • Type: () => void

  • Description: A callback function that closes the cart when triggered

  • Usage: Attach to buttons, icons, or other interactive elements to close the cart

<button
  onClick={props.closeHandler}
  aria-label="Close cart"
>×</button>

titleComponent

  • Type: React.ReactElement | null

  • Description: A pre-rendered title component for the cart header that includes proper styling and translations

  • Usage: Display the cart title based on your cart settings configuration

<div>{props.titleComponent}</div>

Body Section

Announcements

The Announcements module allows you to customize announcement displays with your own design while maintaining essential announcement functionality like timer controls and conditional visibility.

Available Props - Full template

announcementTemplate

  • Type: string

  • Description: The HTML content for the announcement message

  • Usage: Display the announcement message in your custom implementations

<div dangerouslySetInnerHTML={{ __html: props.announcementTemplate }} />

timer

  • Type: string

  • Description: The current timer value formatted as a string

  • Usage: Display countdown timer in custom announcement implementations

<div>Time remaining: {props.timer}</div>

shouldUseTimer

  • Type: boolean

  • Description: Indicates whether the timer functionality is enabled for this announcement

  • Usage: Conditionally render timer-related content and controls

<div>
  {props.shouldUseTimer && (
    <span>{props.timer}</span> 
  )}
</div>

isTimerExpiredAndShouldHide

  • Type: boolean

  • Description: Indicates if the timer has expired and the announcement should be hidden

  • Usage: Control the visibility of the entire announcement based on timer state

<div>
  {!props.isTimerExpiredAndShouldHide && (
    <div>{props.timer}</div>
  )}
</div>

Tiered Rewards

The Rewards module allows you to customize reward progress displays with your own design while maintaining essential rewards functionality like milestone tracking, progress visualization, and reward messaging.

Available Props - Full template

rewardsMessageHtml

  • Type: string

  • Description: The HTML content for the rewards message

  • Usage: Display the rewards message with rich formatting in custom implementations

<div dangerouslySetInnerHTML={{ __html: props.rewardsMessageHtml }} />

milestonesCompleted

  • Type: number

  • Description: The number of milestones that have been completed

  • Usage: Display completion count or calculate completion percentage

<div>
  {Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete
</div>

milestonesData

  • Type: 

    {
      milestonesToRender: {
        id: string;
        label: string;
        icon: React.ReactElement;
        isCompleted: boolean;
        positionPercent: number;
      }[];
      progressPercent: number;
      showMilestones: boolean;
      settings: {
        iconContainerSize: string;
        iconAlignment: string;
        labelAlignment: string;
        hideLabel: boolean;
      };
    }

  • Description: Complete milestone configuration and progress data for the rewards system

  • Usage: Access milestone information, progress percentage, and display settings

  • Properties:

    • milestonesToRender: Array of milestone objects with completion status and positioning

    • progressPercent: Current progress as a percentage (0-100)

    • showMilestones: Whether to display milestone markers

    • settings: Visual configuration for milestone display

Triggered Rewards

The Triggered Rewards module allows you to customize triggered reward rules displays with your own design while maintaining essential functionality like rule management, section visibility controls, and reward presentation.

Available Props - Full template

rules

  • Type:

    {
      id: string;
      title: string;
      description: string;
    }[]

  • Description: Array of triggered reward rules that are currently enabled

  • Usage: Display available rewards, their titles, and descriptions in custom view

  • Properties:

    • id: Unique identifier for the reward rule

    • title: Title of the triggered reward rule

    • description: Description of the reward rule

showSection

  • Type: boolean

  • Description: Indicates whether the triggered rewards section should be displayed

  • Usage: Control the visibility of the entire triggered rewards module

<div>
  {props.showSection && (
    <div>
      <h2>Available Rewards...</h2>
    </div>
  )}
</div>

onToggleSection

  • Type: () => void

  • Description: A callback function that toggles the visibility state of the triggered rewards section

  • Usage: Attach to buttons or interactive elements to allow users to show/hide the rewards section

<button type="button" onClick={props.onToggleSection}>
  {props.showSection ? "Hide Rewards" : "Show Available Rewards"}
</button>

Recommendations

The Recommendation module allows you to customize upsell product displays with your own design while maintaining essential e-commerce functionality like variant selection, add-to-cart actions, and product information display.

Available Props - Recommendation tile template

The recommendation tile template shares the same prop interface as the upsell tile template in the Upsells module. All available props, types, and usage examples are documented in the Upsells Module section below.

Cart Items

The Cart Items module allows you to customize cart item displays with your own design while maintaining essential e-commerce functionality. This module provides multiple template types, each with their own specific props for different aspects of cart item display.

Available Props - Product tile template

Note: Turning on this template will override ALL other templates (Properties template, bundle template, ...etc) in this module.

title

  • Type: string

  • Description: The product title/name

  • Usage: Display the main product name in cart items

variant

  • Type: React.ReactNode

  • Description: Pre-rendered variant information component

  • Usage: Display variant details as a React component

properties

  • Type: React.ReactNode

  • Description: Pre-rendered product properties component

  • Usage: Display product properties and subscription info as a React component

bundle

  • Type: React.ReactNode

  • Description: Pre-rendered bundle details component

  • Usage: Display bundle information as a React component

compareAtPrice

  • Type: string | undefined

  • Description: Formatted compare-at price (original price)

  • Usage: Display original price for sale items

price

  • Type: string

  • Description: Formatted current price

  • Usage: Display the current item price

savings

  • Type: string | undefined

  • Description: Formatted savings amount

  • Usage: Display how much the customer saves

imageUrl

  • Type: string | undefined

  • Description: Product image URL

  • Usage: Display product image

productUrl

  • Type: string | undefined

  • Description: Product page URL

  • Usage: Link to product detail page

quantity

  • Type: number

  • Description: Current item quantity in cart

  • Usage: Display and manage item quantity

showQuantitySelector

  • Type: boolean

  • Description: Whether to show quantity controls

  • Usage: Conditionally display quantity selector

discountCodes

  • Type: string[] | undefined

  • Description: Array of applied discount codes for this item

  • Usage: Display item-specific discounts

subscription

  • Type:

    {
      subscriptionUpgradeData: {
        buttonText: string;
        defaultSellingPlanId: number;
      } | null;
      sellingPlansData: {
        sellingPlanGroups: {
          name: string;
          selling_plans: {
            id: number;
            name: string;
          }[];
        }[] | null;
        activeSellingPlanId: string;
        oneTimePurchaseText: string | null;
      } | null;
      upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void;
      changeSellingPlan: (item: CartItem, value: string) => void;
      getSellingPlanGroupText: (groupName: string, planName: string) => string;
    }

  • Description: Complete subscription management object with upgrade data, selling plans, and handler functions

  • Usage: Manage subscription functionality

  • The subscription object contains:

    • subscriptionUpgradeData: Upgrade information (null if no upgrade available)

      • buttonText: Text for the upgrade button

      • defaultSellingPlanId: ID of the default selling plan for upgrades

    • sellingPlansData: Available selling plan options (null if no plans)

      • sellingPlanGroups: Array of plan groups with their selling plans

      • activeSellingPlanId: Currently selected selling plan ID

      • oneTimePurchaseText: Text for one-time purchase option (null if not available)

    • upgradeSellingPlan: Function to upgrade to a specific selling plan

    • changeSellingPlan: Function to change the current selling plan

    • getSellingPlanGroupText: Utility function to format selling plan display text

onIncrease

  • Type: () => void

  • Description: Function to increase item quantity

  • Usage: Handle quantity increase actions

onDecrease

  • Type: () => void

  • Description: Function to decrease item quantity

  • Usage: Handle quantity decrease actions

onDeleteProduct

  • Type: () => void

  • Description: Function to remove item from cart

  • Usage: Handle item removal

onQuantityChange

  • Type: (quantity: string) => void

  • Description: Function to handle direct quantity input

  • Usage: Handle manual quantity changes

handleInputChange

  • Type: (e: React.ChangeEvent<HTMLInputElement>) => void

  • Description: Input change handler for quantity field

  • Usage: Handle quantity input field changes

replaceItemWithVariant

  • Type: (variantId: string) => Promise<{ success: boolean }>

  • Description: Function to replace item with different variant

  • Usage: Handle variant switching

isLoading

  • Type: boolean

  • Description: Loading state for cart operations

  • Usage: Show loading indicators

loadingOperation

  • Type: 'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined

  • Description: Specific operation currently loading

  • Usage: Show operation-specific loading states

setLoadingOperation

  • Type: (op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void

  • Description: Function to set loading operation state

  • Usage: Manage loading states for different operations

rawItem

  • Description: Raw cart item data containing all information

Available Props - Variant template

item

  • Description: Raw cart item data containing variant information

  • Usage: Access variant details from the cart item

Available Props - Properties template

productProperties

  • Type: { key: string; value: string; isUrl?: boolean; }[]

  • Description: Array of product properties (custom fields, line item properties)

subscriptionLabel

  • Type: string | undefined

  • Description: Label for subscription information

Available Props - Bundle template

getSizedImageUrl

  • Type: getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string

  • Description: Utility function to get properly sized image URLs

item

  • Type:

    {
      itemComponents: {
        quantity: number;
        image: {
          url: string;
          height: number | null;
          width: number | null;
          alt: string;
        };
        product: {
          title: string;
          has_only_default_variant: boolean;
        };
        variantTitle: string;
      }  
      variantTitle: string | undefined;
      hasComponents: boolean;
    }

  • Description: Bundle item information including components

showDetailsText

  • Type: string | undefined

  • Description: Text for "show details" action

  • Usage: Display expand button text

hideDetailsText

  • Type: string | undefined

  • Description: Text for "hide details" action

isExpanded

  • Type: boolean

  • Description: Whether bundle details are expanded

toggleCollapsible

  • Type: () => void

  • Description: Function to toggle bundle details visibility

  • Usage: Handle expand/collapse actions

chevronDownIconComponent

  • Type: React.ReactElement

  • Description: Pre-rendered chevron icon for expand/collapse

  • Usage: Display consistent expand/collapse indicator

Available Props - Price template

compareAtPrice

  • Type: string | undefined

  • Description: Formatted compare-at price (original price)

  • Usage: Display original price for sale items

price

  • Type: string

  • Description: Formatted current price

  • Usage: Display the current item price

savings

  • Type: string | undefined

  • Description: Formatted savings amount

  • Usage: Display how much the customer saves

CartItem Object Properties

The CartItem object contains all the detailed information about a cart line item. This object is available as props.rawItem in the Product Tile template and props.item in the Variant template.

Core Identification

  • key (string) - Unique identifier for this cart item.

  • id (number) - Variant ID (legacy field, use variant_id instead)

  • variant_id (number) - The Shopify variant ID for this item

  • product_id (number) - The Shopify product ID

  • lineIdxFrom1 (number) - 1-based index of this item in the original cart before modifications

Product Information

  • title (string) - The line item title (usually variant title)

  • product_title (string) - The main product title

  • handle (string) - Product URL handle (e.g., "camp-stool")

  • vendor (string) - Product vendor/brand name

  • product_type (string) - Product category/type for tax purposes

  • sku (string) - Stock Keeping Unit identifier

  • product_description (string) - Full product description

  • product_has_only_default_variant (boolean) - Whether the product has only one variant

Pricing (All prices in cents)

  • quantity (number) - Number of this item in the cart

  • price (number) - Unit price before discounts

  • original_price (number) - Same as price

  • discounted_price (number) - Unit price after product-level discounts

  • compare_at_price (number | null) - Compare-at price (MSRP). Note: This field is added by Upcart, not provided by Shopify's cart API

  • final_line_price (number) - Total price after product-level discounts (quantity × discounted_price)

  • original_line_price (number) - Total price before discounts (quantity × price)

  • line_price (number) - Total price after all discounts

  • final_price (number) - Deprecated - Unit price after product discounts (doesn't account for quantity)

  • total_discount (number) - Same as line_level_total_discount

  • line_level_total_discount (number) - Total discount amount applied to this line item

Media & URLs

  • image (string) - Primary product image URL

  • url (string) - Relative URL path to the product page (e.g., "/products/camp-stool?variant=42789611372803")

  • featured_image (object | null) - Featured image details:

    • alt (string) - Image alt text

    • aspect_ratio (number) - Image aspect ratio

    • height (number) - Image height in pixels

    • url (string) - Image URL

    • width (number) - Image width in pixels

Variants & Options

  • variant_title (string | null) - Variant title (e.g., "Large / Red")

  • variant_options (string[]) - Array of variant option values

  • options_with_values (Array) - Detailed option information:

    • name (string) - Option name (e.g., "Size")

    • value (string) - Option value (e.g., "Large")

  • untranslated_product_title (string | undefined) - Original product title before translation (cart mutation responses only)

  • untranslated_variant_title (string | undefined) - Original variant title before translation (cart mutation responses only)

Custom Properties & Metadata

  • properties (Record<string, any> | null) - Custom line item properties. Properties with keys starting with "" or "" are typically hidden from customers

  • gift_card (boolean) - Whether this item is a gift card

  • taxable (boolean) - Whether this item is subject to tax

  • requires_shipping (boolean) - Whether this item requires shipping

  • grams (number) - Item weight in grams

Discounts & Promotions

  • discounts (Array) - Simplified discount information:

    • amount (number) - Discount amount in cents

    • title (string) - Discount title/name

  • line_level_discount_allocations (Array) - Detailed discount allocation information:

    • amount (number) - Discount amount in cents

    • discount_application (object) - Full discount application details:

      • allocation_method (string) - How discount is allocated

      • created_at (string) - When discount was created

      • description (string | null) - Discount description

      • key (string) - Discount key identifier

      • target_selection (string) - What the discount targets

      • target_type (string) - Type of target

      • title (string) - Discount title

      • total_allocated_amount (number) - Total amount allocated

      • type ('discount_code' | '') - Discount type (empty string for automatic discounts)

      • value (string) - Discount value

      • value_type (string) - How value is applied

Bundle Products

  • has_components (boolean | undefined) - Whether this item is a bundle containing other products (GET cart responses only)

  • item_components (Array | null | undefined) - Bundle component details:

    • quantity (number) - Quantity of this component

    • image (object) - Component image:

      • url (string) - Image URL

      • height (number | null) - Image height

      • width (number | null) - Image width

      • alt (string) - Alt text

  • product (object) - Component product info:

    • title (string) - Product title

    • has_only_default_variant (boolean) - Whether product has only default variant

  • variantTitle (string) - Component variant title

Business Rules

  • quantity_rule (object | undefined) - Quantity constraints (GET cart responses only):

    • min (number) - Minimum allowed quantity

    • max (number | null) - Maximum allowed quantity (null = no limit)

    • increment (number) - Quantity increment step

Subscription Information

  • selling_plan_allocation (object | undefined) - Subscription/selling plan details:

    • price (number) - Subscription price in cents

    • compare_at_price (number | null) - Subscription compare-at price

    • per_delivery_price (number) - Price per delivery

    • selling_plan (object) - Selling plan details:

      • id (number) - Selling plan ID

      • name (string) - Plan name

      • description (string) - Plan description

      • options (Array) - Plan options:

        • name (string) - Option name

        • position (number) - Option position

        • value (string) - Option value

      • recurring_deliveries (boolean) - Whether plan has recurring deliveries

Integration Metadata

  • __appIntegrated (object | undefined) - Third-party app integration data:

    • app ('stay.ai') - Integrated app identifier

    • bundleRole ('parent' | 'child') - Role in bundle structure

Upsells

The Upsells module allows you to customize upsell product displays with your own design while maintaining essential e-commerce functionality like variant selection, add-to-cart actions, and product information display.

Available Props - Upsell tile template

itemUrl

  • Type: string

  • Description: The URL of the product page

  • Usage: Create links to the product detail page for enhanced user navigation

<a href={props.itemUrl} className="product-link">
  <img src={props.imageUrl} alt={props.altText} />
</a>

imageUrl

  • Type: string | undefined

  • Description: The URL of the product image

  • Usage: Display product images in custom upsell implementations

  • Fallback: Handle undefined values gracefully with placeholder images

description

  • Type: string

  • Description: The description of product

  • Usage: Display product description in custom upsell implementations

altText

  • Type: string

  • Description: Alt text for the product image for accessibility

  • Usage: Provide screen reader support and improve accessibility compliance

<img 
  src={props.imageUrl} 
  alt={props.altText}
  className="product-image"
/>

productId

  • Type: string

  • Description: The unique identifier for the product

  • Usage: Track products, implement analytics, or use in add-to-cart functionality

productTitle

  • Type: string

  • Description: The title/name of the product

  • Usage: Display the product name in custom upsell implementations

<div>
  <h3>{props.productTitle}</h3>
</div>

oldPrice & newPrice

  • Type: string | undefined (oldPrice), string (newPrice)

  • Description: Formatted compare-at price and current price

  • Usage: Display pricing information with sale indicators

isSingleVariant

  • Type: boolean

  • Description: Indicates if the product has only one variant

  • Usage: Conditionally render variant selection UI elements

productOptions

  • Type: { name: string; position: "1" | "2" | "3"; values: string[]; }[]

  • Description: Complete product option configuration including all available choices

  • Usage: Access detailed product option information for advanced variant selection UI

variantOptions

  • Type: { label: string; value: string }[]

  • Description: Available variant options for the product

  • Usage: Create variant selection dropdowns or buttons

  • Structure: Each option contains a display label and unique value identifier

selectedVariantId & selectedVariantLabel

  • Type: string (selectedVariantId), string | undefined (selectedVariantLabel)

  • Description: Currently selected variant ID and its display label

  • Usage: Track and display the selected variant information

onVariantChange

  • Type: (variantId: string) => void

  • Description: Function to handle variant selection changes

  • Usage: Update the selected variant when user makes a selection

onAddClick

  • Type: (productId: string, variantId?: string) => void

  • Description: Function to handle adding the product to cart

  • Usage: Implement add-to-cart functionality with proper product and variant identification

<button 
  onClick={() => props.onAddClick(props.productId, props.selectedVariantId)}
  disabled={props.addLoading}
>
  {props.addLoading ? 'Adding...' : props.addButtonText}
</button>

rating & reviewCount

  • Type: number | undefined (rating), string | undefined (reviewCount)

  • Description: Product rating and formatted review count text

  • Usage: Display social proof and product quality indicators

addLoading & addButtonText

  • Type: boolean (addLoading), string (addButtonText)

  • Description: Loading state for add-to-cart action and button text

  • Usage: Provide user feedback during cart operations and customize button text

cartItemsCount

  • Type: number

  • Description: The current number of items in the cart

  • Usage: Display cart status or implement cart-based logic

Additional Notes

The Notes module allows you to customize cart note functionality with your own design while maintaining essential note-taking capabilities like expandable sections, text input handling, and loading states.

Available Props - Full template

cartNote

  • Type: string

  • Description: The current cart note content entered by the customer

  • Usage: Display and manage the cart note text in custom implementations

<textarea
  value={props.cartNote}
  ...
/>

notesPlaceholder

  • Type: string

  • Description: Placeholder text for the notes input field

  • Usage: Provide guidance to customers about what to include in their notes

<textarea
  placeholder={props.notesPlaceholder}
  ...
/>

notesTitle

  • Type: string

  • Description: The title/header text for the notes section

  • Usage: Display the section title in custom note implementations

<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />

chevronDownIconComponent

  • Type: React.ReactElement

  • Description: Pre-rendered chevron icon component for expand/collapse functionality

  • Usage: Display consistent expand/collapse indicators in custom implementations

loadingIndicatorComponent

  • Type: React.ReactElement | null

  • Description: Pre-rendered loading indicator component for async operations

  • Usage: Display loading states during note save operations

handleCartNoteChange

  • Type: (newCartNote: string) => void

  • Description: Function to handle cart note content changes

  • Usage: Update the cart note when user modifies the text

isExpanded

  • Type: boolean

  • Description: Indicates whether the notes section is currently expanded

  • Usage: Control the visibility of the notes input area

toggleCollapsible

  • Type: () => void

  • Description: Function to toggle the expanded/collapsed state of the notes section

  • Usage: Attach to buttons or interactive elements to control section visibility

Footer Section

Add-ons

The Addons module allows you to customize addon product displays with your own design while maintaining essential e-commerce functionality like product information display, pricing, toggle controls, and currency formatting.

Available Props - Full template

addonProduct

  • Type:

    {
      product: {
        id: number;
        title: string;
        description: string;
      };
      variant: {
        id: number;
        price: number;
        compare_at_price: number | null;
      };
      image: {
        src: string;
        alt: string;
      };
    }

  • Description: Complete addon product information including product details, variant pricing, and image data

  • Usage: Access all product information needed to display addon products

  • Structure: Contains nested product, variant, and image objects with comprehensive product data

    • Product Object Properties addonProduct.product

      • id: Unique numeric identifier for the product

      • title: Display name of the addon product

      • description: HTML description content of the product

    • Variant Object Properties

      • id: Unique numeric identifier for the variant

      • price: Current price in cents

      • compare_at_price: Original price in cents (null if no comparison price)

    • Image Object Properties

      • src: URL of the product image

      • alt: Alt text for the image (for accessibility)

toggle

  • Type:

    {
      state: 'enabled' | 'disabled' | 'loading';
      handleEnable: () => void;
      handleDisable: () => void;
    } | null

  • Description: Toggle control state and handlers for enabling/disabling the addon

  • Usage: Implement interactive toggle functionality for addon selection

  • States: Three possible states - enabled, disabled, and loading

  • Handlers: Separate functions for enable and disable actions

moneyFormat

  • Type: string

  • Description: The currency format string used for price formatting

  • Usage: Pass to the formatMoney function for consistent currency display

formatMoney

  • Type:

    (options: {
      cents: string | number;
      format?: string;
      shouldRemoveHTML?: boolean;
    }) => string

  • Description: Utility function for formatting currency values

  • Usage: Format prices consistently with store currency settings

  • Parameters: Takes cents value, optional format string, and HTML removal option

Discount Codes

The Discount Code module allows you to customize discount code input functionality with your own design while maintaining essential e-commerce capabilities like code validation, form submission, and user feedback.

Available Props - Full template

indicator

  • Type: 'validating' | 'invalid' | 'none'

  • Description: Current validation state of the discount code input

  • Usage: Display appropriate UI feedback based on validation status

  • States:

    • validating: Code is being processed/validated

    • invalid: Code validation failed

    • none: No validation state (default/idle)

discountCodeInput

  • Type: string

  • Description: Current value of the discount code input field

  • Usage: Display and manage the discount code text entered by the user

<input
  type="text"
  value={props.discountCodeInput}
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}
  ...
/>

discountCodePlaceholder

  • Type: string

  • Description: Placeholder text for the discount code input field

  • Usage: Provide guidance to users about what to enter in the input

discountCodeButtonText

  • Type: string

  • Description: Text to display on the apply/submit button

  • Usage: Customize the button text for discount code submission

setDiscountCodeInput

  • Type: (value: string | ((prev: string) => string)) => void

  • Description: Function to update the discount code input value

  • Usage: Handle user input changes in the discount code field

handleSubmit

  • Type: (e: React.FormEvent<HTMLFormElement>) => void

  • Description: Function to handle form submission for discount code application

  • Usage: Process discount code validation and application

  • Event: Handles form submission events

<form onSubmit={props.handleSubmit} >
  <div className="input-group">
    <input
      type="text"
      value={props.discountCodeInput}
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}
      placeholder={props.discountCodePlaceholder}
    /> 
    <button 
      type="submit"
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}
    >
      {props.discountCodeButtonText}
    </button>
  </div>
</form>

Cart Summary

The Cart Summary module allows you to customize cart summary and discount displays with your own design while maintaining essential e-commerce functionality like discount management, savings calculation, and pricing transparency.

Available Props - Full template

totalSavingsText

  • Type: string

  • Description: Text label for the total savings section

  • Usage: Display the savings label in custom cart summary implementations

discountApplications

  • Type:

    {
      key: string;
      title: string;
      type: 'discount_code' | '';
    }[]

  • Description: Array of applied discount codes and automatic discounts

  • Usage: Display all active discounts with their titles and types

  • Structure: Each discount contains a unique key, display title, and type identifier

cartTotalDiscount

  • Type: number

  • Description: The total discount amount in cents

  • Usage: Access raw discount value for calculations or custom formatting

showCartTotalDiscount

  • Type: boolean

  • Description: Indicates whether the total discount should be displayed

  • Usage: Conditionally render discount information based on settings

formattedCartTotalDiscount

  • Type: string

  • Description: Pre-formatted HTML string of the total discount amount

  • Usage: Display properly formatted discount amount with currency symbols

isRemovingDiscount

  • Type: boolean

  • Description: Indicates if a discount removal operation is in progress

  • Usage: Show loading states during discount removal

handleRemoveDiscount

  • Type: () => Promise<void>

  • Description: Function to handle discount code removal

  • Usage: Remove applied discount codes from the cart

totalCompareAtPrice

  • Type: number

  • Description: Total compare-at price adds up (all items in the cart)

  • Usage: Calculate and display savings or original pricing information

totalAfterAllDiscounts

  • Type: number

  • Description: Final cart total in cents after all discounts are applied

  • Usage: Display the final price customers will pay

originalTotalPrice

  • Type: number

  • Description: Original cart total in cents before any discounts

  • Usage: Show original pricing for transparency and savings calculation

cartItemCount

  • Type: number

  • Description: Total number of items in the cart

  • Usage: Display item count information in cart summaries

Trust Badges

The Trust Badges module allows you to customize trust badge displays with your own design while maintaining essential trust-building functionality like conditional badge visibility and proper image handling.

Available Props - Full template

showBadge

  • Type: boolean

  • Description: Indicates whether the trust badge should be displayed

  • Usage: Control the visibility of trust badges based on module settings

badgeUrl

  • Type: string

  • Description: The URL of the trust badge image to display

  • Usage: Source URL for the trust badge image in custom implementations

Related Articles
Set Up a Free Product Reward Tier in Upcart
Best Practices to Increase Upcart Conversions
Quickstart guide to Upcart
Upcart X Abra Integration
Upcart CSS Selector Library
Did this answer your question?