Product Page (Wrap Layout)

Bookmark Selector

---

Product Page Selectors

Use these selectors to target product page (wrap 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-layout-wrap-around .pdp-gallery-slides img

---

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

---

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

Suggest a Selector