Remove Header, Footer, and Announcement Bar on a single page

Axel_Todorovic · ‎08-25-2024

Hi, and thanks for your time.

Theme used : Craft.
Website : thedudworkshop.com

I have been planning to put my portfolio on my website, but I have been struggling with the layout. I have a specific idea in mind for the looks of the page, which I can achieve with the Shopify editor, but I have a problem : my header and footer do not fit the aesthetic of the page, but I can't hide them without also hiding them everywhere else on my website.

The problem is the same for my announcement bar, which I would like to change to have a different color than the one on the main page and a different text, or if that's not possible, hide altogether as well.

I have tried several solutions found on this forum, such as this kind of addition to the layout\theme.liquid section :

    {% if page.id == 134914736465 %}
    <style>
    #shopify-section-announcement-bar,
    #shopify-section-header, 
    #shopify-section-footer {
    display: none !important;
    }
    </style>
    {% endif %}

but nothing has worked.

I would appreciate your help !

Axel

How it looks :

(footer not shown for screenshot reasons, but it's there)

What I want it to look like :

BSSCommerce-HDL · ‎08-25-2024

Hi @Axel_Todorovic, You can try with this code:

{% assign full_url = request.host | append: request.path %}
{% if full_url contains '134914736465' %}
 <style>
    #shopify-section-announcement-bar,
    #shopify-section-header, 
    #shopify-section-footer {
    display: none !important;
    }
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

Axel_Todorovic · ‎08-27-2024

I have tried to put the code you gave me in my theme.liquid (inside the <head> section, see screenshot for reference), but it hasn't done anything. I also tried to place it in the <body> section, but had the same result, i. e nothing.

Please inform me if I am simply using the code wrong or if that's where it should be placed.

Thank you for your help !

BSSCommerce-HDL · ‎08-27-2024

Hi @Axel_Todorovic,
Can you kindly share the details of your problem (link page) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

Axel_Todorovic · ‎08-27-2024

Here is what the page looks like now, it's a WIP still : https://thedudworkshop.com/pages/portfolio

The rest of the details you've already seen in the original post.

Remove Header, Footer, and Announcement Bar on a single page

Remove Header, Footer, and Announcement Bar on a single page

Community Blog Articles