> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart guide to Upcart

> Learn how to activate Upcart, enable core features, and publish your cart drawer live.

This guide walks you through setting up Upcart with its main modules, from visual customization to activation on your storefront.

Upcart replaces your theme cart drawer visually, but it **does not integrate with your theme's cart drawer or cart page**. The Shopify cart page will still be accessible.

# **Managing Modules**

Each Upcart module can be **easily enabled or disabled**. Simply click on the **Enable/Disable** button in the top-right corner to turn a module on or off at any time. Your changes take effect immediately once saved.

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/e2b1a8cddcd8.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=a6f488f9672f4cf64dfc4c5d5ec824e3" alt="Image" width="1548" height="210" data-path="images/upcart/e2b1a8cddcd8.png" />

# Cart design

When you first open Upcart's Cart Editor, you'll land in the [Design module](/upcart/design_module). Here you can customize the base colors of the drawer to match your store branding.

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/bca4c97e529f.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=2af6af7c01b35a9811b216caa5b8bba1" alt="Image" width="600" data-path="images/upcart/bca4c97e529f.png" />

# Announcements

To display a cart message or countdown timer, go to **Body > [Announcements](/upcart/announcements_module)**.

In the top right corner, switch the toggle to **Active**, or click **Activate** in the orange message shown at the top of the page.

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/c9aace46d388.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=0c522178bdd08db06dab3c6c5e6edf08" alt="Image" width="600" data-path="images/upcart/c9aace46d388.png" />

Enter your message into the **Announcement Text** field and configure the timer if needed.

<img src="https://mintcdn.com/aftersell/44S6gABa85nCHEE3/images/upcart/09a11cb83c74.png?fit=max&auto=format&n=44S6gABa85nCHEE3&q=85&s=3d444904ea6d196ee024a0dcf8c7abd3" alt="Image" width="645" height="679" data-path="images/upcart/09a11cb83c74.png" />

Make sure to use the `{TIMER}` variable for countdowns within your announcement text to ensure proper functionality (e.g., "This offer is only available for {TIMER}.") Avoid copying formatted text directly from third-party tools.

Once you're done, make sure to click **Save** in the top-right corner.

#### Theme-Level Issues

* **CSS or App Conflicts:** Ensure that CSS properties like `display: none;` are not hiding the announcement bar. Also, check that third-party apps are not overriding these settings.
* **Text Visibility:** Confirm the announcement bar text color contrasts with the background and adjust it in your theme settings if necessary.

#### Advanced Debugging Steps

For persistent issues, review browser console errors for script problems affecting the announcement bar and disable third-party apps temporarily to pinpoint conflicts.

# Rewards

To display a progress bar that encourages customers to spend more, enable the Rewards Module.

### **General settings**

Set your branding colors and the message shown after the final reward tier is reached.\
Choose a reward basis:

* **Cart Total**: Tracks total cart value
* **Item Count**: Tracks quantity of items

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/f25d96f7be45.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=c073db5e39223d13386d84cf67caea41" alt="Image" width="600" data-path="images/upcart/f25d96f7be45.png" />

### **Rewards settings** Choose your reward type:

* [**Shipping**](https://help.shopify.com/en/manual/fulfillment/setup/shipping-rates/flat-shipping-rates): Considers applied discounts
* [**Discount**](https://help.shopify.com/en/manual/discounts/discount-types): Ignores discounts
* [**Product**](/upcart/set_up_a_free_product_reward_tier_in_upcart): Adds a product to the cart

Set a minimum threshold to trigger the reward and customize the "Text before achieving" field. You can create up to **four reward tiers**.

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/b203d4c7ac9d.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=9dc503605c9d0d7c316440240db29be9" alt="Image" width="600" data-path="images/upcart/b203d4c7ac9d.png" />

# Upsells

Enable **Use AI Recommended Upsells**, select the **Related** algorithm, and turn on **Smart Variant Matching** to preselect matching product variants based on the cart contents.

<img src="https://mintcdn.com/aftersell/djWVMMNjpCIkZ6mp/images/upcart/e146e4e6c7e8.png?fit=max&auto=format&n=djWVMMNjpCIkZ6mp&q=85&s=c56d0e16752bf7b50e6080b33366809e" alt="Image" width="600" data-path="images/upcart/e146e4e6c7e8.png" />

Customize your section title and the **Add** button label.

<img src="https://mintcdn.com/aftersell/-dxnKm0Mro2whB9j/images/upcart/82aaa5bf2cb3.png?fit=max&auto=format&n=-dxnKm0Mro2whB9j&q=85&s=3c05f0edfa4cef95f2a60fd96f8ede2e" alt="Image" width="600" data-path="images/upcart/82aaa5bf2cb3.png" />

# Add-ons

To show a toggle-based add-on in the footer, you can enable either of these options:

### **Shipping protection**

Select **Shipping Protection** and configure dynamic pricing tiers based on cart value.\
This creates a real product in your Shopify catalog.

<img src="https://mintcdn.com/aftersell/44S6gABa85nCHEE3/images/upcart/5a339b0bee66.png?fit=max&auto=format&n=44S6gABa85nCHEE3&q=85&s=c8f9c2e94f07e554a3da046a661ca95e" alt="Image" width="862" height="708" data-path="images/upcart/5a339b0bee66.png" />

### **Product add-on**

Switch to the **Product Add-On** tab and select an existing product to offer as an upsell.

<img src="https://mintcdn.com/aftersell/44S6gABa85nCHEE3/images/upcart/2730ddce2e5c.png?fit=max&auto=format&n=44S6gABa85nCHEE3&q=85&s=3511f190c0f140800d8f78e177b2a413" alt="Image" width="862" height="428" data-path="images/upcart/2730ddce2e5c.png" />

# Activating Upcart on your store

### Step one: Make your cart live

Once everything is configured:

ℹ️ **Note:** The app embed controls whether the Upcart cart drawer displays on your storefront. If you have [triggered rewards](/upcart/triggered_rewards_module) configured, those discounts will remain active via Shopify's discount system even when the app embed is disabled.

### **Step 2: Test compatibility**

go to **Manage All Carts** > select the cart you want to make active > click **Publish**.

Once published, a green **"Live"** badge will appear next to the cart name confirming it's active on your store.

<img src="https://mintcdn.com/aftersell/cCRwyIEJLge-0nqL/images/publish-cart.gif?s=83544eef29027e4f703297f68e9dfe9f" alt="Publish Cart" width="2008" height="1080" data-path="images/publish-cart.gif" />

### **Step two: Enable Theme App Embed**

To activate Upcart on your theme, go to **Shopify Admin → Online Store → Themes → Customize → App Embeds**, enable the **Upcart Bridge**, and click **Save**.

<img src="https://mintcdn.com/aftersell/72HFABlUfKCk_o45/images/embed.gif?s=5aa169329a219fe6eac1d66769ef4fcb" alt="Embed" width="1352" height="1080" data-path="images/embed.gif" />

If you encounter any issues or experience compatibility problems, feel free to contact our **Support Chat** for assistance.
