Studio Theme - Removing "Buy It Now" button

Technical Q&A
,

Topic summary

A user seeks to remove the “Buy It Now” (dynamic checkout) button from their product pages, keeping only the “Add to Cart” option.

Multiple solutions provided:

  • CSS approach (most common): Add custom CSS code to hide the Shopify payment button by targeting .shopify-payment-button with display: none;. Code should be added to theme files like theme.liquid, base.css.liquid, or main-product.css.

  • Theme customizer method: Navigate to Online Store → Theme → Customize, then access Product page settings to disable the dynamic checkout option directly.

Implementation steps typically involve:

  1. Accessing Online Store → Themes → Edit Code
  2. Locating the appropriate CSS or liquid file
  3. Pasting the provided CSS snippet before the </body> tag or at the bottom of CSS files

Resolution: The original poster confirmed the solutions worked, with one responder expressing satisfaction that their recommendation helped.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Is there a way to remove the Buy it now button on the product page. I would like to only have add to cart.

My url is annwirtz.com password meramu

Screen Shot 2023-02-26 at 9.57.34 PM.png
Screen Shot 2023-02-26 at 9.57.34 PM.png1248×790 254 KB

1 Like
2

Hey @awirtz
Follow these Steps.

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file and add the following code in bottom of the file above
3

Hello @awirtz ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677824490838.png
GemPages_0-1677824490838.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677824503648.png
GemPages_1-1677824503648.png1073×911 67.7 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
4

@awirtz

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > section-main-product.css and paste this at the bottom of the file:
.shopify-payment-button{
    display:none;
}
5

@awirtz

button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw {
    display: none;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

6

Hi @awirtz

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.product-form__buttons .shopify-payment-button {display: none !importtant}

Regards,

San

7

Hi @awirtz ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Customize theme
Step 2: Product page->/Product infomation section->Disable this option:

PageFlyRichard_0-1677850876949.png
PageFlyRichard_0-1677850876949.png1861×938 213 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
8

Thanks for the help!

9

I am so glad that my recommendation can help :grin: .