Adding a floating action button to my shopify store

Store Design
1

Hi, I am looking to add a floating action button to my store that would take you to our virtual quote page. I would want this button to remain on the page at all times. I was wondering if anyone had any code that would help me.

This is the website: https://bespoke-oak.co.uk/

2

@mollycusta , Please follow the below steps to set the button.

  1. open your theme.liquid file and search for the tag. Just before closing the body tag add below the HTML code.
Quote
  1. After this open your base.css file. And at the end of this file paste the below code.
a.quote-btn.button {
    font-size:14px;
    padding: 12px 10px;
    position: fixed;
    right: -66px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 999;
}
  1. save both file after changes.
3

Hi @mollycusta ,

We need to write code to create the floating button

4

Hi, thank you for your reply. Would this button when clicked take you to
our contact us page?

5

Update the tag href parameter below to take the customer to the contact page on click.

Quote

let me know if you have any doubt.
6

Hi,

I followed your code for our website and it worked.

We now have a floating box button www.snughooks.com

How would I go about creating 4 floating box buttons?

thank you John H

7

Hi this code didnt work for me, any suggestions?