Hide header and footer in homepage - motion theme

Store Design

Topic summary

A user wants to hide the header and footer only on the homepage of their Shopify Motion theme.

Solutions Proposed:

  • Method 1: Add conditional logic in theme.liquid to wrap header and footer section references with {% if template.name == 'index' %} checks
  • Method 2: Insert CSS code before the </body> tag in theme.liquid that targets header and footer elements with display: none !important when on the index template

Current Status:

The discussion remains unresolved. The original poster tried implementing similar solutions but reports no visible changes occurring. They’re seeking clarification on whether additional modifications are needed beyond copying and pasting the provided code.

Note: Some text in the conversation appears reversed/garbled, but the core technical guidance involves conditional template logic or CSS styling to selectively hide elements on the homepage.

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

Hello, I would like to know how I can hide the header and footer only on the homepage.

I’m using Shopify’s motion theme,

thanks!

2

In theme.liquid, add conditions to the referenced header and footer codes.

{% if template.name == 'index' %}
{% sections 'header-group' %}
{% endif %}
-----------------------------------
{% if template.name == 'index' %}
{% sections 'footer-group' %}
{% endif %}
3

Hi @oslagod

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.liquid

Step 3: paste bellow code in tag → save.

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

{% if template == ‘index’ %}

header, footer { display: none !important; }

{% endif %}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

i already tried something like this but i didnt notice any changes, should i copy and paste it or i have to change something?

5

i already tried something like this but didnt notice any changes, should i copy and paste it or i have to change something?