Remove Menu, Logo and Announcement Bar from a Product Template

RicquelS
Excursionist
16 0 7

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! 🙂

Replies 9 (9)

GemPages
Shopify Partner
5588 1261 1206

Hello @RicquelS 

 

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

GemPages_0-1669863063139.png

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

GemPages_2-1669863112102.png

{%  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 %}

GemPages_4-1669863291478.png

I hope the above is useful to you.


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
RicquelS
Excursionist
16 0 7

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
Shopify Partner
5588 1261 1206

Hello @RicquelS 

 

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

GemPages_0-1669865043519.png

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 - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
GemPages
Shopify Partner
5588 1261 1206

Hello @RicquelS 

 

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

 

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
RicquelS
Excursionist
16 0 7

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
Shopify Partner
5588 1261 1206

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.

GemPages_0-1669869012107.png

I hope the above is useful to you.


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
RicquelS
Excursionist
16 0 7

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

RicquelS
Excursionist
16 0 7

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
Shopify Partner
94 1 16

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.