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

Is the selector you're looking for not here? Let us know.


Previous
Previous

Add-On Products

Next
Next

Product Page (Half Layout)