How can I remove the bottom bar blocking my checkout button?

How can I remove the bottom bar blocking my checkout button?

AaronUltraSport
Visitor
2 0 0

Hi,

 

We are about to launch our store, but the Shopify bar at the bottom is blocking our checkout button so we can't do any test orders! The page isn't live so we are only accessing it from the admin side, and we can't find a way to remove the bar. Does anyone know how to do this? Can it be toggled on and off or minimized in any way?

 

Thanks!

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 153

If you're referring to the Shopify admin bar at the bottom of the page, it can be minimized to give you more space and access to the checkout button. Here's how you can minimize the Shopify admin bar:

  1. Log in to your Shopify admin.
  2. In the bottom left corner of the page, you'll see the Shopify admin bar.
  3. Hover over the bar until you see a small arrow icon (^) appear.
  4. Click on the arrow icon to minimize the admin bar.

By minimizing the bar, it will take up less space on the page, allowing you to access the checkout button and perform test orders. You can expand the admin bar again by clicking on the arrow icon once more.

Please note that this solution is for minimizing the Shopify admin bar within the admin interface and is only applicable to users with administrative access. The bar will not be visible to regular customers or visitors on your live store.

AaronUltraSport
Visitor
2 0 0

Hi, 

Thanks for the quick response. The bar I'm talking about is when previewing our store. I've now found there is an X that is on there but we couldn't see that as our page has a translate button that sits over the top. I've found that if I change the size of my browser window then I can get to the X button to minimise the bar and access the checkout button! 

 

Thanks for your help

Chronis-Chr
Shopify Partner
1 0 0
  1. From your Shopify admin, to to Online Store > Theme.
  2. Find the theme you want to edit and then click Action > Edit code.
  3. In the Assets section, click any style file (.CSS)  to open the file in the online code editor.
  4. Add the below code at the end of file.
    1
    #admin-bar-iframe{display:none!important;}
  5. Save and your are done.

JamesNg
Tourist
3 0 0

Hi Aaron, 

 

I am James from Navi+ | Bottom & Tab Bar, Menu, welcome to use our Free and professional product.  Below are some example better Shopify Bottom Bar examples, you can use those templates for your Shopify website FREE 100%: 

Screenshot 2023-12-27 at 09.43.23.png

Screenshot 2023-12-27 at 09.42.24.png