Product Page (Half Layout)
Product Page Selectors
Use these selectors to target product page (half 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
.pdp-layout .ProductItem-nav-breadcrumb-link
Breadcrumb Navigation Separator (>)
.pdp-layout .ProductItem-nav-breadcrumb span
Product Title
.pdp-layout .pdp-details-title
Product Price
.pdp-layout .pdp-details-price
Product Sale Tag
.pdp-layout .pdp-details .product-mark.sale
Product Description
.pdp-layout .pdp-details .pdp-details-excerpt
Product Images
.pdp-gallery-images
Product Gallery (Left Arrow)
.pdp-carousel-controls .chevron-prev
Product Gallery (Right Arrow)
.pdp-carousel-controls .chevron-prev
Variant Title
.pdp-layout .pdp-details .variant-option-title
Variant Dropdown
.pdp-layout .pdp-details .variant-select-wrapper
Variant Dropdown Text
.pdp-layout .pdp-details .variant-option select
Variant Dropdown Arrow (v)
.pdp-layout .pdp-details .variant-select-wrapper::after
Quantity Title
.pdp-layout .pdp-details .quantity-label
Quantity Input Field
.pdp-layout .pdp-details .product-quantity-input input
Sold Out Text
.pdp-layout .ProductItem-details .variant-out-of-stock
Add To Cart Button
.pdp-layout .pdp-details .sqs-add-to-cart-button
