Digital Product Block Elements
COMPONENT SELECTOR GUIDE
Digital 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 Container | ||
| .sqs-block-pricing-plan | The outer digital product block container. This selector will select all digital product blocks. |
|
| Top Buttons | ||
| .sqs-block-pricing-plan .pricing-plan-pricing-toggle-wrapper | The outer container for the toggle buttons for pricing plans with multiple payment options. |
|
| .sqs-block-pricing-plan .pricing-plan-pricing-options | The parent container for the toggle buttons. |
|
| .sqs-block-pricing-plan .left-option | The container for the left toggle button. |
|
| .sqs-block-pricing-plan .right-option | The container for the right toggle button. |
|
| .sqs-block-pricing-plan .pricing-plan-pricing-option-button | Both of the pricing plan toggle button elements. |
|
| .sqs-block-pricing-plan .pricing-plan-pricing-option-button.left-button | The left toggle button element. |
|
| .sqs-block-pricing-plan .pricing-plan-pricing-option-button.right-button | The right toggle button element. |
|
| .sqs-block-pricing-plan .pricing-plan-pricing-option-selected | The currently selected toggle button. |
|
| Digital Product Info | ||
| .sqs-block-pricing-plan .productDetails | The product details container, which contains the product title, price, description, the "Join" button, and the benefits. |
|
| .sqs-block-pricing-plan .pricing-plan-title | The product title. |
|
| .sqs-block-pricing-plan .pricing-plan-product-price | The container for the price elements. |
|
| .sqs-block-pricing-plan .pricing-plan-price-amount | The product amount. |
|
| .sqs-block-pricing-plan .pricing-plan-price-billing-period | The product billing period. |
|
| .sqs-block-pricing-plan .pricing-plan-description | The product description. |
|
| .sqs-block-pricing-plan .join-button | The "Join" Button | |
| .sqs-block-pricing-plan .pricing-plan-benefits-divider | The divider that comes after the "Join" button if the benefits are enabled. |
|
| .sqs-block-pricing-plan .pricing-plan-benefit-description | Each of the product benefit description items. |
|
HTML Structure Explanation
The HTML structure of the Digital Product Blocks.
The HTML structure of the Digital Product Blocks.
Unique Digital 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 Digital 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.
A Digital Product block element with a class name of “sqs-block” and an id attribute.