How to create a Sticky Cart button

 

You can check out this video tutorial for a more visualized guidance.


Step 1: In GemPages Dashboard, select the page you want to make the sticky Cart button design and enter the Editor.


Step 2: From the left sidebar, drag and drop a Product module onto your page and drop a (P) Cart Button element inside it. Skip to Step 3 if you already have a Product module and a (P) Cart Button element.


Step 3: Drag & drop a Row element inside the Product module.



Step 4: Drag & drop a new (P) Cart Button element into the Row element.


 

Step 5: Right-click on the old (P) Cart Button element > Copy Style.



Next, right-click on the new (P) Cart Button element > Paste Style.



Step 6: Right-click on the Row element > Edit Code.



Next, paste the following CSS code into the CSS tab of the Code Editor window. You can adjust the value of the Bottom, Left, Right, and Z-index (in pixels) to position the Sticky Cart button.

 

 position:fixed!important;
 bottom:0;
 left:0;
 right:0;
 Z-index:999;

 

 

 

Step 7: Hit “Save” and “Publish” to make your changes go live and check on the front page!


 

 

And there you have it! Check out this article to learn how to create a Buy It Now button that skips the Cart page and goes straight to the Checkout page, and should you need any information or assistance, please contact our GemPages Support Team via email or live chat.


Was this helpful?