Hide home page sections on mobile

Store Design
,

Topic summary

A Shopify store owner wants to hide a gift card section on their homepage (joyamada.com) when viewed on mobile devices.

Proposed Solutions:

Multiple community members offered CSS-based approaches:

  • Add custom CSS targeting the specific section ID (#shopify-section-template--14720616595505__featured_product_4GeqLW)
  • Use media queries to apply the hiding only on mobile screens (max-width: 767px or 768px)
  • Insert code location: Most suggest adding the CSS in theme.liquid before </head> or </body>, or in theme CSS files (theme.css or base.css)

Key Code Pattern:

@media screen and (max-width: 767px) {
  section#shopify-section-template--... {
    display: none !important;
  }
}

Status: Multiple solutions provided but no confirmation from the original poster on whether any approach successfully resolved the issue. One respondent incorrectly suggested min-width: 768px which would hide on desktop instead of mobile.

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

Hello @VSom

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ section#shopify-section-template--14720616595505__featured_product_4GeqLW { display: none !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like