Concealing the add to cart button

Store Design
, , , ,

Topic summary

A user wants to hide the “Add to Cart” button from customers while keeping it technically active for a third-party customization app. The app requires the button to remain functional, but the user prefers customers access customization options through the cart page instead.

Proposed Solutions:
Multiple respondents suggested using CSS to conceal the button without disabling it:

  • Use visibility: hidden combined with position: absolute and zero dimensions
  • Alternative approach: display: none on the submit button
  • Move button off-screen using left: -9999px

CSS Target Selectors:

  • button[name="add"]
  • .product-form__buttons
  • .add-to-cart or .btn-add-to-cart

Implementation:
Add CSS code to theme files (theme.css, base.css, or theme.liquid) via the theme code editor.

Status: Discussion remains open with several users requesting the store URL, theme details, and screenshots to provide more tailored guidance. No confirmation yet on which solution was implemented or successful.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi ! So basically i would like to know how to conceal the add to cart button (or just the buy buttons) but not in the direct way o going onto the theme and hiding it in the side menu on theme editor. As i am using a third party app for customisation that technically needs these buttons active on the store, but i would want to ‘conceal them’ so customers do not see them. As they can access the customisation options in the cart anyways as its more convenient or multiple items. I Hope this makes sense.

2

Hi @printedstitches

You can hide the Add to Cart button using CSS while keeping it technically active for your third-party app. Try adding this CSS code to your theme’s custom CSS or inside theme.liquid:

button[name=“add”], .product-form__buttons {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

Or try this:

button[type=“submit”].add-to-cart {
display: none;
}

3

I get what you’re trying to do! Since your third-party app needs the buttons active but you don’t want customers to see them, you can try hiding them using CSS instead of disabling them in the theme editor.

Solution (Using CSS to Conceal the Buttons)

You can add this CSS code in Online Store > Themes > Edit Code > theme.css (or base.css, depending on your theme):

button, .add-to-cart, .product-form__buttons {

visibility: hidden;

position: absolute;

width: 0;

height: 0;

overflow: hidden;

}

This will keep the buttons functional for your app but make them invisible to customers.

If you need a more custom solution, feel free to share which theme you’re using, and I’d be happy to guide you further!

4

Hi,

Hope it will help

At edit code Add CSS Code to Hide the Button

CSS code example:

.product-form__buttons, .btn-add-to-cart {
    visibility: hidden; /* Hides the button but keeps it active */
    position: absolute; /* Moves it out of view */
    left: -9999px; /* Pushes it off-screen */
}

and test

5

Hey @printedstitches

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

6

Hello @printedstitches ,

To solve this problem, you can re-customize your CSS or JavaScript. And you are good to go

7

Hi @printedstitches To clarify the issue, could you share the website URL and detailed images you want to hide?

8

Hi,

Kindly provide your store URL.

Best regards.