Trigger Settings
Trigger settings can be used to customize the floating cart button, and it also let you use any element/button as a cart button. You can even hide the default floating cart button on the site and create your own. Let's understand each of the settings in the trigger settings section.
Trigger Extra Selectors: A CSS selector like element tag, class or ID can be passed into it. It will convert the selected element into a cart trigger. It will work even if the floating cart is hidden.
A hyperlink element with a class name is mentioned in the example.
Cart Trigger Hidden: Set this to YES will hide the floating cart and all the related cart settings mentioned below.
Cart Trigger Event Type: By default, the cart can be opened by clicking on the cart trigger. But it can be changed to “Mouse over” which will open the floating cart when clicking or hovering over the cart trigger.
Product Counter Position: It will let you select the position of the product counter. It is displayed as a number on the floating cart button. There are four options available under this setting: Top Left, Top Right, Bottom Left, and Bottom Right.
Trigger Size: This setting will let you adjust the size of the trigger that is the floating cart button.
Product Counter Size: The size of the product counter on the floating cart button can be adjusted through this setting.
Trigger Border Radius: The border-radius of the floating cart button can be adjusted through this setting. Settings this to the maximum will make the floating cart button a circle.
Cart Trigger Icon Type: By default, an image will be set as an icon on the floating cart button. But a different SVG icon or font icon can be set using this setting. This setting has two sub-settings that control the cart open and cart close icon.
Cart Trigger Icon Image: The floating cart button icon can be changed through this setting, and this is dependent on the previous setting Cart Trigger Icon Type.
Close Cart Trigger Icon Image: When a cart is open, the floating cart button will be changed into a cart close button. This close button can be changed through this setting, and it is dependent on the Cart Trigger Icon Type setting (see the previous setting).
There are four color settings that can be used to customize the floating cart button color and product counter color.
Cart Trigger Bg Color: The background color of the floating cart button can be changed through this setting.
Cart Trigger Icon Color: The icon color of the floating cart can be changed through this setting. It is only available if the Cart Trigger Icon Type is selected as the font.
Close Cart Trigger Bg Color: The background color of the cart close button (a cross by default) can be changed through this setting.
Close Cart Trigger Icon Color: The icon color of the floating cart close icon can be changed through this setting. It is only available if the Cart Trigger Icon Type is selected as font.
Product Counter Bg Color: This setting will let you customize the background color of the product count on the floating cart button.
Product Counter Text Color: The text color of the product counter can be customized through this setting.
Check the video below to see all the settings in action.