Remove logo at the bottom of banners on collection and product pages

[flammagreg]

Hi guys, 

Website: seraneeva.

I've been stuck on this for a while. How can I remove the logo image at the bottom of the banners on the collection and product pages. I'd only like the logos on the pages in the footer. Code is below:

[BSSCommerce-B2B]

Hi @flammagreg , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file custom.css. And add this code snippet to the end of the file.

@media (min-width:768px) {
  .main-content section:first-child + div:before {
    display: none !important;
  }
} 

Step 3: Save your code and reload this page.

The result will be remove the logo image at the bottom of the banners on the collection and product pages.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[flammagreg]

The code removes the logos from all pages. I'd still like to have them on all of the pages in the footer. Any other recommendations?

[BSSCommerce-B2B]

Hi @flammagreg , 

If you want remove the logo image at the bottom of the banners only on the collection and product pages.

You just need to edit css on two pages.

You can tried this way: 

1. Go to Admin -> Online store -> Theme > Edit code> Theme.liquid: 

2. Add this script below on Theme.liquid, before tag </body>

<script>
      document.addEventListener("DOMContentLoaded", function() {
          if (window.location.pathname.includes('/collections')) {
              document.body.classList.add('collections-page');
          } else if (window.location.pathname.includes('/product')) {
              document.body.classList.add('product-page');
          }
      });
 </script>

In this step, you're using JavaScript to dynamically add classes based on the URL to determine collections or product pages and then applying CSS in step 3.

3. Save this file and the go to custom.css, add this code snippet to the end of the file.

@media (min-width:768px) {
.product-page .card__heading.main-content section:first-child + div:before,
.collections-page .card__heading.main-content section:first-child + div:before, {
    display: none !important;
  }
} 

4. Save this file and reload collections/ product page to check again.

We hope my suggestions will solved your issue in this time.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Have a nice day, sir! 

[Made4uo-Ribe]

Hi @flammagreg 

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. 

{% unless template.name == 'collection' or template.name == 'product' %}
<style>
@media (min-width:768px) {
  .main-content section:first-child + div:before {
    content: "";
    display: block;
    background-image: var(--seperator-logo);
    background-position: center;
    position: relative;
    width: 64px;
    height: 64px;
    top: -32px;
    margin: 0 auto;
    text-align: center;
  }
} 
</style>
{% endunless %}

And save. 

[flammagreg]

It didn't work, any other recommendations?