How to Hide the Header, Footer, and Announcement Bar on Specific Shopify Pages

Customizing your Shopify store often requires hiding elements like the header, footer, and announcement bar on certain pages. This can help create a clean, distraction-free design for landing pages, promotions, or other unique layouts. Follow this guide to learn how to achieve this customization.

Step 1: Add the Custom Code to theme.liquid

To hide the header, footer, and announcement bar, use the following code snippet:

liquidCopyEdit{% if page.id == 117650325722 %}
<style>
.section-header {
  display: none !important;
}
.section-footer {
  display: none !important;
}
.site-footer {
  display: none;
}
.footer {
  display: none;
}
.announcement-bar {
  display: none !important;
}
</style>
{% endif %}

Steps to Add the Code:

1. Log in to your Shopify admin.
2. Navigate to Online Store > Themes > Actions > Edit Code.
3. Open the theme.liquid file.
4. Paste the code just above the </head> tag in the file.
5. Click Save to apply the changes.

Step 2: Find the Page ID

You’ll need the unique Page ID to target specific pages. Here’s how to find it:

1. Access the Page in the Shopify Admin:
   • Go to Online Store > Pages and select the page you want to customize.
2. Locate the Page ID:
   • Check the URL in your browser’s address bar. It will look something like this:rubyCopyEdithttps://yourstore.myshopify.com/admin/pages/117650325722
   • The number at the end (117650325722) is the Page ID.
3. Update the Code:
   • Replace 117650325722 in the provided code with your page’s ID.

Step 3: Test Your Changes

1. Visit the specific page on your Shopify store.
2. Check that the header, footer, and announcement bar are hidden.
3. If the elements are still visible:
   • Ensure you’ve used the correct Page ID.
   • Confirm the code is placed before the </head> tag in theme.liquid.

Use Cases for Hiding Elements

• Landing Pages: Create distraction-free promotional pages.
• Event Pages: Focus attention on events or announcements without navigation or footer distractions.
• Custom Pages: Develop unique layouts for specific campaigns or purposes.

Tips for Advanced Customization

• To target multiple pages, repeat the code block with different page.id values.
• Use Preview Mode to test changes before publishing them live.
• Combine this method with additional CSS or Liquid code to customize other page elements.

Final Thoughts

Hiding the header, footer, and announcement bar on specific Shopify pages is a simple yet powerful customization that enhances your store’s design flexibility. By following these steps, you can easily tailor your store’s pages to match your goals and provide a focused experience for your visitors.