Product Page (Simple Layout)
Product Page Selectors
Use these selectors to target product page (simple layout) elements.
Selectors work with Squarespace 7.1
Knowing the basics of CSS is recommended
Helpful starting points: Visit the free plugin library for pre-applied styles and helpful starting points for customizations.
Breadcrumb Navigation
.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link
Breadcrumb Navigation Separator (>)
.ProductItem .ProductItem-nav-breadcrumb span
Product Title
.ProductItem .ProductItem-details h1.ProductItem-details-title
Product Price
.ProductItem .ProductItem-details .product-price
Product Sale Tag
.ProductItem-details .product-mark.sale
Product Description
.ProductItem-details-excerpt
Product Images
.ProductItem-gallery img
Product Thumbnails (Slideshow)
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails-item img
Product Images (Slideshow Arrows)
.ProductItem .product-item-gallery-carousel-control::after
Product Images (Stacked)
.tweak-product-basic-item-gallery-design-stacked .ProductItem-gallery-slides-item
Variant Title
.ProductItem-details .variant-option-title
Variant Dropdown
.ProductItem .ProductItem-details .variant-select-wrapper select
Variant Dropdown Text
.ProductItem .ProductItem-details .variant-select-wrapper
Variant Dropdown Arrow (v)
.ProductItem .ProductItem-details .variant-select-wrapper::after
Variant Buttons (Non-Selected)
.ProductItem-details .variant-option .sqs-button-element--secondary
Varaint Buttons (Selected)
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label
Varaint Buttons (Sold Out / Unavailable)
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:disabled + label
Quantity Title
.ProductItem-details .quantity-label
Quantity Input Field
.ProductItem .ProductItem-details .product-quantity-input input
Sold Out Text
.ProductItem-details .variant-out-of-stock
Add To Cart Button
.ProductItem-details .sqs-add-to-cart-button
