Having trouble removing the search icon from Dawn theme on mobile and the product image border.

Store Design
, , , ,

Topic summary

A user is trying to remove the search icon and product image border from their Shopify Dawn theme on mobile devices. Previous solutions only worked for desktop.

Attempted Solutions:

  • One suggestion involved adding CSS code to base.css/style.css/theme.css to hide the search modal and remove borders using media queries for screens up to 990px width
  • This approach worked in desktop browsers but failed to apply on actual mobile devices

Latest Recommendation:

  • Add custom CSS code to theme.liquid file, placed above the </head> tag
  • Specific implementation steps provided: navigate to Online Stores > Themes > Edit code > theme.liquid

Current Status:
The issue remains unresolved on mobile devices. The user is awaiting confirmation on whether the theme.liquid approach successfully addresses both the search icon and image border problems on mobile.

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

My website is supposed to be most used on mobile though all the help provided for this issue only changes the desktop site, not the mobile version. The image border also won’t go away on mobile but it will on desktop as well as the search icon.

Any help regarding this issue would be greatly appreciated! :slightly_smiling_face:

Site: https://isawheaven.xyz/

1 Like
2

Hi @isawheaven

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 1990px){
details-modal.header__search {
    display: none !important;
}
.global-media-settings {
    border: none !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you, I’ve copied the code and pasted at the bottom of base.css yet the changes are shown on my browser, but not on my mobile device.

Thank you.

1 Like
4

Hi @isawheaven

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

PageFlyRichard_0-1700615433298.png
PageFlyRichard_0-1700615433298.png390×844 78.9 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly