Product Block Elements
COMPONENT SELECTOR GUIDE
Product Block Elements
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-block-product | The outer product block container. This selector will select all product blocks. |
|
| .sqs-block-product .product-block.is-product-quick-view-enabled | The inner product block container that only selects product blocks with quick view enabled. |
|
| Image Container Elements | ||
| .sqs-block-product .image-container | The image container. |
|
| .sqs-block-product .image-container a | The image's anchor link wrapper. |
|
| .sqs-block-product .image-container img | The image element. |
|
| .sqs-block-product .sqs-product-mark-wrapper | The wrapper for the product status. This element is not visible - it's just used as a container for the actual status marker to be positioned relative to. |
|
| .sqs-block-product .product-mark | The product status marker (either "SALE" or "SOLD OUT") |
|
| .sqs-block-product .product-mark.sale | The "SALE" status marker. |
|
| .sqs-block-product .product-mark.sold-out | The "SOLD OUT" status marker. |
|
| .sqs-block-product .sqs-product-quick-view-button-wrapper | The "Quick View" button wrapper. |
|
| .sqs-block-product .sqs-product-quick-view-button | The "Quick View" button that's positioned towards the bottom of the image container. |
|
| Text Container Elements | ||
| .sqs-block-product .productDetails | The product details wrapper, which contains all elements below the image elements. |
|
| .sqs-block-product .product-title | The product title. |
|
| .sqs-block-product .product-price | The product price container. |
|
| .sqs-block-product .original-price | The original price text. |
|
| .sqs-block-product .product-excerpt | The product excerpt container. |
|
| .sqs-block-product .product-excerpt p | The prroduct excerpt paragraph. |
|
| .sqs-block-product .product-quantity-input | The quantity input container. |
|
| .sqs-block-product .quantity-label | The quantity label text. |
|
| .sqs-block-product .product-quantity-input input | The quantity input field. |
|
| .sqs-block-product .product-variants | The product variants container. |
|
| .sqs-block-product .variant-option | The inner wrapper of the product variants. |
|
| .sqs-block-product .variant-option-title | The product variants label text. |
|
| .sqs-block-product .variant-select-wrapper | The product variants select field wrapper. |
|
| .sqs-block-product .variant-select-wrapper select | The product variants select field. |
|
| .sqs-block-product .sqs-add-to-cart-button-wrapper | The Add-to-Cart button wrapper. |
|
| .sqs-block-product .sqs-add-to-cart-button | The Add-to-Cart button. |
|
HTML Structure Explanation
The HTML structure of the “Slideshow” gallery block, including it’s descendant elements.
The HTML structure of the “Slideshow” gallery block, including it’s descendant elements.
Unique Product Blocks Using the Block ID
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| #block-yui_3_17_2_1_1690691237911_5006 | Targets a unique Squarespace element using its unique ID attribute. The selector in the left column is just the general form of the block ID, but the characters that come after "#block-" will be different for each element. |
|
HTML Structure Explanation
Every Squarespace block element, such as the Product Block, will have a class name of “.sqs-block”. This element will additionally have an ID attribute that begins with “block-” and ends with a random string of characters as pictured below.
An Product block element with a class name of “sqs-block” and an id attribute.