Store Pages

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors: 

Squarespace Element Description
Store Listing Page Refers to elements that appear on the main listing view of store collection pages
Store Page Individual Listing Refers to elements that appear on individual product pages

  CSS Code Snippets for Customizing Store Pages


Make Store Page Top and Side Navigation a Column Display on Mobile

 
//Start: Make Store Page Top and Side Nav Column Display on Mobile
@media screen and (max-width: 769px) {
  .collection-type-products .products-list.products.collection-content-wrapper {
    .breadcrumb-separator {
      display: none;
    }
    .nested-category-breadcrumb {
      display: none;
    }

    //Top Nav
    .nested-category-children {
      display: initial;

      .nested-category-breadcrumb-link {
        margin-left: 0;
        padding: 5px 0;
        display: block;
      }
    }

    //Side Nav
    .nested-category-children {
      display: none;
    }
    .nested-category-tree-wrapper {
      display: initial;
      float: none;
      
      .category-item ul {
        display: block;
      }
    }
    .nested-category-tree-wrapper ul {
      display: initial;
    }
    .category-item {
      text-align: left;
    }
    .category-link {
      margin-left: 0;
      display: block;
      padding: 5px;
    }
  }
}
//End: Make Store Page Top and Side Nav Column Display on Mobile

Change thickness and color of “Next” and “Previous” controls for gallery images on “Simple” layout product pages.

 
//Start: Change color and thickness of store item "Simple" carousel arrows
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-color: #000000;
    border-width: 3px 3px 0 0;
}
//End: Change color and thickness of store item "Simple" carousel arrows

Add border around active gallery image on store item "Simple" layout

 
//Start: Add border around active gallery image on store item "Simple" layout
.ProductItem-gallery-thumbnails-item[aria-current="true"] img {
    border: 2px solid #000000;
}
//End: Add border around active gallery image on store item "Simple" layout

Add a banner to a specific product on store listing page and individual page

The “data-item-id” attribute can be found on the grid items on the store listing page, and the matching “id” attribute on the <body> HTML element on the individual store item page. Notice the “data-item-id” value and the value after the “#item-” in the id attribute for the product will match.

 
//Start: Add banner to specific product on store listing page and individual page
.products-list [data-item-id="6520b5bd783bac009bc026f2"]:before {
  content: "COMING SOON";
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  background: green;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#item-6520b5bd783bac009bc026f2 .product-details:before {
  content: "Coming Soon";
  background: green;
  color: #ffffff;
  padding: 10px;
}
//End: Add banner to specific product on store listing page and individual page

Hide an element(s) only on store collection pages, including the listing page and the individual store item pages

//Start: Hide element(s) only on store collection pages
body.collection-type-products {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on store collection pages

Hide an element(s) only on store listing pages

//Start: Hide element(s) only on store listing pages
body.collection-type-products.view-list {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on store listing pages

Hide an element(s) only on store item pages

//Start: Hide element(s) only on store item pages
body.collection-type-products.view-item {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on store item pages
Previous

Video Pages
Next

Events Pages