Remind consumers to add items to their carts by displaying a sticky add-to-cart bar on the product pages. Customers effortlessly and quickly add items to their cart without leaving the browsing page. Shoppers constantly see that button while browsing items in your store and become more likely to purchase products, resulting in higher Conversion Rates.
The Sticky-Add-to-Cart module is the best store conversion increaser. It keeps the add-to-cart option Visible when customers are scrolling through the page. It has 2 different tabs: General and Style.
1. General #
1.1 Enable Sticky Add-to-Cart: Switch on the button to enable sticky-add-to-cart module. This is mandatory.
1.2 Sticky Bar Position: You can select ‘Top’ or ‘Bottom’ position, where the sticky bar will appear.
1.3 Scrolling Distance: Choose when the sticky bar should appear (e.g., only after scrolling past the main product details or when the default add-to-cart button is no longer visible).
1.4 Show Full Width Sticky Bar: Activate this option to show the full width sticky bar.
1.5 Sticky Bar (Container) Width: Choose the width of the sticky bar. If you choose to display a full-width sticky bar, this setting will act as the container width.
1.6 Sticky Bar Animation: You can choose how the bar will appear on scroll. Set either ‘Slide’ or ‘Fade’ from the dropdown.
1.7 Add-to-Cart Button Label: You can customize the “Add-to-Cart” button label.
1.8 Show Thumbnail Image: Activate this option to show a thumbnail image of the product attached in the sticky bar.
1.9 Show Product Title: Switch on this option to make the product title visible on the sticky bar.
1.10 Show Quantity Selector: Enable this option so that the customers can get permission to change product quantity from the sticky add-to-cart bar.
1.11 Show Sticky Bar on Variable Product: Enabling this option will allow the sticky add-to-cart bar to show for variable products, displaying product variation details.
1.12 Responsive Behavior: You can control how the sticky add-to-cart will behave on different devices.
Now, click on the “Save Changes” button to save the updates.
2. Style #
Now, move to the Style tab. This setting controls the style of the front-end appearance.
2.1 Sticky Bar Color Scheme: You can select either a ‘Light’ or ‘Dark’ appearance for the sticky bar.
2.2 Sticky Bar Primary Color: Select the sticky bar primary color according to your choice.
2.3 Sticky Bar Background Color: You can set the sticky bar background color.
If you scroll down, you will find more options to customize the sticky bar styles. You can also change the appearance of “Form Input Styles” and “Add-to-Cart Button” Settings
Now, click on the “Save Changes” button to save the updates.
Front End View of Sticky Add-to-Cart Module #
Below, you can see the sticky add-to-cart pop up on the product page.
