Can I add a Scrolling Banner to a single product category page without it appearing across the entire shop?

I have a scrolling banner that I only want to appear in the 'Singles' category of my Shop. without a code, it appears on all shop pages. Is this possible?

Only desired page for the banner to appear: https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

My idea is add to Site Footer, then we can use code to move it to top of Singles Page

If you can add scrolling banner first, we can check & give the code

Cool, thanks @tuanphan.

I've now added the banner to the Footer: https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

I look forward to receiving the code for this. Much appreciated!

Hi @tuanphan Have I done the right thing by adding a banner in the Footer?

On 1/25/2024 at 10:22 PM, tuku said:

Cool, thanks @tuanphan.

I've now added the banner to the Footer: https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

I look forward to receiving the code for this. Much appreciated!

Move this?

under header + above this?

@tuanphan Yes please. Banner to sit under the header (in place of the existing one there), but only to appear on the pages of the category 'Singles'. Thank you!

Hi @tuanphan Are you still able to assist with this? Thanks 🙂

On 1/31/2024 at 12:06 AM, tuku said:

Hi @tuanphan Are you still able to assist with this? Thanks 🙂

Site is expired, you can access this link to extend it for free

Hi @tuanphan I've finally paid for the website now, so it's no longer in trial mode.
If you are still able to help with making the scrolling banner only appear on 'Singles' category shop page + 'Singles' product/item pages, that would be excellent.

Just a reminder; the banner is currently in the footer, ready to be repositioned under the Header with your code.

https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

Thanks again!

Add this code to Last Line in Code Injection > Footer

<script>
  $(function() {
  var loc = window.location.href; // returns the full URL
  if(/singles/.test(loc)) {
    $('body').addClass('singles');
  }
});
</script>
<script>
  $(document).ready(function(){
    $('.singles footer.sections .marquee-block').insertAfter('.singles header#header');
});
</script>
<style>
  header#header + .marquee-block {
    margin-top: 176px;
    display: block !important;
}
</style>
  

Then add this code to Custom CSS box

footer.sections .marquee-block {
	display: none !important;
}

Hi @tuanphan Thanks for that.

There are just a few things I would like to adjust if you are still able to assist?

1.  After adding your code, the banner has moved up, but there is now a large empty area/padding below it which is pushing other sections down the page. Can we remove all excess padding above and below the banner?

2.  I would like the banner to sit flush to the Header's horizontal border line above it - is this possible? I presume it would be a matter of removing the banner's top padding.

3.  There is also excess empty space in the Footer, where the banner used to be. Is there a way to resolve this?

Thanks again.

Add this code under

<style>
  body.singles article section:first-child {
    padding-top: 10px !important;
}
</style>

With Footer, you can consider use Classic Editor Section instead, it won't create gap. Or you can edit footer > drag Scrolling Block up over another section.

Thanks @tuanphan the code worked nicely, and I was able to move the empty banner section up within the footer.

One last question: Is there code that will reduce/remove the empty space between the banner and products in mob view too? 

Thanks.

Hi @tuanphan Just wondering if you can help with reducing/removing the empty space between the scrolling banner and products in mob view too? Thanks.

https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

You mean this space?