Creating the custom cart counter button on the Bricks header template
In this tutorial, you'll learn how to add a custom cart counter button to your bricks' header template and seamlessly integrate it with FluentCart's built-in off-canvas cart drawer. When users click the button, the sliding cart drawer will open, providing a smooth and interactive shopping experience.
Step 1
- Open your Header template on the Bricks editor.
- Add the Block element.
- Click on the Style Tab of the Block element
- Go to Attributes section
- Add an attribute
- Name = data-fluent-cart-cart-expand-button
- Value = empty/blank
- Add the Icon element inside the Block element. Select the "bag" icon from the Icons dropdown or you can upload your own custom SVG icon there. Adjust the size, color, etc.
- Add the Basic Text element inside the same Block element and put the dynamic tag {bufc_cart_counter} there.
Step 2
- Go to FluentCart -> Settings page
- Click on Store Settings -> Cart & Checkout menu
- Disable the first 2 checkboxes: Cart icon in menu bar and Cart icon in body
- Save the settings