Introduction to Adding a Mini Cart in Breakdance
In this tutorial, you’ll learn how to insert and customize a mini cart in your website’s header using Breakdance. The mini cart enhances user experience by providing a quick view of the cart contents, with features like a slide-out or pop-over display, automatic opening upon product addition, and customizable ‘Checkout’ and ‘Continue Shopping’ links.
Adding & Configuring the Mini Cart
Access and Edit Header
- Login to your WordPress admin area.
- Locate and select Breakdance > Headers from the available options.
- Identify the header you wish to modify and click ‘Edit’.
Inserting the Mini Cart Element
- Click the ‘Add’ button, then search for and select ‘Mini Cart’ from the elements list.
- Drag and drop the ‘Mini Cart’ element to your desired position in the header layout.
- Observe the default display of the mini cart, which is set to appear as a pop-over.
Customizing the Mini Cart Display
- Click on the ‘Link’ section to modify the visible components of the mini cart link. For instance, you might opt to display only the cart icon, omitting the count and subtotal.
- Navigate to the ‘Cart’ section to further customize its functionality.
- Add a ‘Continue Shopping’ link, setting its destination to the shop page for user convenience.
- Change the primary action button to ‘Checkout’ for a direct link to the payment process, enhancing user experience and potentially boosting conversions.
- Enable the ‘Open Cart on Add’ feature to have the cart automatically open whenever a user adds a product to their cart.
Styling the Mini Cart
Designing the Cart Link
- Under the ‘Design’ tab, find the ‘Link’ section.
- Add a distinctive border around the cart icon, adjusting the radius and width to your preference, for example, a 4-pixel radius and 2-pixel width, choosing black for the color.
- Reactivate the ‘Count’ display in the Content tab, then proceed to Design > Link > Quantity to adjust its style. Enable ‘Overlap’ for a modern appearance, and use the ‘Top Nudge’ and ‘Right Nudge’ options for precise positioning.
- Customize the ‘Count’ background color and typography to match your website’s theme. Adjust the font size as needed, with a recommendation of 12 pixels for clarity.
Adjusting the Cart Design
- In the ‘Cart’ section under the ‘Design’ tab, switch the cart’s display mode to ‘Sidebar’ to have it slide from the screen’s edge.
- Set the ‘Sidebar Cart Position’ to ‘Right’ for a natural interaction flow.
- Customize the ‘Container’ width, with a suggested width of 350 pixels for optimal balance.
- Personalize the visual aspects of the cart contents, including the subtotal, action buttons, and spacing. Adjust these elements to align with your site’s aesthetic and provide a seamless user experience.
Finalizing the Mini Cart
Saving and Reviewing Changes
- After completing the customization, click ‘Save’ to apply the changes to your website.
- Visit the front end of your website to inspect the new mini cart’s functionality and design, ensuring it aligns with your expectations and provides the desired user experience.
- Test the ‘Checkout’ button and ‘Continue Shopping’ link for proper operation, and verify that the cart automatically opens upon product addition if the ‘Open Cart on Add’ feature was enabled.
Additional Notes
Utilizing the mini cart feature in Breakdance significantly contributes to a user-friendly shopping experience. It not only offers visual feedback on shopping progress but also potentially shortens the journey to checkout, encouraging conversions. The wide array of customizable options ensures the mini cart can be tailored to fit any website theme or branding requirements.
