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

flammagreg
Trailblazer
250 0 38

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:

 

Screenshot 2024-06-11 at 1.32.52 PM.png

Replies 5 (5)

BSSCommerce-B2B
Shopify Expert
405 70 84

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:

BSSCommerceB2B_0-1718128360762.png

 

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.

BSSCommerceB2B_1-1718128779986.png

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! 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency
flammagreg
Trailblazer
250 0 38

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
Shopify Expert
405 70 84

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>

 

 

BSSCommerceB2B_0-1718159309079.png

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! 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


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


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6407 1538 1908

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
flammagreg
Trailblazer
250 0 38

It didn't work, any other recommendations?