Creative Ways to Customize Your Squarespace Product Page

storeproduct

Nov 19

In this tutorial, I'm sharing some of my favorite CSS tricks that you can use to make your product pages uniquely yours. We’ll update the spacing on the quantity input, create a custom style for labels, customize breadcrumbs, add an image counter, and adjust gallery image controls, all with simple code snippets you can copy and paste.

The codes from this tutorial are below, along with links to related resources that can help you customize them even more!

Here are the codes from this tutorial; make sure you update the values to make them uniquely yours!

Reduce Quantity Input Padding

/* reduce quantity padding - insidethesquare.co code */
.product-quantity-input input{
padding: 10px!important;
font-size:20px
}

Breadcrumb, Variant & Quantity label

/* breadcrumb, variant & quantity label - insidethesquare.co code */
.variant-option-title, .quantity-label, .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
text-transform:uppercase;
letter-spacing: 2px;
font-weight:normal
}

Custom Breadcrumb Separator Symbol

You can use any unicode character in this one! Check out insidethesquare.co/unicode for some ideas

/* change breadcrumb separator - insidethesquare.co code */
.ProductItem-nav-breadcrumb-separator:after{
content:"/"
}

Show image count on desktop

/* show image count on desktop - insidethesquare.co code */
.ProductItem-gallery-current-slide-indicator{
display:inline-block;
background:#fff;
padding: 5px
}

Hide thumbnails

/*  hide product thumbnails - insidethesquare.co code */
.ProductItem-gallery .ProductItem-gallery-scroll{
display:none!important
}

Move image gallery arrows to the bottom center

/*  bottom center gallery controls - insidethesquare.co code */
.ProductItem-gallery-carousel-controls {
  position: relative;
  bottom: auto;
  margin-top: 1rem;
  transform: scale(0.5);
}