Store Page Individual Listing
COMPONENT SELECTOR GUIDE
Global Store Page Elements (Elements Common Among All Layouts)
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) |
|---|---|---|
| Store Page Selectors | ||
| body.collection-type-products.view-item | The body element for store item pages. |
|
| .collection-type-products | The outer container for the store page elements, including the product details section and the additional details section. |
|
| Breadcrumb Navigation | ||
| .collection-type-products .ProductItem-nav | The outer container for the breadcrumb navigation. |
|
| .collection-type-products .ProductItem-nav-breadcrumb-link | The breadcrumb navigation links. |
|
| .collection-type-products .ProductItem-nav-breadcrumb-separator | The breadcrumb navigation separator element. |
|
| .collection-type-products .ProductItem-nav-breadcrumb-separator:after | The pseudo-element that adds the right breadcrumb arrow. |
|
| Summary Container | ||
| .collection-type-products .ProductItem-summary | The container for the product summary details, including the gallery items and the text, button, and input elements. |
|
| Product Image Gallery | ||
| Because the galleries are so different based on the store page layout, you'll need to use the image gallery selectors in the more specific store page layouts on this page. | ||
| Product Details | ||
| .collection-type-products .product-details | The container for the product details, including the title, price, description, Add-to-Cart button, etc. |
Gallery Placement: Right
Gallery Placement: Left
|
| .collection-type-products .ProductItem-details-title, .pdp-layout .ProductItem-details-title | The product title text. |
|
| .collection-type-products .product-price | The price text. |
|
| .collection-type-products .original-price | The original price text if the item is marked as "On Sale". |
|
| .collection-type-products .ProductItem-details-excerpt, .pdp-layout .pdp-details-excerpt | The product title text. |
|
| .collection-type-products .ProductItem-details-excerpt p, .pdp-layout .pdp-details-excerpt p | The product title text. |
|
| .collection-type-products .product-quantity-input | The container for the quantity input elements (label and input). |
|
| .collection-type-products .product-quantity-input .quantity-label | The label text for the quantity input field. |
|
| .collection-type-products .product-quantity-input input | The quantity number input field. |
|
| .collection-type-products .product-variants .variant-option | The container for the variant select field element (label and select). |
|
| .collection-type-products .product-variants .variant-option .variant-option-title | The label text for the variant select field. |
|
| .collection-type-products .ProductItem-details .variant-select-wrapper | The container for the variant select field. |
|
| .collection-type-products .variant-select-wrapper:after | The down arrow in the select field. |
|
| .collection-type-products .product-variants .variant-option select | The variant select field. |
|
| .collection-type-products .ProductItem-details .product-variants .variant-radiobtn-wrapper | The container for the variant radio buttons. |
|
| .collection-type-products .product-variants .variant-radiobtn-wrapper label | The variant radio button labels. |
|
| .collection-type-products .sqs-add-to-cart-button-wrapper | The container for the Add-to-Cart button. |
|
| .collection-type-products .sqs-add-to-cart-button | The Add-to-Cart button. |
|
| .collection-type-products .ProductItem-additional | The container for the additional details for products. |
|
HTML Structure Explanation
The HTML structure of the elements on the product page details. It starts with the container with the class names “products” and “collection-content-wrapper” and the relevant descendant elements.
The HTML structure of the elements on the product page details. It starts with the container with the class names “products” and “collection-content-wrapper” and the relevant descendant elements.
“Simple” Store Page Layout 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) |
|---|---|---|
| Store Layout Selectors | ||
| .products.product-layout-side-by-side | The outer container for the store page elements, including the product details section and the additional details section. |
|
| Breadcrumb Navigation | ||
| .products.product-layout-side-by-side .ProductItem-nav | The outer container for the breadcrumb navigation. |
|
| .products.product-layout-side-by-side .ProductItem-nav-breadcrumb-link | The breadcrumb navigation links. |
|
| .products.product-layout-side-by-side .ProductItem-nav-breadcrumb-separator | The breadcrumb navigation separator element. |
|
| .products.product-layout-side-by-side .ProductItem-nav-breadcrumb-separator:after | The pseudo-element that adds the right breadcrumb arrow. |
|
| Summary Container | ||
| .products.product-layout-side-by-side .ProductItem-summary | The container for the product summary details, including the gallery items and the text, button, and input elements. |
|
| Product Image Gallery | ||
| .products.product-layout-side-by-side .ProductItem-gallery | The container for the product images in the gallery. |
Gallery Placement: Right
Gallery Placement: Left
|
| .products.product-layout-side-by-side .ProductItem-gallery-thumbnails | The container for the thumbnail image buttons below the current image. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-thumbnails-item | The individual thumbnail buttons. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-slides | The container for the larger product image slides. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-slides img | The image elements inside of the product image slides. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-slides-item.selected | The product image container currently being shown. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-slides-item.selected img | The product image element currently being shown. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-carousel-controls | The container for the left and right arrow controls on top of the current image. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-prev | The "Previous" arrow container. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-prev:after | The ":after" pseudo-element which is used to add and style the "Previous" arrow icon. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-next | The "Next" arrow container. |
|
| .products.product-layout-side-by-side .ProductItem-gallery-next:after | The ":after" pseudo-element which is used to add and style the "Next" icon. |
|
| Product Details | ||
| .products.product-layout-side-by-side .ProductItem-details | The container for the product details, including the title, price, description, Add-to-Cart button, etc. |
Gallery Placement: Right
Gallery Placement: Left
|
| .products.product-layout-side-by-side .ProductItem-details-title | The product title text. |
|
| .products.product-layout-side-by-side .ProductItem-product-price | The price container. |
|
| .products.product-layout-side-by-side .ProductItem-product-price .product-price | The price text. |
|
| .products.product-layout-side-by-side .ProductItem-product-price .original-price | The original price text if the item is marked as "On Sale". |
|
| .products.product-layout-side-by-side .ProductItem-details-excerpt | The product excerpt container. |
|
| .products.product-layout-side-by-side .ProductItem-details-excerpt p | The product excerpt text. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-quantity-input | The container for the quantity input elements (label and input). |
|
| .products.product-layout-side-by-side .ProductItem-details .product-quantity-input .quantity-label | The label text for the quantity input field. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-quantity-input input | The quantity number input field. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-variants .variant-option | The container for the variant select field element (label and select). |
|
| .products.product-layout-side-by-side .ProductItem-details .product-variants .variant-option .variant-option-title | The label text for the variant select field. |
|
| .products.product-layout-side-by-side .ProductItem-details .variant-select-wrapper | The container for the variant select field. |
|
| .products.product-layout-side-by-side .ProductItem-details .variant-select-wrapper:after | The down arrow in the select field. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-variants .variant-option select | The variant select field. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-variants .variant-radiobtn-wrapper | The container for the variant radio buttons. |
|
| .products.product-layout-side-by-side .ProductItem-details .product-variants .variant-radiobtn-wrapper label | The variant radio button labels. |
|
| .products.product-layout-side-by-side .ProductItem-details .sqs-add-to-cart-button-wrapper | The container for the Add-to-Cart button. |
|
| .products.product-layout-side-by-side .ProductItem-details .sqs-add-to-cart-button | The Add-to-Cart button. |
|
| .products.product-layout-side-by-side .ProductItem-additional | The container for the additional details for products. |
|
HTML Structure Explanation
The HTML structure of the elements on the product page details. It starts with the container with the class names “products” and “collection-content-wrapper” and the relevant descendant elements.
The HTML structure of the elements on the product page details. It starts with the container with the class names “products” and “collection-content-wrapper” and the relevant descendant elements.
“Half” Store Page Layout Elements
Relevant CSS Selectors
Some of these selectors are deceptive-looking, meaning the selector name doesn’t seemingly match the HTML element being described, but they are correct.
| 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) |
|---|---|---|
| Store Layout Selectors | ||
| .pdp-layout.pdp-layout-full-bleed | The "Half" layout. |
|
| Breadcrumb Navigation | ||
| .pdp-layout.pdp-layout-full-bleed .ProductItem-nav | The outer container for the breadcrumb navigation. |
|
| .pdp-layout.pdp-layout-full-bleed .ProductItem-nav-breadcrumb | The parent container for the breadcrumb navigation items. |
|
| .pdp-layout.pdp-layout-full-bleed .ProductItem-nav-breadcrumb-link | The breadcrumb navigation links. |
|
| .pdp-layout.pdp-layout-full-bleed .ProductItem-nav-breadcrumb-separator | The breadcrumb navigation separator element. |
|
| .pdp-layout.pdp-layout-full-bleed .ProductItem-nav-breadcrumb-separator:after | The pseudo-element that adds the right breadcrumb arrow. |
|
| Summary Container | ||
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery | The container for the product summary details, including the gallery items and the text, button, and input elements. |
|
| Product Image Gallery | ||
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery-images | The container for the product images in the gallery. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery-slides | The product image containers. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery-slides img | The product image elements. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery-slides.selected | The product image container currently being shown. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-gallery-slides.selected img | The product image element currently being shown. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-carousel-controls | The container for the left and right arrow controls on top of the current image. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-carousel-controls .chevron-prev | The "Previous" arrow container (not the actual arrow). |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-carousel-controls .chevron-prev .chevron--left | The "Previous" arrow element. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-carousel-controls .chevron-next | The "Next" arrow container (not the actual arrow). |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-carousel-controls .chevron-next .chevron--right | The "Next" arrow element. |
|
| Product Details | ||
| .pdp-layout.pdp-layout-full-bleed .pdp-form-wrapper | The container for the product details, including the breadcrumb navigation, title, price, description, Add-to-Cart button, etc. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details | The container for the product details, including the title, price, description, Add-to-Cart button, etc. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-title | The product title text. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-price | The price container. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-price .product-price | The price text. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-price .original-price | The original price text if the item is marked as "On Sale". |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-excerpt | The product excerpt container. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details-excerpt p | The product excerpt text. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .product-quantity-input | The container for the quantity input elements (label and input). |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .product-quantity-input .quantity-label | The label text for the quantity input field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .product-quantity-input input | The quantity number input field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-option | The container for the variant select field element (label and select). |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-option .variant-option-title | The label text for the variant select field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-select-wrapper | The container for the variant select field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-select-wrapper:after | The down arrow in the select field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-option select | The variant select field. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-radiobtn-wrapper | The container for the variant radio buttons. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .variant-radiobtn-wrapper label | The variant radio button labels. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .sqs-add-to-cart-button-wrapper | The container for the Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-full-bleed .pdp-details .sqs-add-to-cart-button | The Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-full-bleed .products.collection-content-wrapper | The outer container for the additional details for products. |
|
| .pdp-layout.pdp-layout-full-bleed .ProductItem-additional | The container for the additional details for products. |
|
HTML Structure Explanation
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-bleed” and the relevant descendant elements.
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-bleed” and the relevant descendant elements.
“Full” Store Page Layout Elements
Relevant CSS Selectors
Some of these selectors are deceptive-looking, meaning the selector name doesn’t seemingly match the HTML element being described, but they are correct.
| 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) |
|---|---|---|
| Store Layout Selectors | ||
| .pdp-layout.pdp-layout-full-width-carousel | The "Full" layout. |
|
| Breadcrumb Navigation | ||
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-nav | The outer container for the breadcrumb navigation. |
|
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-nav-breadcrumb | The parent container for the breadcrumb navigation items. |
|
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-nav-breadcrumb-link | The breadcrumb navigation links. |
|
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-nav-breadcrumb-separator | The breadcrumb navigation separator element. |
|
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-nav-breadcrumb-separator:after | The pseudo-element that adds the right breadcrumb arrow. |
|
| Summary Container | ||
| .pdp-layout.pdp-layout-full-width-carousel .pdp-layout-full-width-carousel > section | The container for the product summary details, including the breadcrumb navigation, gallery items and the text, button, and input elements. |
|
| Product Image Gallery | ||
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery | The container for the full-width gallery. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery-images | The container for the product images in the gallery. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery-slides | The product image containers. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery-slides img | The product image elements. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery-slides.selected | The product image container currently being shown. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-gallery-slides.selected img | The product image element currently being shown. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-carousel-controls | The container for the left and right arrow controls on top of the current image. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-carousel-controls .chevron-prev | The "Previous" arrow container (not the actual arrow). |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-carousel-controls .chevron-prev .chevron--left | The "Previous" arrow element. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-carousel-controls .chevron-next | The "Next" arrow container (not the actual arrow). |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-carousel-controls .chevron-next .chevron--right | The "Next" arrow element. |
|
| Product Details | ||
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details | The container for the product details, including the title, price, description, Add-to-Cart button, etc. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-desc | The container for the details on the left, including the title, price, the excerpt and the breadcrumb navigation. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-title | The product title text. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-price | The price container. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-price .product-price | The price text. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-price .original-price | The original price text if the item is marked as "On Sale". |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-excerpt | The product excerpt container. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details-excerpt p | The product excerpt text. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-selection | The container for the details on the right, including the variant selector, the quantity input field, and the Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .product-quantity-input | The container for the quantity input elements (label and input). |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .product-quantity-input .quantity-label | The label text for the quantity input field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .product-quantity-input input | The quantity number input field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-option | The container for the variant select field element (label and select). |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-option .variant-option-title | The label text for the variant select field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-select-wrapper | The container for the variant select field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-select-wrapper:after | The down arrow in the select field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-option select | The variant select field. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-radiobtn-wrapper | The container for the variant radio buttons. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .variant-radiobtn-wrapper label | The variant radio button labels. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .sqs-add-to-cart-button-wrapper | The container for the Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-full-width-carousel .pdp-details .sqs-add-to-cart-button | The Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-full-width-carousel .products.collection-content-wrapper | The outer container for the additional details for products. |
|
| .pdp-layout.pdp-layout-full-width-carousel .ProductItem-additional | The container for the additional details for products. |
|
HTML Structure Explanation
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-width-carousel” and the relevant descendant elements.
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-width-carousel” and the relevant descendant elements.
“Wrap” Store Page Layout Elements
Relevant CSS Selectors
Some of these selectors are deceptive-looking, meaning the selector name doesn’t seemingly match the HTML element being described, but they are correct.
| 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) |
|---|---|---|
| Store Layout Selectors | ||
| .pdp-layout.pdp-layout-wrap-around | The "Wrap" layout. |
|
| Breadcrumb Navigation | ||
| .pdp-layout.pdp-layout-wrap-around .ProductItem-nav | The outer container for the breadcrumb navigation. |
|
| .pdp-layout.pdp-layout-wrap-around .ProductItem-nav-breadcrumb | The parent container for the breadcrumb navigation items. |
|
| .pdp-layout.pdp-layout-wrap-around .ProductItem-nav-breadcrumb-link | The breadcrumb navigation links. |
|
| .pdp-layout.pdp-layout-wrap-around .ProductItem-nav-breadcrumb-separator | The breadcrumb navigation separator element. |
|
| .pdp-layout.pdp-layout-wrap-around .ProductItem-nav-breadcrumb-separator:after | The pseudo-element that adds the right breadcrumb arrow. |
|
| Summary Container | ||
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery | The container for the product summary details, including the gallery items and the text, button, and input elements. |
|
| Product Image Gallery | ||
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery-images | The container for the product images in the gallery and the product details. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery-slides.selected | The product image container being shown as the main image at the top. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery-slides.selected img | The product image element being shown as the main image at the top. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery-slides | The other product image containers that are shown below the main details container. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-gallery-slides img | The product image elements that are shown below the main details container. |
|
| Product Details | ||
| .pdp-layout.pdp-layout-wrap-around .pdp-form-wrapper | The container for the product details, including the breadcrumb navigation, title, price, description, Add-to-Cart button, etc. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details | The container for the product details, including the title, price, description, Add-to-Cart button, etc. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-title | The product title text. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-price | The price container. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-price .product-price | The price text. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-price .original-price | The original price text if the item is marked as "On Sale". |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-excerpt | The product excerpt container. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details-excerpt p | The product excerpt text. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .product-quantity-input | The container for the quantity input elements (label and input). |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .product-quantity-input .quantity-label | The label text for the quantity input field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .product-quantity-input input | The quantity number input field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-option | The container for the variant select field element (label and select). |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-option .variant-option-title | The label text for the variant select field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-select-wrapper | The container for the variant select field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-select-wrapper:after | The down arrow in the select field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-option select | The variant select field. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-radiobtn-wrapper | The container for the variant radio buttons. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .variant-radiobtn-wrapper label | The variant radio button labels. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .sqs-add-to-cart-button-wrapper | The container for the Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-wrap-around .pdp-details .sqs-add-to-cart-button | The Add-to-Cart button. |
|
| .pdp-layout.pdp-layout-wrap-around .ProductItem-additional | The container for the additional details for products. |
|
HTML Structure Explanation
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-width-carousel” and the relevant descendant elements.
The HTML structure of the elements on the product page details. It starts with the container with the class names “pdp-layout-full-width-carousel” and the relevant descendant elements.
Unique Store Item Pages
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) |
|---|---|---|
| #item-6520b5bd783bac009bc026f2 | Targets a unique store item page using its ID attribute. The selector in the left column is just the general form of the collection ID, but the characters that come after "#item-" will be different for each element. |
|
HTML Structure Explanation
The <body> HTML element with an id attribute that corresponds to the specific store item page.
The <body> HTML element with an id attribute that corresponds to the specific store item page.