Jump to content

7.1 Hide category at top of each store page

Recommended Posts

Posted

Site URL: https://gregmaroney.com/songbooks

I asked this back in march and got an answer that seemed to work. 
The following code was added at Home->Design->custom css

.category-filter-container {
    display: none;
}

It turns out that it only works on one store page (albums) but not several others. 
I don't have a store page that has all products, I set up a separate page for each category, so I don't need/want that single category name taking up room at the top of each page.

I tried adding it to each store page, in header code but that didn't work.

Any help would be appreciated, thanks

Posted (edited)

thank you for the reply, but the categories are still there. I have 5 "store collection" pages and 4 have the unwanted category.
I can't see a difference anywhere between those 4 and the 5th one, Albums ~ Physical,  that doesn't display it. Is it because they aren't h3?

Also, is there a way to have add to cart buttons on a store collection page?

Thank you

 

1918591875_ScreenShot2020-09-25at8_29_37AM.thumb.jpg.867ab1b5e3751b80e4081626b99652f2.jpg1116284523_ScreenShot2020-09-25at8_34_29AM.thumb.jpg.c718efca98790794c1dcbf580dd0dced.jpg

Edited by lamaroney
added example
Posted

Taunphan, I found where to hide that category title

store settings/ categories/edit/filter visibility/off

thank you though for your time

I would still like to know if it is possible to have add to cart buttons on a store collection page. 

Linda

 

Posted
On 9/25/2020 at 7:58 PM, lamaroney said:

Taunphan, I found where to hide that category title

store settings/ categories/edit/filter visibility/off

thank you though for your time

I would still like to know if it is possible to have add to cart buttons on a store collection page. 

Linda

 

Hi.

I see you solved with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  .products .grid-item {
    padding-bottom: 60px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
  }
</style>
<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted
On 4/6/2022 at 9:30 PM, spacetripsounds said:

I was wondering if it's possible to determine the "Add To Cart" button color within the code?

Im trying to change the color of the add to cart buttons to orange (same color as the add to cart button on the home page) on this page:

https://www.spacetripsounds.com/freedownloads

Use this CSS

div.sqs-add-to-cart-button div {
    background-color: #e95113;
    padding: 5px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.