how to hide mobile display in buy now button is hide

Store Design
, , , , , , , , , , , , , ,

Topic summary

Main issue: Hide the “Buy Now” button on mobile devices only, later expanded to also hide the “Add to Cart” button on mobile.

Proposed solutions:

  • CSS in base.css to hide #gokwik-buy-now entirely (not mobile-specific).
  • theme.liquid media query (max-width: 767px) to hide .productView-groupBottom, intended for mobile.
  • theme.liquid media query to hide .product-form__buttons to remove the Add to Cart button on mobile.

Latest update: After applying both mobile CSS rules, the Add to Cart button still appears on mobile. Screenshots were shared showing the issue persists.

Notes/clarifications:

  • “Media query” limits CSS to screens at or below 767px width (mobile).
  • The provided snippets in the thread show spacing anomalies (e.g., “productView-g roupBottom”, “disp lay”) that could prevent CSS from applying, and selectors may be theme-specific.

Status: Unresolved. Next steps likely require correcting CSS typos, confirming the correct selectors for the store’s theme, or using browser DevTools to identify the exact classes/IDs for the Buy Now and Add to Cart elements on mobile.

Summarized with AI on December 20. AI used: gpt-5.
1

zelzis_0-1725703769531.png
zelzis_0-1725703769531.png1920×1080 306 KB

our website in buy now button show i want to requested this buy now button in hide only mobile device

is this possible?

in this case is possible to help in this case

2

HEllo @zelzis
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

#gokwik-buy-now {
display: none !important;
}

result

4.png
4.png475×724 97.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Hello @zelzis

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .productView-groupBottom { display: none !important; } }

Tech_Coding_0-1725704614600.png
Tech_Coding_0-1725704614600.png316×509 35.1 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

4

this are work but i also remove add to cart button in mobile device please check and help in this case

5

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .product-form__buttons { display: none !important; } }

Tech_Coding_0-1725705293248.png
Tech_Coding_0-1725705293248.png318×490 22.6 KB

my reply helpful? Click Like to let me know!
your question answered? Mark MY Both Solutions as an Accepted Solution.

6

i want two code apply but add to cart button is not remove in mobile device please ceheck any update for this case

zelzis_0-1725707429913.png
zelzis_0-1725707429913.png354×744 96.4 KB