Store Listing Page

COMPONENT SELECTOR GUIDE

Store Listing Page Grid Elements (Not Including Side or Top Navigation)

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)
body.collection-type-products.view-list	The body element for store listing pages.
.products-list	The outer wrapper for the store page elements, including the navigation, the title and the store grid layout.
.products-list .nested-category-title	The category title at the top of the page.
.products-list .list-grid	The parent container for the store grid items.
.products-list .grid-item	The children of the store grid container.
.products-list .grid-image	An ancestor element of the actual image element.
.products-list .grid-image img	The image element of the grid item.
.products-list .grid-meta-wrapper	The container for the text elements including the product title, the product status (sold out or on sale) and the price.
.products-list .grid-main-meta	The container for the product title and prices.
.products-list .grid-title	The product name.
.products-list .product-price	The price text.
.products-list .original-price	If the product is on sale, this references the original price that is crossed out.
.products-list .grid-meta-status	The product status container.
.products-list .grid-meta-status .product-mark	The product status text that shows up on the right side of the grid item.
.products-list .grid-meta-status .product-mark.sold-out	The "SOLD OUT" text if the product is out of stock.
.products-list .grid-meta-status .product-mark.sale	The "SALE" text if the product is on sale.
.products-list .sqs-add-to-cart-button	The "Add to Cart" button if it is enabled on the listing page.
.products-list .product-variants	The parent container for the variant select wrapper.
.products-list .product-variants select	The parent variant select field.

HTML Structure Explanation

Each store page grid container with it’s descendant elements highlighted.

Unique Store Item Grid Element

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)
.products-list [data-item-id="6520b5bd783bac009bc026ea"]	Targets a unique store item using its "data-item-id" attribute. The selector in the left column is just the general form of the attribute value, but this value will be different for each element.

HTML Structure Explanation

The store listing page grid item with the attribute “data-item-id”.

Store Listing Page Side Navigation

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)
.products-list .nested-category-tree-wrapper	The main wrapper for the side navigation items.
.products-list .nested-category-tree-wrapper ul	The unordered list parent wrapper for the category items.
.products-list .category-item	The list item child elements of the unordered list described above.
.products-list .category-link	The category link text that's inside of the list items.
.products-list .category-link.root	The first-level category links.
.products-list .category-item ul	The nested unordered list elements that appear if you have created subcategories.
.products-list .category-link.child	The second-level category links.
.products-list .category-link.active	The category link that is currently active. This can target the root and/or child category links that are active.

HTML Structure Explanation

The main side navigation wrapper that has a class name of “nested-category-tree-wrapper” and it’s descendant elements.

Store Listing Page Top Navigation

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)
.products-list .nested-category-children	The main wrapper unordered list for the top navigation items. This has a margin-right style applied to it.
.products-list .nested-category-breadcrumb-list-item	The list item category items.
.products-list .nested-category-breadcrumb-link	The category link text that's inside of the list items.
.products-list .breadcrumb-separator	The category link separator/delimiter.
.products-list .nested-category-breadcrumb	The breadcrumb navigation above the category title.
.products-list .nested-category-breadcrumb-link	The breadcrumb navigation above the category title.