Product Blocks
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Product Block Elements | Refers to product block selectors. |
| Product Quickview Lightbox Elements | CSS does not allow us to modify elements inside of HTML iframe elements. Since the lightbox is inside of an iframe HTML element, we cannot write CSS that will apply to these elements. |
CSS Code Snippets for Customizing Product Blocks
Make product block variant select fields look like the quantity selector field
//Start: Make product block variant select fields look like the quantity selector field
.sqs-block-product .variant-select-wrapper select {
padding: calc( 1.2em - calc(1em - 1rem )) 1.25em;
background: transparent;
}
//End: Make product block variant select fields look like the quantity selector field