Use this article to take a Smart Cart from nothing to live on your storefront. You will create the cart in your Rebuy admin under Cart & Merchandising > Smart Cart, set your Shopify theme's Cart type, hide your theme's own cart, and publish.
The Smart Cart is a flyout cart that Rebuy renders in place of the cart experience your Shopify theme provides. It does not require Shopify Plus.
This article covers setup and publishing. What each component does is covered in the component articles linked from Smart Cart Overview, and what to do when a published cart misbehaves is covered in Smart Cart: Troubleshoot Common Storefront Problems.
Enable the Rebuy Connector app embed on your live theme
Before you build anything, confirm that the Rebuy Connector app embed is enabled on the theme your storefront is publishing. Rebuy's own app settings state the requirement directly: Please ensure that the Rebuy Connector is enabled on your current theme.
Nothing in the Rebuy admin verifies that the app embed is switched on, so a store that skipped this step gets no warning anywhere in Rebuy. If a brand new install shows no Rebuy feature at all on the storefront, this is the first thing to check, before you look at any Smart Cart setting.
In your Shopify admin, go to Online Store, then Themes.
On your published theme, click Customize.
In the left panel, open App embeds.
Find Rebuy Connector and switch it on.
Click Save.
Create a Smart Cart
You create a cart from the Smart Cart overview page in your Rebuy admin, and the new cart starts out disabled so nothing changes on your storefront until you publish it.
Go to Smart Cart in your Rebuy admin under Cart & Merchandising.
Click New Smart Cart. The Create New Smart Cart dialog opens.
Enter a Name. This is what you will see in the cart list, so name it for what it is doing rather than for the date.
Under Select your Layout, choose Single Column or Double Column. Double Column adds a Cross-Sells anchor beside the cart body. You can change the layout later in the editor.
Under Smart Cart Widget, leave Create a new Cross-Sell widget for this Smart Cart checked to get a recommendations widget built for this cart, or clear it if you want to attach an existing cart widget instead.
Click Create Smart Cart.
Rebuy opens the new cart in the Cart Editor with a starting set of components already placed: Cart Items, Cart Subtotal, Checkout Area, Title Bar, Cart Share, Login Button, and a Cross-Sell Widget. If the New Smart Cart button is greyed out and reads Max Reached, you are at the limit of 45 carts and need to delete one first.
Build the cart before you publish it
Building the cart means adding, removing, and configuring components in the Cart Editor, and it is worth finishing before you publish, since a published cart is live to shoppers the moment you enable it.
Open the cart from the Smart Cart overview page and work through the components you want. Smart Cart: Build Your Cart in the Cart Editor covers layouts, anchors, and how to add or remove a component, and each component article is linked from Smart Cart Overview.
The Smart Cart inherits its colors, fonts, and other visual defaults from your Rebuy theme, so restyling the theme restyles the cart. See Manage Rebuy Theme.
Preview a Smart Cart on your storefront before publishing
Preview opens your live storefront with the cart you are editing rendered on it, without publishing that cart and without changing which cart your shoppers see.
Go to Smart Cart in your Rebuy admin.
Click the Preview icon on the cart's row, or click Preview in the top bar of the Cart Editor.
Your storefront opens in a new tab with Rebuy's preview bar across the top.
The preview URL carries ?preview_smart_cart= followed by the cart's ID, and Rebuy also writes that ID to a cookie so the preview follows you as you browse to other pages on the storefront. Use the preview bar's exit control to end the preview, which clears the cookie and strips the preview parameters from the URL.
Learn more about Rebuy's storefront preview mode at Using Rebuy preview mode.
Set your Shopify Online Store theme's Cart type
Your Shopify theme's cart type setting controls where a shopper goes after they add a product, and the Smart Cart needs them to stay on the page they are already on. Smart Cart never reads this setting, so the only thing that matters is the behavior your theme produces. In the Shopify theme editor you will find it as Type in the Cart group under Theme settings, with Page and Drawer as the options.
Check your own storefront using Rebuy's storefront Smart Cart preview mode before you change anything. Open a product page, add the product to the cart, and watch where you end up.
If you stay on the product page, leave this setting alone. A theme set to Page usually has no cart drawer of its own, so nothing competes with the Smart Cart and there is nothing for you to hide.
If you are taken to your Shopify /cart page, set Type to Drawer. The Smart Cart does not load on Shopify's cart page /cart url, so a theme that navigates there on add to cart drops shoppers on a page where the Smart Cart is not present, and Drawer keeps them on the page they are already on.
To change the setting:
In your Shopify admin, go to Online Store, then Themes.
On your published theme, click Customize.
In the left panel of the theme editor, click the gear icon to open Theme settings.
Open the Cart group. If your theme does not have a group called Cart, look for the group named for your theme's cart or drawer.
Set Type to Drawer.
Click Save.
Switching to Drawer gives your theme a cart drawer it did not have before, and that drawer then opens alongside the Smart Cart until you hide it with CSS, which is covered in the section on hiding your theme's own cart drawer. That intermediate state is expected and cosmetic.
Note: Do not reach for the Smart Cart Product Form Submission Behavior option Stay on current page to stop a redirect, since Rebuy's own code calls that configuration duplicate-prone: it prevents the page navigation without preventing your theme's form submission, so the same product can be added to the cart twice and Rebuy then has to detect and undo the duplicate. Change the Shopify theme's Cart type instead.
Hide your theme's own cart drawer when both carts appear
If your theme has a cart drawer of its own and it opens alongside the Smart Cart, hide it with CSS. Rebuy does not remove, disable, or override your theme's cart, and hiding it rather than deleting it keeps your theme's cart available as a fallback if the Smart Cart cannot load. A theme with no cart drawer of its own has nothing to hide, so you can skip this section.
When the Smart Cart mounts on a page, Rebuy adds the class smart-cart--enabled to the <body> tag. Scoping your CSS to that class means your theme's drawer is hidden only on pages where the Smart Cart actually mounted, and stays visible everywhere else.
In your browser, right-click your theme's cart drawer and choose Inspect.
Find the outermost element that wraps the whole drawer, including its background overlay, and note a selector for it. In many themes this is an ID such as
#CartDrawer.In your Rebuy admin, open the cart, click the Global Settings gear in the editor sidebar, then open Advanced.
Paste your CSS into Custom CSS, replacing the placeholder selector with your own, and keeping the space between the class and your own selector:
/* Hides the theme's own cart drawer only on pages where the Smart Cart mounted */ .smart-cart--enabled YOUR-DRAWER-SELECTOR { display: none; }Click Save, then reload your storefront and confirm that only the Smart Cart appears.
Note: smart-cart--enabled is added once when the Smart Cart mounts and is never removed, so it is the right class for hiding your theme's drawer for the whole session. It is not the class that tracks whether the cart is open. That one is rebuy-cart-visible, which Rebuy adds to the <body> tag when the cart opens and removes when it closes, and using it here would un-hide your theme's drawer every time a shopper closes the Smart Cart.
The Rebuy Smart Cart does not render on the /cart page so the Smart Cart never mounts there and smart-cart--enabled class is never added there. Any CSS you scope to that class is inert on /cart, which is expected rather than a fault in your CSS.
If the site's page becomes unscrollable after a shopper open and closes the Smart Cart. The fix is a snippet in Rebuy's hide callback that clicks your theme's own close control, and it is documented in Smart Cart: Troubleshoot Common Storefront Problems.
When add to cart still goes to your cart page
Adding a product can still take a shopper to the Shopify cart page /cart after you have set Type to Drawer, and some themes do not offer a cart Type setting to change in the first place. In both cases the shopper lands on a page where the Smart Cart is not present.
If you changed the setting, confirm the change actually saved on the theme your storefront is publishing rather than on a draft theme.
If your theme has no cart Type setting in Theme settings, or the change saved and shoppers still land on /cart, the navigation is coming from your theme's own code, which Rebuy cannot change from the app. Your Shopify theme developer can remove that navigation, or you can switch to a theme that does not have it. Smart Cart: Troubleshoot Common Storefront Problems covers how to tell which of these it is.
Publish your Smart Cart
Publishing makes the cart you are looking at the live cart on your online store, replacing whatever cart your storefront is currently showing shoppers.
You can publish from either place:
In the Cart Editor, switch the Live toggle in the top bar on.
On the Smart Cart overview page, open the actions menu at the end of the cart's row, marked with three dots, and choose Enable.
Rebuy asks you to confirm, with the message Publishing this cart will make it the live cart on your online store and will replace your online store's current shopping cart. Confirm, and the cart is live.
Note: Only one Smart Cart can be live per store, and the limit is enforced when the change is saved. Publishing a cart disables whichever cart was live before it, including a Legacy cart. There is no way to run one Smart Cart for one audience and a different Smart Cart for another.
Frequently asked questions
Why does adding a product open my theme's cart instead of the Smart Cart?
Adding a product opens your theme's cart instead of the Smart Cart when the shopper is being taken somewhere the Smart Cart is not, or when the Smart Cart is not on the page at all. Work through this order: confirm the Rebuy Connector app embed is enabled on your published theme, confirm the Smart Cart is published and shows as Live in your Rebuy admin, then check where you land after adding a product on your own storefront and, if that is your /cart page, set your Shopify theme's cart Type to Drawer, since the Smart Cart does not render on /cart. If your theme has no cart Type setting to change, the navigation is built into your theme and your Shopify theme developer has to remove it.
How do I stop my theme's cart and the Smart Cart from appearing at the same time?
You stop your theme's cart and the Smart Cart from appearing at the same time by hiding your theme's cart with CSS, since Rebuy leaves your theme's cart in place. Scope the CSS to the smart-cart--enabled body class as shown in the section on hiding your theme's own cart drawer, then add a snippet to Rebuy's hide callback that clicks your theme's close control, so your theme releases its scroll lock when the Smart Cart closes.
Can I stop the Smart Cart from loading on certain themes or pages?
Yes, you can stop the Smart Cart from loading on a specific theme or a specific page with a short script in Rebuy's ready callback. Go to Global Settings, then Advanced, then Event Callbacks, and use the ready callback:
/* Removes the Smart Cart on one product page, and cleans up the body class it leaves behind */
if (window.location.pathname.includes('your-product-handle')) {
Rebuy.SmartCart.destroy();
document.body.classList.remove('smart-cart--enabled');
}
To scope it to a theme instead of a page, test Shopify.theme.name in place of the pathname check. Removing the class yourself matters, since destroy() tears the cart down but leaves smart-cart--enabled on the <body> tag, and any CSS you scoped to that class would otherwise keep hiding your theme's cart on a page that no longer has a Smart Cart.
Did switching to the Smart Cart cause the drop in our reached-checkout metrics?
A drop in reached-checkout metrics after adopting the Smart Cart is usually a measurement mismatch rather than a real drop in shopper behavior, and it has been traced to a Shopify theme left on Cart type: Page while the Smart Cart is acting as a drawer. Set the theme's Cart type to Drawer so the storefront and the cart agree about where a shopper goes after adding a product, then compare the numbers again over a full week.