How can I conceal an app icon on my home screen?

Store Design
, , , , , ,

Topic summary

A user seeks to hide an app icon appearing on their Shopify store’s homepage. An initial CSS solution is provided:

First attempt:

  • Add code to theme.css file targeting .persistentcart_main_section with display: none
  • Uses a media query for screens up to 767px width

Problem: This hides the icon across all pages, not just the homepage.

Revised solution:

  • Insert code into theme.liquid file before the closing </body> tag
  • Wraps the same CSS in a Liquid conditional: {% if template == 'index' %}
  • This targets only the homepage template

The discussion involves CSS customization and Shopify Liquid templating to achieve page-specific element hiding. The solution progresses from a global hide to a homepage-only implementation.

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

Hi,

I wanted to hide this app icon on my homescreen. My site is https://b32b39-5.myshopify.com

7B8DB28E-D8AC-486A-8A83-3D0D139F2ECB.jpeg
7B8DB28E-D8AC-486A-8A83-3D0D139F2ECB.jpeg1170×2532 194 KB

2

HI @MIKESTORK

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.persistentcart_main_section {

display: none !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

The code hid it on all pages. I just want it to hide on the homepage

1 Like
4

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyHenry_0-1707789378090.png
PageFlyHenry_0-1707789378090.png1365×651 47.6 KB

{% if template == ‘index’ %}

@media (max-width: 767px){ .persistentcart_main_section { display: none !important; }}

{% endif %}

1 Like