Sticky Cart Button

Sticky Cart Button


  1. Enable on desktop: allow your sticky button to appear on desktop version. 
  2. Enable on mobile: allow your sticky button to appear on mobile version.
"Enable on mobile"  works on screen width that is below 992 pixels




SETTINGS 

Button action

Set the action when customers click on your sticky cart button. 





  1. Open a mini-cart: to have a pop up presenting smaller version of the cart page. 
  2. Cart page: to send your customers directly to cart page 
  3. Checkout page: to go straight to checkout page without going to cart page.

If you choose "open a mini-cart", there will appear a section MINI CART for you to customize 

Position on desktop/mobile

Set the position of sticky cart button. Please remind if your store is having any other buttons showing up in the selected position.




In case you want to customize a specific position, choose “Custom”.

You can decide the position of sticky cart button both in percentage and pixel. 
Percentage position helps you to adjust the distance between sticky cart button and top/bottom/left/right borderline of your screen.  Pixel position works for the same.
             For example: If you set the top 30% then the button will be like this



Use percent values for easier editing 
 
Please remind that you just need to select a value for either top or bottom and left or right. 






STYLE 




Button size

Adjust the size of sticky cart button (in pixel).

Button background color

Choose a color for the button by entering the code or select it at color chart. 

Icon color 

Choose a color for the button by entering the code or select it at color chart. Recommend to select one that is distinctive from background color. 

Choose icon

Select an icon to fit your taste.




MINI CART 

This section is enabled only when you choose to "open a mini cart" in Button action. 



Mini cart type

Our app has three defaults for you to choose: Bubble, Modal, Off-canvas. 

If you choose Bubble 

  1. Bubble mini cart position: choose one of eight defaults
  2. Spacing: Adjust the spacing between icon button and pop up.
  3. Show arrow: Arrow is the horizontal arrow, appears next to the bubble.

If the distance between icon button and pop up is big, recommend to show arrow to indicate the bubble comes from sticky cart button.

If you choose Modal 

  1. Modal size: go from small to extra large.

If you choose Off-canvas

  1. Off-canvas mini cart position: right edge of screen and left edge of screen.

Font family

Our app supports Google Fonts. Type a font name in "Font family" to search for a font that fits your theme. Leave the font family blank if you want to use theme's default font.

    • Related Articles

    • How to set up Sticky Button & Cart Drawer? (version2)

      SLIDE CART SETTINGS Show option value of variant: Show short form of product variant. For example: blue/small. Show custom properties: Recommend to enable this option if you're selling product with extra options. Enable note box: Display note box on ...

    • How to set up Sticky Add to cart? (Version 2)

      GENERAL SETTINGS Only show sticky add to cart when "Add to cart" button disappear: Enable this option so that the Sticky Add to cart only displays whenever the Add-to-cart button of your theme disappear. Only show sticky add to cart when user scroll ...

    • Sticky Bar

      Enable on desktop: allow your sticky bar to appear on desktop version  Enable on mobile: allow your sticky bar to appear on mobile version  "Enable on mobile"  works on screen width that is below 992 pixels SETTINGS Position on desktop/mobile  Set ...

    • Sticky Cart Version 1.0 vs Version 2.0 - What Makes Version 2.0 Different?

      What’s new in Sticky Cart 2.0? New Interface Be designed based on the Shopify Interface that helps to create a consistent user experience for merchants Up to 15 new features Updated more advanced features to help sellers create high converting stores ...

    • Design Quick View Button

      Icon Enable 'Show button icon' mode to display Quick View button icon. Choose the icon you want to display from the list. Button on Desktop Text To show text on button, switch 'Show button text' on. When button text is shown, the default text is ...