``` `timer` * **Type**: `string` * **Description**: The current timer value formatted as a string * **Usage**: Display countdown timer in custom announcement implementations ```

Time remaining: {props.timer}

``` `shouldUseTimer` * **Type**: `boolean` * **Description**: Indicates whether the timer functionality is enabled for this announcement * **Usage**: Conditionally render timer-related content and controls ```

{props.shouldUseTimer && ( {props.timer} )}

``` `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 ```

{!props.isTimerExpiredAndShouldHide && (

{props.timer}

)}

``` ## 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 ```

``` `milestonesCompleted` * **Type**: `number` * **Description**: The number of milestones that have been completed * **Usage**: Display completion count or calculate completion percentage ```

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

``` `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; conditionsMet: boolean; }[] ``` * **Description**: Array of triggered reward rules that are currently enabled * **Usage**: Display available rewards, their titles, descriptions, and whether each rule's conditions have been met * **Properties**: * `id`: Unique identifier for the reward rule * `title`: Title of the triggered reward rule * `description`: Description of the reward rule * `conditionsMet`: Whether the rule's conditions are currently satisfied by the cart. Use this to build "you've unlocked X" vs "spend \$Y more to unlock X" UX patterns ```

{props.rules.map((rule) => (

{rule.title}

{rule.conditionsMet ? "Reward unlocked!" : rule.description}

))}

``` `showSection` * **Type**: `boolean` * **Description**: Indicates whether the triggered rewards section should be displayed * **Usage**: Control the visibility of the entire triggered rewards module ```

{props.showSection && (

Available Rewards...

)}

``` `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 ``` ``` ## 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](#available-props-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:** Enabling the *Product Tile* template will override all other templates in this module, including **Variant template**, **Properties template**, **Bundle template**, and **Price template**.\ If you want to use custom code in any of those templates, you ***must*** *turn off the Product Tile template.*

`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) => 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` * **Type**: `CartItem` (Refer to the `CartItem` [type below](#cartitem-object-properties)) * **Description**: Raw cart item data containing all information ### **Available Props - Variant template**

`item` * **Type**: `CartItem` (Refer to the `CartItem` [type below](#cartitem-object-properties)) * **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 | 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 ```

``` `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 ``` {props.altText}

``` `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 ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **Type**: `string | null` (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 ``` ``` `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 ```

```

`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

Shopping Cart ({props.cartQuantity})

{rule.title}

Available Rewards...

{props.productTitle}