Product Block & Page CSS Targets

Welcome to our Squarespace ecommerce tip page, where you can find CSS targeting elements to help you optimize the look and feel of your online store. With these you can create a unique and visually stunning ecommerce store that will help you stand out from the competition.

At our Squarespace ecommerce CSS tip page, we are committed to helping you create an online store that not only looks great, but also functions flawlessly. So whether you're looking to optimize your store's appearance or improve the user experience, we have the CSS tips you need to succeed.




Prodcut Block

.product-block .productDetails .product-title - product block title

.product-block .productDetails .product-price - prodcut block price

div.quantity-label - product block quanity text

.product-block .productDetails .product-quantity-input input - product block quanity box




Product Page

.ProductItem .ProductItem-details h1.ProductItem-details-title - product page product title

.ProductItem-details .ProductItem-product-price .product-price - product page product price

.ProductItem-details .quantity-label - product page quanity label

.ProductItem-details .product-quantity-input input - product page quanity box

  • Example CSS Elements

    • border:solid 1px pink;

    • border-radius:360px;

.sqs-add-to-cart-button - add to cart button

.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link - bread crumb nav link

example CSS:

.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link {
  font-family:FONT_NAME;
  font-size: SIZE;
  color: HEX CODE;
}

.ProductItem .ProductItem-nav-breadcrumb span - breadcrumb arrow seperator

Example CSS:

.ProductItem .ProductItem-nav-breadcrumb span {
  color: HEX CODE;
}
 

Product Varient

.ProductItem-details .variant-option-title - prodcut variant title

Example CSS:

.ProductItem-details .variant-option-title {
  font-family:FONT_NAME;
  font-size: 1rem;
  padding-bottom: 1rem;
  color: purple;
}

.ProductItem-details .variant-select-wrapper - product variant box

Example CSS:

.ProductItem-details .variant-select-wrapper {
  width:50%;
  padding: 1rem;
  color: purple;
}
 
CSSSquare Refresh