Jane Ramsey Art

Technical Q&A

Topic summary

Goal: hide the footer only on the homepage and force the mobile “hamburger” menu on desktop for a Shopify store using the Atelier theme.

Key developments:

  • Access issue: Store was password-protected; password provided to allow review.
  • Initial attempt: CSS placed in theme.liquid with a homepage condition didn’t work (note: must wrap CSS in tags; conditional used was {% if template.name == “index” %}).

Working solution (accepted):

  • Hide footer on homepage only:
    • In Online Store > Edit theme, add a Custom liquid section to the home page, set padding to 0, and paste: .shopify-section-group-footer-group { display: none; }
  • Force hamburger (mobile) menu on desktop:
    • Add to Custom CSS (Header section or Theme Settings):
      nav[header-menu] { display: none; }
      .header__drawer { display: block !important; }

Alternative offered:

  • Add CSS before in theme.liquid with a homepage condition to hide the footer, though the shared snippet had minor syntax issues.

Outcome: The Custom liquid + CSS approach worked for both tasks. Thread resolved.

Summarized with AI on December 11. AI used: gpt-5.
1

Hi there I am trying to do two things - hide the footer block only on the homepage of this website (using Atelier theme). Nothing is working to hide it includind editing the theme.liquid code / CSS.

The other thing I want is to force the mobile hamburger nav on desktop. Any help would be much appreciated!

2

Store is password protected.
https://help.shopify.com/en/manual/online-store/themes/password-page

ALWAYS keep other people in mind, before you present things go through the motions like a customer would.
Use a different browser, or incognito mode, etc. Same thing will apply to the order process

And read the help manual thoroughly! http://help.shopify.com/

If you have the CSS to target the foot, then use a custom-liquid block/section on the index(homepage) putting in the CSS in a tag .

3

Password is luckyandson

4

I have already tried adding this to the head section in theme.liquid but it’s not working for some reason.

{% if template.name == “index” %}

.header-wrapper{ display: none !important; } footer.footer{ display: none !important; }

{% endif %}

5

If you’re putting it in your layout file, then you should wrap CSS code with <style> and </style> for CSS code to work and not just show on screen.

Without theme code editing you can do this:

  1. Go to Online store, click “Edit theme”;
  2. In the Template area of your home page add a “Custom liquid” section;
  3. Set this section padding to 0 – we do not want it to show;
  4. Paste this code:
<style>
  .shopify-section-group-footer-group {
    display: none;
  }
</style>

This will hide your footer section(s) only on the homepage.

For burger menu I'd try this code in Custom CSS, either of the Header section or in Theme Settings: 
nav[header-menu] {
  display: none;
}

.header__drawer {
  display: block !important;
}

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
1 Like
6

Hi @LuckyandSon ,
Go to Online Store > Themes > Actions > Edit Code > theme.liquid Add below code at before closing /body tag

<style>
.header__drawer.desktop\:hidden {
    display: block !important;
}
</style>
{% if template contains 'index %}
<style>
.shopify-section-group-footer-group{ display: none !important; }
{% endif %}
</style>
7

Thank you Tim, both code worked perfectly!

1 Like