Customizing the Side Cart
7 min read
Important:
- We're in the process of releasing the side cart, which is replacing the mini cart. Learn more
- This article is relevant for Wix Stores, Wix Bookings, and Wix Restaurants Orders (New).
The side cart is a preview of the Cart page, which opens on the side of your site pages. Customers can get to the side cart by clicking the cart icon or the 'Add to Cart' button.
Differentiating between the side cart and mini cart
We are in the process of rolling out the side cart, which is an updated version of the mini cart. The side cart is fully customizable and can be viewed on a mobile device.
Note that only the side cart can be accessed from Pages & Menu on the left side of your editor.
In addition, when you click the side cart in your editor (seen below on the left), a toolbar appears. The mini cart (seen on the right) doesn't have this toolbar.
Accessing the side cart in the editor
If you're using only 1 business solution, you access the side cart through that business solution page section in your editor. For example, if you use only Wix Stores, you'll find the side cart under Store Pages.
However, if you use more business solutions, for example, Wix Stores and Wix Bookings, the side cart is found under Cart & Thank You.
Wix Editor
Studio Editor
- Go to your editor.
- Click Pages & Menu
on the left side of the editor. - Select the relevant business solution (Store Pages, Bookings Pages or Restaurant Pages), or select Cart & Thank You.
- Select Side Cart.
Setting the cart icon to open the side cart
You can choose what happens when a customer clicks the cart icon. It can direct customers to the side cart or send them straight to the Cart page.
To set what happens when the cart icon is clicked:
- Click the cart icon in your editor.
- Click Settings.
- Select the Settings tab.
- Select an option:
- Show Side Cart: When customers click the cart icon, the side cart opens on the right. From there, they can click View Cart to go to the Cart page or Checkout to move directly to purchasing their order.
- Open full Cart page: When customers click the cart icon, they're directed to the Cart page.
Setting the 'Add to Cart' button to open the side cart
You can set what happens when a customer clicks the 'Add to Cart' button. The 'Add to Cart' button can be set to direct to the side cart or to any of the other options.
Tips:
- This option is relevant only for Wix Stores.
- The button can be displayed in the Product page, in the Category page, or in a gallery.
To set what happens when the 'Add to Cart' is clicked:
- Click the Product Page, Category Page, or a Grid Gallery in the editor.
Tip: The button on each of these can be customized separately. - Click Settings.
- Click the Settings tab.
- Under Add to Cart Button, make sure the Show Button toggle is enabled.
- Under When button is clicked, select an option:
- Show success pop-up: A pop-up notification appears.
Note: The success pop-up doesn't appear on mobile. Mobile customers are directed to the Cart page. - Open side cart: Side cart opens on the side of the screen.
- Go to cart page: Customers are taken directly to the cart page.
- Stay on page: Customers stay on the current page. The button displays a checkmark to indicate that the product was successfully added.
- Show success pop-up: A pop-up notification appears.
Customizing the side cart
Make changes to the text and design of the side cart so that it reflects your brand's look and feel.
Tip:
To view the side cart with items while customizing it, click Preview at the top right of your editor, add an item (e.g. a product or service), then Back to Editor to exit preview mode.
To customize the side cart:
- Click the side cart in your editor.
- Click Settings.
- Customize the side cart using the available options:
- Settings: Show or hide any of the side cart elements.
- Design: Customize the colors, fonts, opacity levels and more.
- Text: Edit the default text.
- Customize the overlay over the rest of the page:
- Click anywhere on the page outside of the side cart.
- Click Change Background.
- Click Settings and customize the overlay.
- Click anywhere on the page outside of the side cart.
- Set what happens when customers click outside of the side cart:
- Click anywhere on the page outside of the side cart.
- Click Set Up Overlay.
- Click the Clicking closes lightbox toggle to enable or disable it:
- Enabled: When customers click outside of the side cart, the side cart closes. Customers can also close the side cart by clicking the "X" in the top corner.
- Disabled: When customers click outside of the side cart, nothing happens. Customers can close the side cart by clicking the "X" in the top corner.
- When you're done, click Exit Mode.
- (Optional) You can switch to the mobile editor and customize the side cart on mobile.
Tip: Customization you make to the mobile editor don't affect the side cart on desktop.
Migrating from the mini cart to the side cart
Want to switch to the new side cart? You can do so by going to your editor and publishing your site. The page will refresh and you'll have the side cart.
Tip:
The design choices you made for the mini cart carry over to the side cart. The new checkout button won't be added, but you'll be able to go into the settings and add it manually if you wish.
FAQs
Click a question below to learn more.
I don't have a cart icon. How can I add one?
I use Wix Bookings. How can I enable the side cart, Cart page, and cart icon?
Can I customize the overlay on my pages when the side cart is displayed?
Can I customize whether clicking outside the side cart closes it?
Did this help?
|