Remove Menu, Logo and Announcement Bar from a Product Template

[RicquelS]

I'm trying to figure out how to remove the menu, logo, search bar and announcement bars from one product template on my website. I need this product page to be completely unbranded with no way to access the rest of my website.  I'm using the Dawn 2.0 theme.  Thanks! 🙂

[GemPages]

Hello @RicquelS 

You can follow these steps:
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

{%  if product.handle contains 'demo-01' %}   
      <style>
      div#shopify-section-announcement-bar {
          display: none;
      }
      
      div#shopify-section-header {
          display: none;
      }
      
      footer#shopify-footer {
          display: none;
      }
      </style>
    {%  endif %}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[RicquelS]

Thank you so much! Would "Demo-01" be the product title or the product template name? Or where do I find the product handle? Sorry, I really wish I knew more about coding. 🙂

[GemPages]

Hello @RicquelS 

You can find "demo-01" in the product URL like image 

Product url will be like "https://markgempage.myshopify.com/products/demo-01" then the part you need to get is "demo-01"

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[GemPages]

Hello @RicquelS 

You can send me the Product you need, I will send you the correct code.

Kind & Best regards,
GemPages Support Team

[RicquelS]

Is there a way to apply this to a product template instead of each product individually? So it will hide the announcement bar, header and footer for all products using a specific product template? Thank you so much for your help, I really appreciate it. 

[GemPages]

Hello @RicquelS 

You can add this code 

{%  for tag in product.tags %}
    {%  if tag contains 'hide-bar' %}   
      <style>
      div#shopify-section-announcement-bar {
          display: none;
      }
      
      div#shopify-section-header {
          display: none;
      }
      
      footer#shopify-footer {
          display: none;
      }
      </style>
    {%  endif %}
    {%  endfor %}

where "hide-bar" is the tag attached to the product you need to hide information.

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[RicquelS]

Thank you so much! That hid everything except the footer menu, but it's much better than it was. I appreciate your help!

[RicquelS]

This worked, except it didn't hide the footer. It still helps, but if anyone has anything to add about how to also hide the footer, that would be great! 🙂

[BonzaDogTreats]

Hi Gem Pages

I need to hide the announcement bar on one product template - I've tried using both the handle and the tag but neither has worked. Dawn v12 doesn't seem to have the announcement bar in theme.liquid any more. Any guidance on where the coding needs to go please? I also tried using some css as a custom block on the template but tat wasn't successful either.