Dawn theme/ Product Card/ Hide "Add to Cart" button on mobile

Store Design

Topic summary

Main topic: Hide the “Add to cart” button on mobile in Shopify’s Dawn theme.

Solution: A contributor advised editing theme.liquid and inserting a code snippet just above the tag to disable the button on mobile. The store owner confirmed it works, with a mobile screenshot showing the button hidden.

Developments: Another user seeks to hide the header search icon (.header__icon–search) and cart icon (#cart-icon-bubble) via CSS. The change works on desktop and in the theme editor’s mobile preview but not on a real iPhone, asking whether mobile uses different selectors.

Technical notes: Dawn is Shopify’s default theme; theme.liquid is the main layout file. CSS selectors target specific elements; live mobile rendering can differ from the editor preview.

Outcome: The original request is resolved; the later header icon issue remains open with no confirmed fix or explanation.

Attachments: Screenshots and a code snippet are central to understanding the solution and results.

Summarized with AI on January 3. AI used: gpt-5.
1

Hi there,

My url: andrejewelry.com

Password: Thankyouverymuch121

Only on mobile, I would love to hide the “Add to cart” button. Thank you!

IMG_8999.jpg
IMG_8999.jpg1179×2264 145 KB

2

Hey @AndreaHuang

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1700851583567.png
Moeed_0-1700851583567.png357×766 73.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

2 Likes
3

Thank you! It works!!

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

5

Hi, I’m trying to do something similar, but instead I want to hide the cart icon + hide the search icon on Dawn theme.

I wrote:

.header__icon–search {
display: none !important
}

#cart-icon-bubble {
display: none !important;
}

It works perfectly on desktop, and also on mobile in theme editor.

However on real mobile view on my iPhone, it doesnt work.

Does mobile have a different selector or why doesnt it work?

Website
https://ad-client.myshopify.com/

Any help would be greatly appreciated

Best regards
Sylvester