Hello, can someone help me hide the “Shop Pay” dynamic checkout button on desktop? I would like to keep this button active on other devices.
https://2d26b3.myshopify.com/products/sample-product
PW: reishi
Topic summary
A user seeks to hide the Shop Pay dynamic checkout button on desktop devices while keeping it visible on mobile and tablets.
Two CSS solutions were provided:
-
Option 1 (Dan-From-Ryviu): Add CSS code to the
base.cssfile that hides the.shopify-payment-buttonusing a media query targeting screens with minimum width of 990px. This approach usesdisplay: none !importantwithin the media query. -
Option 2 (PageFly-Richard): Insert code into the
theme.liquidfile above the</head>tag. This solution comes from a Shopify Page Builder App representative.
Both solutions use CSS to selectively hide the button based on screen size. The discussion remains open with no confirmation from the original poster about which solution worked or was implemented.
Go to your Online store > Themes > Edit code > open base.css file, add this code below at the very bottom, and save file
@media (min-width: 990px) {
.shopify-payment-button { display: none !important; }
}
1 Like
This is Richard 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,
Richard | PageFly