Solved

Remove Footer Homepage

martujv
Explorer
93 1 23

Hi! I want to remove the footer only on my homepage. It should be visible on the rest of the pages.

(Both on mobile and desktop)

 

My theme is Stiletto and my web is www.winnerofficial.com

 

I tried many codes but nothing works!

Accepted Solution (1)
sgtlab
Shopify Partner
30 6 8

This is an accepted solution.

try this code. this code remove the whole footer section

<script>
if (window.location.pathname === '/') {
    const elementIdsToRemove = [
        "shopify-section-sections--21113060196691__scrolling_content_Lq4VHU",
        "shopify-section-sections--21113060196691__newsletter_compact_kp96tD",
        "shopify-section-sections--21113060196691__quote_c7G8PQ",
        "shopify-section-sections--21113060196691__rich_text_HQiMUU",
        "shopify-section-sections--21113060196691__footer"
    ];

    elementIdsToRemove.forEach(function(elementId) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
        }
    });
}
</script>

here is the result

Screen Shot 2024-05-04 at 07.53.54.png

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip

View solution in original post

Replies 9 (9)

DeepVyas
Shopify Partner
724 6 6

Simple, just check if the page loading is homepage write condition to hide footer. 

Shopify Developer | Ⓢ : deepvyas71 | ✉ : deepvyas71@gmail.com

PageFly-Amelia
Navigator
325 97 139

Hello @martujv 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

{% if template == 'index' %}
<style>
footer {
   display: none !important;
}
</style>
{% endif %}

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

martujv
Explorer
93 1 23

Hello! I added the code but it didn't do anything. My footer is still visible on the homepage.

PageFly-Amelia
Navigator
325 97 139

You can try the code below instead

{% if template == 'index' %}
<style>
shopify-section-sections--21113060196691__scrolling_content_Lq4VHU,
        shopify-section-sections--21113060196691__newsletter_compact_kp96tD,
        shopify-section-sections--21113060196691__quote_c7G8PQ,
        shopify-section-sections--21113060196691__rich_text_HQiMUU,
        shopify-section-sections--21113060196691__footer{
   display: none !important;
}
</style>
{% endif %}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

sgtlab
Shopify Partner
30 6 8

@martujv 

You can try this code snippet. Place it right before the closing `</body>` tag

 

 

 <script>
    if (window.location.pathname === '/') {
        var element = document.getElementById('shopify-section-sections--21113060196691__rich_text_HQiMUU');
        if (element) {
            element.remove();
        }
    }
</script>

 

 

 If you're unfamiliar with this process, you can install our custom-code-inserter app and follow the tutorial here to insert the code easily without the need to modify your theme.

https://files.sgt-lab.com/1132b4d11714748839.webm

 

Ensure that you paste the code just before the `</body>` tag as instructed. After adding the code, activate it if necessary and reload your page to see the changes. Let us know if you need further assistance!

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
martujv
Explorer
93 1 23

thanks for the reply but it didn't work

sgtlab
Shopify Partner
30 6 8

I have tested it and it seems to work. Just to make sure, is the text © 2024 WINNER in the footer section the one you are referring to?

 

On the home page, the footer is invisible.

Screen Shot 2024-05-03 at 23.04.47.png

 

and on other pages, it displays.

Screen Shot 2024-05-03 at 23.06.06.png

 

Just be sure to place the code right before the closing `</body>` tag

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip
martujv
Explorer
93 1 23

The footer is the whole footer section, the one that is visible on all the pages, not only one line. This would include also stuff like the newsletter and the legal stuff, so yeah, the whole footer basically. I am looking for a code to hide the whole footer section on the homepage 

sgtlab
Shopify Partner
30 6 8

This is an accepted solution.

try this code. this code remove the whole footer section

<script>
if (window.location.pathname === '/') {
    const elementIdsToRemove = [
        "shopify-section-sections--21113060196691__scrolling_content_Lq4VHU",
        "shopify-section-sections--21113060196691__newsletter_compact_kp96tD",
        "shopify-section-sections--21113060196691__quote_c7G8PQ",
        "shopify-section-sections--21113060196691__rich_text_HQiMUU",
        "shopify-section-sections--21113060196691__footer"
    ];

    elementIdsToRemove.forEach(function(elementId) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
        }
    });
}
</script>

here is the result

Screen Shot 2024-05-04 at 07.53.54.png

SGTLab
- Press like to let us know if our reply was helpful - Thank you!
- Come visit us at SGTLab
- Support us with a coffee tip