CSS Tricks Prepare your Squarespace Store for the Holiday Season

Below you will find the CSS snippets that we covered in the webinar. Feel free to contact me if you have comments, questions or other tips!

Flaco Zacarias

Change the size of your Shopping Cart Quantity number

/* circle */
.icon-cart-quantity {
  background-color: black;
  /* choose any color. Focus on contrast */
  top: -1.2rem;
  /* vertical position relative to the cart icon */
  right: -1.2rem;
  /* horizontal position relative to the cart icon */
  border-radius: 50%;
  /* 50% makes it a circle, "0" makes it a square */
  padding: .6em;
  /* some space between the number and the edge of the circle */
  text-align: center;
  width: 2em;
  height: 2em;
  display: flex;
  /* these three lines center the SPAN below vertically and horizontally */
  justify-content: center;
  align-items: center;
}

/* number */
.icon-cart-quantity span {
  color: white;
  /* choose any color. Focus on contrast */
  font-weight: 700;
  /* 700 means bold. 400 means normal. */
  font-size: 200%;
  /* twice the original size */
  display: block;
}

Hide the quantity box if you sell one product per user

.product-quantity-input {
  display: none !important;
}

Add custom bullet points or images to a list

Copy the code from your SVG file to yoksel.github.io/url-encoder/. Copy the code from "Ready for CSS" and replace the background-image line you'll find below.

main ul:not(.archive-group-list) li,
ul[data-rte-list] li {
  margin-left: 0;
  padding-left: 0;
}

main ul:not(.archive-group-list) li p,
ul[data-rte-list] li p {
  margin-left: 0;
  padding-left: 0;
}

main ul:not(.archive-group-list) li>*:first-child,
ul[data-rte-list] li>*:first-child {
  padding-left: 0;
  margin-left: 0;
}

main ul:not(.archive-group-list) li>*:first-child::before,
ul[data-rte-list] li>*:first-child::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ff6600' d='M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z'/%3E%3C/svg%3E%0A");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 1em;
  min-width: .5em;
  height: 1em;
  margin: 0 .25em 0 -2em;
}

How to remove the automatic hyperlink underline from the navigation

The underline is a background. Change the declaration to none and add !important to overwrite other declaration. You can change the color of the link also, which is highly recommended because there is no other way to display which link is the active.

.header-nav-item--active a {
  background-image: none !important;
  color: red !important;
}

How to display the product name and price on top of the thumbnail

@media only screen and (min-device-width: 1025px) {

  /* we hide it for smaller device screens like phones and tablets because you can't hover a product, you need to tap */
  .grid-item {
    position: relative;
  }

  .grid-meta-wrapper {
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, .5);
    /* first three values are RGB; the last one is the opacity */
    padding: .5em 1em;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all ease-in .15s;
    /* quick animation to display the name and info box */
  }

  .grid-item:hover .grid-meta-wrapper {
    opacity: 1;
  }

  /* use this to adjust the space between rows and columns */
  .products.collection-content-wrapper .list-grid {
    grid-column-gap: 1.5vw;
    grid-row-gap: 1.5vw;
  }
}