Hi all,
I wanted to hide the icons menu, search, heart and the footer on my homescreen only
my site is https://luxurymrkt.com
Topic summary
A user wants to hide specific header icons (menu, search, heart) and the footer exclusively on their homepage.
Proposed Solutions:
Multiple community members provided similar CSS-based approaches:
- Primary method: Add custom CSS code to the
theme.liquidfile, wrapped in a conditional statement{% if template == 'index' %}to target only the homepage - Placement: Insert the code snippet either above the
</body>tag or before</head>tag - Targeting: Use CSS selectors to hide the specific header icons and footer elements
Implementation Steps:
- Navigate to Shopify Admin → Online Store → Themes → Edit Code
- Locate the
theme.liquidfile - Add the conditional CSS code at the specified location
- Save and reload to see changes
One responder noted their solution works specifically for mobile screens only. All solutions follow the same core approach of using Shopify’s template conditional logic combined with CSS display properties.
1 Like
Hey @Luxurymrkt
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
{% if template == 'index' %}
{% endif %}
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Luxurymrkt
Only for mobile screens.
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Layout > theme.liquid
Step 3: Add the following CSS in the bottom of the file after the end of tag
{% if template == 'index' %}
{% endif %}
Hi @Luxurymrkt ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file theme.liquid. And add this code snippet to the end of the file before tag or :
{% if template == 'index' %}
{% endif %}
In this step, you add script to add css to hide the icons menu, search, heart and the footer on your homepage only on mobile screen.
Step 3: Save your code and reload this page.
=> the result will be:
We hope my suggestions will solved your issue.
If it is helpful, can you kindly give us many likes and mark the solution for us?
This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.
Have a nice day, sir!