Quick Start

From activation to a side cart that looks like part of your store, in about five minutes.

This ShapedCart quick start takes you from a fresh install to a WooCommerce side cart that matches your brand. ShapedCart already works the moment it's active, so each step here is about making it yours. Every step links to a page with the full details.

Haven't installed it yet?

Start with Installation & Activation, then come back here.

Step 1: See it on your store

Before changing anything, see what your shoppers see with the default settings.

1. Open your store in a new browser tab.
2. Add any product to the cart.
3. The side cart slides in from the right with your product in it. You'll also see the floating cart button in the bottom-right corner.
4. Try the cart: change the quantity, close it with the × or Esc, and open it again with the floating cart.

Did the cart not open?

If adding a product took you to the cart page instead, WooCommerce is set to redirect there after an add. Turn off Redirect to the cart page after successful addition in WooCommerce → Settings → Products, then try again. Auto-Open on Add to Cart explains why. Still stuck? See Troubleshooting.

Step 2: Match it to your brand

Now open the ShapedCart settings screen and make three quick changes. The preview on the right shows each one as you go.

1. Go to ShapedCart → Side Cart. You're on step 1 Side cart, on the General tab.
2. Rename the cart. Under Basic Settings, change Cart Heading from Your cart to whatever fits your store, like Your bag. See Cart Heading.
3. Use your brand color. Switch to the Style tab and, under Colors, set Accent to your brand's main color. That colors the checkout button and the other buttons in the cart. See Colors.
4. Match the floating cart. Click 2 Triggers, open the Floating Cart card's Style tab, and set Background to the same color. See Floating Cart → Style.
5. Click Save changes in the header.

Reload your store and open the cart. It now uses your name and your colors.

Step 3: Choose how shoppers open it

Shoppers can already open the cart in two ways: it opens by itself when they add a product, and they can tap the floating cart. Most stores also want a cart icon in the header menu.

1. Still on 2 Triggers, switch on the Menu Cart card.
2. Add it to your header:
   • Classic theme (Astra, Storefront, Kadence and similar): pick your header menu under Add to Menu.
   • Block theme (like Twenty Twenty-Five): copy the [shaped_cart_menu] shortcode and add it to your header in the Site Editor. Menu Cart → Block themes shows how.
3. Click Save changes.

Once you have a cart icon in the header, you might want the floating cart on phones and tablets only. See Device Visibility.

Step 4: Test it like a shopper

The preview is a close match, but your real store is what counts. Before you call it done:

• [ ] Open your store in a private browser window, so you start with an empty cart. Open the cart and check the empty state.
• [ ] Add a product from the shop page and from a product page. The cart should open both times.
• [ ] Try it on your phone. Check the cart's width and that the floating cart doesn't cover anything important.
• [ ] Apply a coupon, if you use them. See Coupon Field.
• [ ] Clear your cache if you use a caching plugin, then check again. See Troubleshooting.

Where to go next

Your side cart is set up. When you have a few more minutes, these are worth a look:

PopularShow more in each itemSale prices with a savings badge, the options a shopper picked, add-on details and a low-stock nudge.Cart Items →Totals and shippingChoose whether shoppers see shipping and the order total, and what the note under them says.Cart Summary →Popup instead of a side panelOpen the cart from the left, or as a popup in the middle of the screen.Opening & Heading →Checkout buttonsPut the total on the checkout button, and add Continue shopping and View cart buttons.Checkout Buttons →

Want to understand the whole settings screen? Take the Admin Screen Tour, or see every part of the cart in the Side Cart Overview.