The purpose of this document is to provide you with instructions on how to disable your platform's default cart feature and enable Rebuy Smart Cart, which is a robust and adaptable cart solution.
If you want to learn more about the full capabilities of the Smart Cart, head over to our overview documentation to gain a better understanding of its power. Alternatively, you can book a demo with our team who can assist in an overview of the Smart Cart's capabilities!
Single Column
Double Column
Step by step instructions
Hiding your native cart drawer
Once you have a Smart Cart created, whether it is live or you're using Smart Cart preview mode, it's normal to see both Smart Cart and your native cart drawer.
They're separate carts and both can exist at once.
Rebuy Smart Cart does not automatically remove, hide or otherwise override your themes native cart drawer. Both can and will exist until you take steps to suppress your native cart drawer.
You'll need to make a few changes so that your native cart drawer is automatically hidden when Smart Cart is active but if Smart Cart is not active your cart drawer functions as normal.
In general, we recommend you follow this process for building and deploying a new Smart Cart which involves first creating the cart and then customizing the cart according to your preferences. Once you've completed the customization and are ready to publish, you can proceed by disabling your native cart and then publishing the Smart Cart. This ensures a seamless transition for your customers.
Follow this straightforward step-by-step video guide to create your smart cart! 🛒🚀✨
Once you have a Smart Cart created, whether it is live or you're using Smart Cart preview mode, it's normal to see both Smart Cart and your native cart drawer.
They're separate carts and both can exist at once.
Rebuy Smart Cart cannot automatically remove, hide or otherwise override your themes native cart drawer. Both can and will exist until you take steps to suppress your native cart drawer.
Creating a Rebuy Smart Cart
Here's a step-by-step guide for creating a new Smart Cart:
Go to Smart Cart settings.
Click on "New Smart Cart".
Under "Select your Layout" choose between a single-column cart or a double-column cart.
This can always be updated later in the layout section of the Smart Cart settings.
Under "Smart Cart Widget" choose whether to create a new widget to pair with the new Smart Cart.
If you have existing cart widgets you can use any of those instead.
Click "Create" after selecting your layout and widget options.
By default, there will be some features pre-configured for your smart cart including but not limited to a cart cross sell widget and login button.
Next you can customize your Smart Cart in the editor. Note that some features may require additional configuration in the editor before they can be published.
Great! You just built your first Smart Cart. Now comes the fun part where you can customize it to fit your brands needs.
Once you finish your customizations are ready to publish it live, then it's time to disable your native theme cart by following these instructions.
If you have an trouble with disabling your native cart, then checkout our native cart troubleshooting guides.
After you disable your native cart then it's time to publish your Smart Cart!
By default, your Smart Cart will be inactive on your site. To activate it and make it visible to your customers, you can toggle it on either in the settings or on the main Smart Cart page. Once toggled on, your Smart Cart will be live and operational on your site.
Customizing your Smart Cart
The default styling for your Smart Cart is based on your Rebuy theme, which means that it will inherit the colors, fonts, and other design elements from your theme.
If you want to make changes to the styling of your Smart Cart, you can do so by updating your Rebuy theme settings. This allows you to customize the look and feel of your cart to match your brand and website design.
Editing your Rebuy theme is a straightforward process, and there is a guide available to help you get started. The guide provides step-by-step instructions on how to customize your theme settings and make changes to your site's design.
If you have any questions or encounter any issues while editing your Rebuy theme, the Support team is always available to assist you. They can help you troubleshoot any problems you may encounter and provide additional guidance on how to make the changes you want.
In-cart product recommendations
In cart product recommendations refer to a type of personalized product suggestion that appears on an e-commerce website's shopping cart page. These recommendations are based on the items that a shopper has added to their cart and aim to encourage them to purchase additional items. In cart product recommendations can help increase average order value and provide a better shopping experience for customers.
Features and settings
The Smart Cart has a wide range of features that you can use to customize the cart and create the shopping experience you want for your customers.
If you want to learn more about how to use these features and what they do, there is a helpful guide available that provides detailed explanations and instructions. This guide covers everything from basic settings to the more advanced options.
Smart Cart app store
Integrating the Smart Cart with a variety of apps from the Shopify App Store can significantly enhance its functionality and provide even more value to your business. There are numerous apps available in the the Rebuy App Store that can help you with various aspects of your business, such as shipping, SMS, reviews, and more!
Previewing your Smart Cart
By default, your Smart Cart will be inactive on your site. To preview your Smart Cart you can click the preview button from the Smart Cart settings page or from the Smart Cart management page as seen below.
Preview from within the Smart Cart settings:
Preview from the Smart Cart management page:
When previewing your Smart Cart, you will notice that the URL contains "/?preview_smart_cart=". Each Smart Cart has its own unique identifier numbers associated with it.
Disable Native Cart
To disable your native Shopify theme cart, you can follow the instructions below.
Access Shopify Admin:
Log in to your Shopify Admin panel.
Navigate to Online Store:
Locate "Online Store" section within the sales channel.
Choose Theme:
Click on "Themes" within the Online Store section.
Select the theme you want to customize from the list of installed themes.
Enter Customization Mode:
Once you've chosen your theme, click on the "Customize" button. This action will take you to the customization screen for the selected theme.
Access Theme Settings:
On the left-hand side of the customization screen, you'll see a column with various customization options.
Look for the "Theme Settings" option in this column and click on it.
Navigate to Cart Settings:
Within the "Theme Settings" section, locate the option labeled "Cart." This may also be titled as "Cart Drawer" or "Cart Page."
Click on the "Cart" option to access the settings related to your e-commerce store's shopping cart functionality.
Select Cart Type:
Under the "Cart" settings, you should find an option to set the "Cart Type."
From the dropdown menu for "Cart Type," choose the "Page" option.
Save Changes:
After selecting "Page" as the Cart Type, click on the "Save" button to confirm the changes.
Caveats
Product Page redirecting to native Shopify cart page:
If your website's Product Pages "Add to Cart" button redirects customers to the Shopify "Cart Page" instead of opening the Smart Cart, follow these steps:
Switch your Shopify theme's cart settings to "Drawer".
After switching to the "Drawer" cart setting, you may notice that the Smart Cart opens correctly. However, your theme's native cart may still appear in the background behind the Smart Cart.
To remove the native cart from appearing, you can follow troubleshooting tips provided in our "Troubleshooting a Native Cart Drawer" guide. This guide will help you resolve the issue and ensure that only the Smart Cart is displayed to customers during the checkout process.
Theme automatically redirecting to cart page when clicking add to cart:
If your website's theme automatically redirects customers to the cart page when they click the "Add to Cart" button, regardless of the cart type setting you've selected, here are some troubleshooting tips:
Understand that this issue may be due to a hard-coded redirect within your website's theme. This means the redirect is directly written into the theme's code and may not be easily changed through a configuration setting.
Consider consulting with a developer to modify the code and remove the redirect. They can help identify and adjust the code responsible for the automatic redirect.
Alternatively, you could switch to a different theme that doesn't include this automatic redirect feature if modifying the code isn't feasible.
For further troubleshooting methods, refer to our document titled "How To Debug The Smart Cart/Hide an Existing Cart Drawer."
Enabling / Publishing a Smart Cart
To activate your Smart Cart, you can enable it by toggling the setting in the Smart Cart settings for the specific Smart Cart, or from the main Smart Cart management page.
Enabling from within the Smart Cart settings:
Enable from the Smart Cart management page:
FAQs
What does the "legacy" tag mean on my Smart Cart?
This is showing you that the Smart Cart(s) you have configured are on our legacy settings. You are not required to move to the new UI but it is recommended as we will not be supporting any new features on the legacy Smart Carts.
How do I enable the legacy Smart Cart?
You can follow the instructions on this video walkthrough for legacy Smart Cart enablement steps:
Do Smart Cart components have IDs?
Yes, Smart Cart components have IDs. For single-use components, like Checkout, the component_id will match the type (e.g., checkout). For multi-use components, like the Announcement Bar, the component_id will be a UUID string.
If you have any questions about Smart Cart, send us those questions through the messenger on this page with your details in hand!