Solved

Floating box buttons - change to square shaped buttons

J_Hartus
Tourist
8 0 1

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!

J_Hartus_0-1694570761115.png

 

below is an example of square buttons that the sales team would like to see on the website.

J_Hartus_1-1694570908548.jpeg

thank you for your help.

Accepted Solution (1)
David_SHT
Globetrotter
605 125 124

This is an accepted solution.

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 </body> tag

 

<style>
.right-blocks__list {
  list-style: none !important;
}
.right-blocks__list .button {
  height: 70px !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: 70px !important;
  padding: 12px !important;
  word-break: break-word !important;
  text-align: center !important;
}
</style>

 

David_SHT_0-1694575463449.png

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

View solution in original post

Replies 12 (12)

PageFly-Noah
Astronaut
866 175 194

Hi @J_Hartus 

 

This is Noah from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
ul.right-blocks__list .button {
    min-width: 130px;
    min-height: 130px;
}
</style>

PageFlyNoah_0-1694571528851.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

J_Hartus
Tourist
8 0 1

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

<div class="right-blocks"> <ul class="right-blocks__list"> <li><a href="/pages/contact-us" class="button button--small">Get Quote</a></li> <a href="/pages/about" class="button button--small">More Info</a></li> <li><a href="/collections/snughooks-shop" class="button button--small">Buy Now</a></li> <a href="/pages/about" class="button button--small">Architects</a></li> </ul> </div>

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; }

PageFly-Noah
Astronaut
866 175 194

to remove the bullets points, please replace the code above with this new one:

 

<style>
ul.right-blocks__list  {

list-style: none;
}
</style>

 

PageFlyNoah_0-1694575843323.png

 


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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

David_SHT
Globetrotter
605 125 124

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 </body> tag

 

<style>
.right-blocks__list {
  list-style: none !important;
}
.right-blocks__list .button {
  height: 100px !important;
  width: 100px !important;
}
</style>

 

David_SHT_0-1694572002702.png

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

J_Hartus
Tourist
8 0 1

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

<div class="right-blocks"> <ul class="right-blocks__list"> <li><a href="/pages/contact-us" class="button button--small">Get Quote</a></li> <a href="/pages/about" class="button button--small">More Info</a></li> <li><a href="/collections/snughooks-shop" class="button button--small">Buy Now</a></li> <a href="/pages/about" class="button button--small">Architects</a></li> </ul> </div>

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; }

David_SHT
Globetrotter
605 125 124

This is an accepted solution.

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 </body> tag

 

<style>
.right-blocks__list {
  list-style: none !important;
}
.right-blocks__list .button {
  height: 70px !important;
  min-width: unset !important;
  min-height: unset !important;
  max-width: 70px !important;
  padding: 12px !important;
  word-break: break-word !important;
  text-align: center !important;
}
</style>

 

David_SHT_0-1694575463449.png

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

J_Hartus
Tourist
8 0 1

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

J_Hartus_0-1694577833053.png

 

David_SHT
Globetrotter
605 125 124

Hi @J_Hartus  

I'm glad that I could assist you! Have a wonderful day ahead!.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

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; }

Screenshot 2023-09-13 at 09.28.57.png 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

J_Hartus
Tourist
8 0 1

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?

J_Hartus_0-1694574547541.png

 

liquid.theme

<div class="right-blocks"> <ul class="right-blocks__list"> <li><a href="/pages/contact-us" class="button button--small">Get Quote</a></li> <a href="/pages/about" class="button button--small">More Info</a></li> <li><a href="/collections/snughooks-shop" class="button button--small">Buy Now</a></li> <a href="/pages/about" class="button button--small">Architects</a></li> </ul> </div>

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; }

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

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; }

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

NguyenVu
Tourist
9 0 3

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. 

 

Frame 197.png