Hi,
I really need some help with some floating buttons on our website.
Using Dawn Theme. www.snughooks.com
I need help changing the buttons to a square shape please.
The code I used for the floating box buttons simply follows the current design of our website’s buttons.
I also wish to remove the bullet points in front of the floating button. It originally had 4 bullet points but when I removed the code for the bullet points all the boxes collapsed and went from siting on top of each other to left to right across the page!
below is an example of square buttons that the sales team would like to see on the website.
thank you for your help.
Hi @J_Hartus
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Hi @J_Hartus ,
This is David at SalesHunterThemes.
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code.
Go Assets folder → theme.liquid file.
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
David | SalesHunterThemes team
Hi @J_Hartus
You can do that by adding this CSS code at the bottom of your base.css file in Online store > Themes > Edit code > Assets
.right-blocks__list li { lis-style: none !important; }
.right-blocks__list .button--small:first-child { background: #f8d207 !important; }
.right-blocks__list .button--small,
.right-blocks__list .button--small::after { border-radius: 0 !important; }
.right-blocks__list .button--small { min-width: 124px; min-height: 64px; }
Hi Noah,
thank you for responding.
I tried the code and unfortunately the square boxes are much too large and the the bullet points are still visible.
I currently have code in liquid.theme and base.css file for the four floating boxes.
I reduced 130px down to 80px and the boxes were no longer square.
liquid.theme
base.css
.right-blocks { position: fixed; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); text-align: left; z-index: 999; }
.right-blocks__list li { lis-style: none !important; }
.right-blocks__list .button–small:first-child { background: #000000 !important; }
.right-blocks__list .button–small,
.right-blocks__list .button–small::after { border-radius: 0 !important; }
.right-blocks__list .button–small { min-width: 124px; min-height: 64px; }
Hi David,
Thank you for responding.
I tried the code and the boxes are a little too large now and the sales team do not like the way it looks. I tried to reduce below 100px and the boxes lost their square shape.
I currently have code in liquid.theme and base.css file for the floating boxes.
liquid.theme
base.css
.right-blocks { position: fixed; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); text-align: left; z-index: 999; }
.right-blocks__list li { lis-style: none !important; }
.right-blocks__list .button–small:first-child { background: #000000 !important; }
.right-blocks__list .button–small,
.right-blocks__list .button–small::after { border-radius: 0 !important; }
.right-blocks__list .button–small { min-width: 124px; min-height: 64px; }
Hi Dan,
I used the code in the base.css file and changed the colour to black.
I currently have code in liquid.theme and base.css for existing floating boxes and don’t know how to remove the bullet points from the liquid.theme without the boxes collapsing?
liquid.theme
base.css
.right-blocks { position: fixed; top: 50%; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); text-align: left; z-index: 999; }
.right-blocks__list li { lis-style: none !important; }
.right-blocks__list .button–small:first-child { background: #000000 !important; }
.right-blocks__list .button–small,
.right-blocks__list .button–small::after { border-radius: 0 !important; }
.right-blocks__list .button–small { min-width: 124px; min-height: 64px; }
Hi, please correct this line of code
.right-blocks__list li { lis-style: none !important; }
to this to remove bullet point
.right-blocks__list li { list-style: none !important; }
Hi @J_Hartus ,
You can try again:
Go to Online Store → Themes → Actions → Edit code.
Go Assets folder → theme.liquid file.
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
David | SalesHunterThemes team
1 Like
to remove the bullets points, please replace the code above with this new one:
Please note, you can only be square if you width of the box is equal to height of the box
In short : 90x90 this is a square, 130x130 also square, but 130x80 doesn’t a square.
You change the widthxheight to match with your requirement but keep it square
Hi David,
thank you for your help with the floating box buttons.
I will share with the sales team and fingers crossed they are happy.
I’m not entirely sure how i made the third box background black but i will leave it for now.
thank you
1 Like
Hi @J_Hartus
I’m glad that I could assist you! Have a wonderful day ahead!.
I have found a free app on Shopify’s public app store called Pronavi: https://apps.shopify.com/pronavi-navigation-design , which allows you to easily add and customize the bottom bar of your website.
