Add-On Products


Add-On Products Selectors

Use these selectors to target add-on product 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.


Add-On Product Container

.product-details .pdp-product-add-ons .add-on-card

Add-On Product Image

.product-details .pdp-product-add-ons .add-on-thumbnail

Add-On Product Title

.product-details .pdp-product-add-ons .add-on-details .add-on-title

Add-On Product Price

.product-details .pdp-product-add-ons .add-on-details .product-price

Add-On Product Variant Dropdown

.product-details .pdp-product-add-ons .product-variants .variant-option select

Add-On Product Variant Text

.product-details .pdp-product-add-ons .product-variants .variant-option select

Add-On Product Variant Arrow (v)

.ProductItem .ProductItem-details .variant-select-wrapper::after

Add To Cart Button (Circle)

.product-details .pdp-product-add-ons .sqs-add-to-cart-button

Add To Cart Icon (+)

.product-details .pdp-product-add-ons .add-on-add-to-cart-wrapper .sqs-add-to-cart-button svg.plus-icon

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


Previous
Previous

Blog Paywall

Next
Next

Product Page (Simple Layout)