Product Page Banner

Hi Team,

I wanted to know if it’s possible to remove the page title visibility on category pages and still have my uploaded banner image showing on the product category pages? As you can see on my website, I have a few categories…

Also, based on the same topic above, is there a way to upload the same product category image but optimized for mobile..? because some images don’t properly show on mobile or its half cut-off, etc.

Lastly, how can I change the scroll top of page button I have now but invert the colors. So the circle is black and the arrow inside is white?

Hello,

Yes, you can remove your page title for category or shop pages from Theme Settings >> Shop >> SIDEBAR & PAGE TITLE >> Shop title. By disabling this option, page title will not shown but the banner image will still shown.

Sorry but there is no such option to use different image for desktop and different one (optimized) for mobile screens.

To change the scroll top of page button color, so the circle will be black and the arrow inside is white you can use the below CSS code in global custom CSS area under theme settings >> custom CSS:

.scrollToTop:after {
    color: white;
}
body .scrollToTop {
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,1);
    box-shadow: 0 0 5px rgba(0,0,0,.17);
    background-color: black;
}

Best Regards.

Okay, thank you for getting back to me quickly. As I did the following steps you suggested for the page title to disable it.. however, once I turned it off in the settings my product category banner images were removed as well to not showing up anymore.. please guide me on this. I put a link below in the private section for you to see my image doesn’t show anymore.

Thank you for the scroll to the top CSS code, worked perfectly 🙂

Most Welcome :)

Your problem is resolved. I used the below CSS code in global custom CSS area under theme settings >> custom CSS, to hide the title from your product categories.

.tax-product_cat .nav-shop .shop-title-wrapper .entry-title {
        display:none;
}

You can check the result that your banner image is shown just fine only the title goes hidden.
Result: https://jmp.sh/KEwnmMV

Best Regards.

Awesome thank you for that 🙂 can we remove that back arrow as well on the category banner images?

Most Welcome,

As per your request I removed that back arrow too. I used the below CSS code in global custom CSS area:

.tax-product_cat .nav-shop .shop-title-wrapper .entry-title, .tax-product_cat .nav-shop .shop-title-wrapper a {
    display:none;
}

Result: https://jmp.sh/pcPtI45

Best Regards.

[Author]

Posts