Solved

How To Display The Footer Only On The Home Page

KhallP
Excursionist
63 0 11

I want to remove the footer from all pages and leave it only on the home page, can anyone help me?

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5105 1218 1490

This is an accepted solution.

Hi @KhallP 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

{% if template.name != 'index' %}
  <style>
   footer.footer.color-background-1.gradient.section-sections--16302501757028__footer-padding {
    display: none;
}
  </style>
{% endif %}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 4 (4)

TaskHusky
Shopify Expert
111 11 17

Hello @KhallP - 

 

Zach from TaskHusky here. 

Here are some general instructions on how to accomplish this:

Access Your Theme Files:


From your Shopify admin, go to Online Store > Themes.

Find the theme you want to edit, and then click Actions > Edit code.

Locate the Footer Code:


The footer code might be in different files depending on the theme. Commonly, it is in theme.liquid, footer.liquid (inside the sections folder), or theme.liquid might include it from another file using a {% include %} or {% section %} tag. Look for the code that is responsible for displaying the footer.

Edit the Code:


Once you've found where the footer is included, wrap the footer code or the include/section tag that loads the footer with an if statement that checks if the current page is the homepage. You can check if it's the homepage by using request.path or template object like this:

liquid

Copy code

{% if request.path == '/' %}
<!-- Footer code or include/section tag goes here -->
{% endif %}

Or, using the template object:


liquid
Copy code

{% if template.name == 'index' %}
<!-- Footer code or include/section tag goes here -->
{% endif %}

Save the Changes:


After adding the conditional statement around the footer code, save your changes.

Test the Change:

 

Go to your storefront and refresh the page to ensure that the footer only appears on the homepage and not on other pages.

Zachary McClung, founder
Your Shopify Store Customized Your Way - 20,000 + Shopify Merchants Served
Clean Size Chart - Reduce Returns & Make More Money

Made4uo-Ribe
Shopify Partner
5105 1218 1490

This is an accepted solution.

Hi @KhallP 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

{% if template.name != 'index' %}
  <style>
   footer.footer.color-background-1.gradient.section-sections--16302501757028__footer-padding {
    display: none;
}
  </style>
{% endif %}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


bluefines
Visitor
2 0 0

Of course! To remove the footer from all pages except the home page, you'll typically need to modify the HTML code of your website. Here's a general approach you can take:

  1. Identify the footer code: Locate the HTML code that represents the footer section of your website. This is usually found within the <footer> tags or similar.

  2. Identify the home page: Determine which page is your home page. This is often named "index.html" or "home.html", but it could vary depending on your website setup.

  3. Add conditional logic: Wrap the footer code in conditional logic that checks if the current page is the home page. If it is, display the footer; otherwise, don't display it.

Here's a basic example using Javascript&colon;

<footer id="footer">
<!-- Footer content goes here -->
</footer>

<script>
// Check if the current page is the home page
if(window.location.pathname === '/path/to/home/page.html') {
document.getElementById('footer').style.display = 'block';
} else {
document.getElementById('footer').style.display = 'none';
}
</script>

Replace '/path/to/home/page.html' with the actual path to your home page.

Alternatively, if you're using a server-side language like PHP, you can achieve this by including the footer only on the home page:

<?php
// Include footer only on the home page
if($_SERVER['REQUEST_URI'] === '/path/to/home/page.php') {
include 'footer.php';
}
?>

Replace '/path/to/home/page.php' with the actual path to your home page.

Remember to adjust the code according to your website's structure and the language you're using.

BrainStation23
Shopify Partner
134 28 30

 HI @KhallP 
You can try this step to achieve your result 
Step 1: You need to change your footer.liquid file code 

222.png
This is your previous code looks like this 
and your output is 
111.png
Step 2: But if you change some code like this
Just add one condition 


333.png 
After doing this the result is 

444.png

Code:

{% if request.path == routes.root_url %}
<footer></footer>

{% endif %}


Joy Matubber| Brain Station 23
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more contact us : js.team@brainstation-23.com


Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com