Add a Sticky button to the bottom right of the website

Technical Q&A
1

Hi, guys!

I would like to add a Sticky button to the bottom right of my website so that customers can contact us immediately via Messenger.
I also want to use the Messenger icon for this button icon.

My version is Dawn9.0.

If anyone knows this code, please let me know.
Thank you in advance.

2

Hi @Claclac ,

We need to write code to create the Sticky button or You can use app

3

  1. Open the theme code: In the theme editor, click on “Actions” at the top-right corner, and select “Edit code” from the dropdown menu.

  2. Locate the theme’s Liquid file: In the left sidebar of the code editor, navigate to the “Sections” folder and find the file called theme.liquid. Click on it to open the file.

  3. Add CSS styles: Scroll to the bottom of the theme.liquid file and add the following CSS code:

/* Sticky button styles */
.sticky-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.sticky-button i {
  font-size: 20px;
}
  1. Insert the sticky button HTML: Still in the theme.liquid file, find the closing </body> tag (usually at the very bottom of the file), and just above it, add the following HTML code:

  

​
1 Like
4

The first code needs to be put after or before ?

5

Hi, how can i add a sticky button to the bottom right corner on all my pages mentioning that there is a sale going on up to 50% off?