``` -------------------------------- ### Display Pre-rendered Cart Title (React) Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart This example illustrates how to display a pre-rendered cart title component using the `titleComponent` prop. This component includes built-in styling and translation support, ensuring a consistent cart title display. ```jsx

{props.titleComponent}

``` -------------------------------- ### Example CSS Hiding Express Buttons Source: https://aftersell.mintlify.app/upcart/express_payment_buttons_not_clickable_in_upcart This CSS rule demonstrates how a theme might unintentionally hide express checkout buttons. If your buttons are not appearing, review your theme's CSS for similar rules that might be disabling them, particularly within the Upcart drawer. ```css .additional-checkout-buttons { display: none !important; } ``` -------------------------------- ### Addon Product Data Structure Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart Defines the complete addon product information, including product details, variant pricing, and image data. This structure is used to display addon products with all necessary information. ```typescript { product: { id: number; title: string; description: string; }; variant: { id: number; price: number; compare_at_price: number | null; }; image: { src: string; alt: string; }; } ``` -------------------------------- ### Customize Arrow Color with Hex Code (CSS) Source: https://aftersell.mintlify.app/upcart/change_the_upsell_arrow_color This example demonstrates how to customize the upsell carousel arrow color using a hex code. The `border-color` property is updated with a specific hex value, ensuring brand consistency. The `!important` flag overrides default styles. ```css border-color: #00bcd4 !important; ``` -------------------------------- ### Product Tile Template Props - Data Types and Descriptions Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart This section details the various props available for the Product Tile template. Each prop represents a piece of information about the product, such as its title, price, image, and quantity, along with their expected data types and a brief explanation of their purpose. ```typescript title: string; variant: React.ReactNode; properties: React.ReactNode; bundle: React.ReactNode; compareAtPrice: string | undefined; price: string; savings: string | undefined; imageUrl: string | undefined; productUrl: string | undefined; quantity: number; showQuantitySelector: boolean; discountCodes: string[] | undefined; subscription: { 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; }; ``` -------------------------------- ### Style Cart Summary Rows in Upcart (CSS) Source: https://aftersell.mintlify.app/upcart/add_an_end_total_line_above_the_checkout_button This CSS code provides styling for the cart summary rows, ensuring they are displayed as a flex container with items justified between the start and end. This is intended to be added to Upcart's Custom CSS settings. ```css .upcart-custom-cart-summary__row { display: flex; flex-direction: row; justify-content: space-between; } ``` -------------------------------- ### Advanced Timer Configuration with JavaScript (Before Load) Source: https://aftersell.mintlify.app/upcart/announcements_module This JavaScript code snippet shows how to customize the countdown timer using the `upcartOnCartLoaded` function. This function is executed when the cart is loaded, allowing for dynamic timer configurations. Place this code in the 'Scripts (Before Load)' section, not the Custom HTML section, due to security restrictions. ```javascript ``` -------------------------------- ### Style Default Cart Elements with CSS Source: https://aftersell.mintlify.app/upcart/custom_css This snippet demonstrates how to apply CSS rules to default cart elements within the Upcart cart drawer. It uses a safe selector to prevent unintended styling of the entire storefront. The example targets `h3` elements within the `.upcart-cart` container. ```css .upcart-cart h3 { font-size: 20px; } ``` -------------------------------- ### Using Public CSS Selectors in Upcart V2 Source: https://aftersell.mintlify.app/upcart/upcart_css_selector_library_v2 Demonstrates the correct way to use public CSS selectors for styling Upcart V2 elements. Public selectors are stable and intended for customization. Avoid overriding internal selectors or using overly specific deep selectors. ```css /* ✅ Correct usage */ .upcart-public-header { font-size: 18px; font-weight: bold; } ``` ```css /* ❌ Avoid this */ .upcart-internal-header { font-size: 18px; font-weight: bold; } /* ❌ Avoid this */ .upcart-public-upsell div a { font-size: 18px; font-weight: bold; } ``` -------------------------------- ### Automatically Open Upcart on Shopify Cart Page (JavaScript) Source: https://aftersell.mintlify.app/upcart/preventing_reward_exploits_and_automatically_open_upcart_on_shopify_cart_page This script ensures that the Upcart drawer automatically opens when a customer navigates to the Shopify cart page. It leverages the `upcartOnCartLoaded` callback to detect the cart page and trigger the `upcartOpenCart` function. This method is useful for guiding customers towards the Upcart experience. ```javascript var cartWasOpened = false; upcartOnCartLoaded = (cart) => { if (document.location.pathname == "/cart") { upcartOpenCart(); cartWasOpened = true; } } ``` -------------------------------- ### Change Upsell Title Color with CSS Source: https://aftersell.mintlify.app/upcart/getting_started_with_upcart_customizations This CSS code snippet targets the upsell title element in the cart and modifies its color, font size, font style, and text alignment. It uses the '!important' flag to ensure the styles are applied. This is useful for branding or highlighting specific elements within the cart. ```css .upcart-upsells-title { color: #C20075 !important; font-size: 25px; font-style: italic; text-align: center; } ``` -------------------------------- ### Display Product Image - React JSX Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart Renders the product image using the 'imageUrl' prop. It includes 'altText' for accessibility. This snippet is useful for custom upsell implementations and handles undefined 'imageUrl' gracefully. ```jsx {props.altText}

``` -------------------------------- ### Support Multiple Countries in JavaScript Source: https://aftersell.mintlify.app/upcart/hide_the_rewards_bar_for_specific_countries This JavaScript code snippet demonstrates how to modify the country check to support multiple countries. Instead of checking for a single country, it uses an array and the `includes()` method to determine if the customer's country is in the allowed list. This is an extension of the previous rewards bar hiding examples. ```javascript if (["US", "CA", "GB"].includes(country)) { ``` -------------------------------- ### Bundle Expansion Control Functions Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart Provides functions and state variables to manage the expansion and collapse of bundle details. This includes text for 'show details' and 'hide details', a boolean for the current expanded state, and a function to toggle this state. ```typescript let isExpanded: boolean = false; const toggleCollapsible: () => void = () => { isExpanded = !isExpanded; console.log(`Bundle details are now ${isExpanded ? 'expanded' : 'collapsed'}`); }; const showDetailsText: string = 'Show Details'; const hideDetailsText: string = 'Hide Details'; // Usage example: // if (isExpanded) { // console.log(hideDetailsText); // toggleCollapsible(); // } ``` -------------------------------- ### Update Cart Count Display (JavaScript) Source: https://aftersell.mintlify.app/upcart/cart_icon_quantity_counter_not_updating This script updates the cart item count displayed on the cart icon. It uses the `upcartOnCartLoaded` event to get the current cart item count and sets the inner text of a specified element to this count. Ensure you replace the placeholder selector with your theme's actual cart icon class. ```javascript ``` -------------------------------- ### Trigger Upcart Drawer on Add to Cart in Replo Source: https://aftersell.mintlify.app/upcart/upcart_x_replo_landing_page_builder This JavaScript snippet is used within Replo's 'Run JavaScript' interaction to notify Upcart when a product is added to the cart. It ensures the Upcart drawer opens immediately, preventing a redirect to the Shopify cart page. This function is part of Upcart's public API and requires no additional installation. ```javascript window.upcartRegisterAddToCart(); ``` -------------------------------- ### Toggle Control State and Handlers Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart Represents the state and control handlers for enabling or disabling an addon. It supports three states: 'enabled', 'disabled', and 'loading', and provides functions to manage these states. ```typescript { state: 'enabled' | 'disabled' | 'loading'; handleEnable: () => void; handleDisable: () => void; } | null ``` -------------------------------- ### Subscription Information Source: https://aftersell.mintlify.app/upcart/setting_up_a_custom_template_in_upcart Details subscription or selling plan information, including pricing and plan specifics. ```APIDOC ## Subscription Information ### Description This section provides details about subscription plans associated with products, including pricing tiers and plan configurations. ### Parameters #### Request Body - **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 ### Response (No specific success response defined for this section, typically part of a larger cart or product object.) ``` -------------------------------- ### Add Custom HTML Content to Upcart Cart Drawer Source: https://aftersell.mintlify.app/upcart/getting_started_with_upcart_customizations Use HTML to insert static content such as text, banners, or buttons into various locations within the Upcart cart drawer. Common use cases include adding custom messages, legal disclaimers, or highlighting shipping information. This code snippet demonstrates basic HTML for centered, bold text. ```html

Thanks for shopping with us!

```