PLP Layouts Analysis

necessaire.plp.mobile

Components:

Position: 1
Component Type: Announcement Bar
Details: A static, black bar at the top of the page with the text 'Free US Shipping | Orders $75+'.
Position: 2
Component Type: Sticky Header & Navigation
Details: Main site header with a hamburger menu icon (left), the brand logo 'NÉCESSAIRE' (center), and search and cart icons (right). Assumed to be sticky based on standard mobile design patterns.
Position: 3
Component Type: Collection Header & Description
Details: Contains a main heading 'Shop All' followed by a short descriptive paragraph: 'Discover Essentials For The Body, Hands, Hair And Lips.'
Position: 4
Component Type: Filter & Sort Controls
Details: A single, full-width button with the text 'Filters (0)'. This indicates that clicking it would likely open a modal or drawer containing all filtering and sorting options. No filters are currently applied.
Position: 5
Component Type: Product Card
Details: This component repeats to form the main product grid. Each card is a container for a single product and includes several sub-components in the following vertical order: Product Image (often with a Product Badge), Star Ratings & Review Count, Product Name, Variant/Size Information, Price (sometimes with a strikethrough price), Color/Variant Swatches (for applicable products), and a Quick Add/Call-to-Action button.
Sub Components: [{'component_type': 'Product Badges', 'details': "Small labels placed on the product image. Variations include a red circular icon (e.g., 'Rosemary Hair Duo'), a blue circular icon (e.g., 'The Body Wash | Barrier Complex'), and a text-based savings badge (e.g., 'SAVE $8')."}, {'component_type': 'Star Ratings & Review Count', 'details': 'Located directly below the product image, displaying a 5-star rating scale and a review count in parentheses.'}, {'component_type': 'Color/Variant Swatches', 'details': "Small, square swatches displayed below the price for products with multiple scents or versions (e.g., 'The Body Duo')."}, {'component_type': 'Quick Add / Call-to-Action', 'details': "A prominent, full-width button at the bottom of the card. The text varies, with 'Add to Cart' being the most common, and 'Waitlist' for out-of-stock items."}]

Layout Notes: The primary layout is a two-column product grid. Each row contains two 'Product Card' components side-by-side. The screenshot is very long and displays a large number of products without a visible 'Load More' button or pagination controls at the end of the grid, suggesting the page either uses infinite scroll (not captured in a static image) or displays the entire collection by default.

plp.screenshot.hero

Components:

Position: 1
Component Name: Announcement Bar
Details: A black, full-width bar at the very top of the page. It features scrolling white text with the message 'Free shipping on orders $35+'.
Position: 2
Component Name: Sticky Header & Navigation
Details: Standard site header with a hamburger menu icon on the left, a centered 'Hero.' brand logo, and icons for Search, Account, and Cart on the right. This header remains fixed during scroll.
Position: 3
Component Name: Collection Header & Description
Details: The main title for the page, which reads 'Shop All'. It does not contain any descriptive text.
Position: 4
Component Name: Filter & Sort Controls
Details: A pair of buttons below the page title. The left button is 'Filter' with a controls icon. The right button is 'Sort' with a dropdown arrow.
Position: 5
Is Grouped: True
Group Name: Patches Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Patches', serving as a title for the first product category section on the page.
Position: 6
Is Grouped: True
Group Name: Patches Section
Component Name: In-Grid Content Banner
Details: A full-width promotional banner with a red background. It features the headline 'The #1 Acne Patch Brand*', an image of the Mighty Patch product, a '#1 ACNE PATCH BRAND' badge, and a 'Learn More' call-to-action button.
Position: 7
Is Grouped: True
Group Name: Patches Section
Component Name: Product Card
Details: A grid of products belonging to the 'Patches' category. The grid is arranged in 2 columns. Each product card contains: an image, product name, short description, Star Ratings & Review Count, pill-style variant selectors for count (e.g., '36 Count', '72 Count'), price, and a split 'Add' button. Some cards feature Product Badges like 'Allure Best of Beauty' and 'FSA Eligible'.
Position: 8
Is Grouped: True
Group Name: Perfect Pairings Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Perfect Pairings'.
Position: 9
Is Grouped: True
Group Name: Perfect Pairings Section
Component Name: In-Grid Content Banner
Details: A full-width promotional banner with a light blue background. It features the headline 'NEW Save 15% on Perfect Pairings', an image of a hand holding two products, and a '15% off' badge.
Position: 10
Is Grouped: True
Group Name: Perfect Pairings Section
Component Name: Product Card
Details: A 2-column grid of products. Cards feature prominent Product Badges like 'SAVE 15%' and 'NEW'.
Position: 11
Is Grouped: True
Group Name: Targeted Solutions Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Targeted Solutions'.
Position: 12
Is Grouped: True
Group Name: Targeted Solutions Section
Component Name: Product Card
Details: A 2-column grid of products. Cards feature pill-style variant selectors for size (e.g., '5 ml', '15 ml'). Some out-of-stock products have a 'Sign Up for Waitlist' call-to-action, a variation of the standard Quick Add CTA.
Position: 13
Is Grouped: True
Group Name: Daily Care Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Daily Care'.
Position: 14
Is Grouped: True
Group Name: Daily Care Section
Component Name: Product Card
Details: A 2-column grid of products. Includes products with 'Waitlist' CTAs and size variants.
Position: 15
Is Grouped: True
Group Name: Bundles + Kits Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Bundles + Kits'.
Position: 16
Is Grouped: True
Group Name: Bundles + Kits Section
Component Name: Product Card
Details: A 2-column grid of products. Most cards in this section feature 'SAVE X%' Product Badges.
Position: 17
Is Grouped: True
Group Name: Merch Section
Component Name: Collection Header & Description
Details: A sub-header text element that reads 'Merch'.
Position: 18
Is Grouped: True
Group Name: Merch Section
Component Name: Product Card
Details: A grid of merchandise products. The last item in the grid takes up the full width, as there is no second item in its row.
Position: 19
Component Name: Footer (Not in Library)
Details: A dark footer section starting with a call-to-action to 'Stay in touch...' with an email address input field.
Position: 20
Component Name: Footer (Not in Library)
Details: A row of social media icons (Instagram, Facebook, X, YouTube, TikTok).
Position: 21
Component Name: Footer (Not in Library)
Details: A row of text links including 'Questions? Contact us.', 'Returns', 'Privacy', and 'Terms'.
Position: 22
Component Name: Footer (Not in Library)
Details: Copyright and company information text.

Layout Notes: This PLP uses a 'merchandised' or 'categorized' layout rather than a single, continuous grid. The page is broken down into distinct sections by sub-category (e.g., 'Patches', 'Daily Care'). Each section is introduced by a 'Collection Header' and is often preceded by a promotional 'In-Grid Content Banner' before displaying the 2-column product grid for that category. There is no visible 'Load More' button or pagination, suggesting all products for the 'Shop All' view are loaded on the initial page load.

osea.malibu.com.plp

Components:

Component Name: Announcement Bar
Position: 1
Details: A clickable bar at the very top with a back arrow and the text 'Start a subscription & earn 500 points'. It promotes a loyalty/subscription benefit.
Component Name: Sticky Header & Navigation
Position: 2
Details: A standard sticky header containing a hamburger menu icon (left), a search icon (left), the brand logo 'OSEA' (center), a user account icon (right), and a cart icon with an item count '0' (right).
Component Name: Collection Header & Description
Position: 3
Details: Contains a large title 'Shop' followed by a descriptive paragraph: 'Clean, vegan and cruelty-free luxury skincare and body care.'
Component Name: Filter & Sort Controls
Position: 4
Details: A section containing three interactive dropdowns/buttons: 'Skin Type', 'Category', and 'Sort: Featured'. Below these controls, a product count is displayed: '53 products'.
Component Name: In-Grid Content Banner
Position: 5
Section: Product Grid
Details: The first item in the product grid is a promotional banner, not a product. It has a 'LIMITED TIME OFFER' badge and promotes 'Subscribe & Sea Rewards' with a 'SIGN IN TO REDEEM' call-to-action.
Component Name: Product Card
Position: 6
Section: Product Grid
Details: The primary component of the product grid, repeated for each product. Each card contains: Product Image, Product Name, a short description, and various sub-components. Specific sub-components observed include: Product Badges (e.g., 'Editor's Pick', 'NEW', 'Out of Stock', 'Bestseller', 'Save $XX'), Variant Swatches (showing different sizes like '9.6 fl oz'), and a Quick Add / Call-to-Action button ('ADD TO BAG' with price, or a disabled 'SOLD OUT' button).
Component Name: Pagination Controls
Position: 7
Details: Standard pagination controls are displayed below the product grid, allowing users to navigate between pages of products. It shows numbered pages (1, 2, 3) and previous/next arrows. Page 1 is currently active.
Component Name: Content Block / FAQ
Position: 8
Details: An informational text block with the heading 'What types of skincare products does OSEA offer?'. It includes a paragraph of text and a 'Read more' link, likely for SEO and user education.
Component Name: In-Grid Content Banner
Position: 9
Details: A large, visually distinct promotional banner located below the main product grid section. It prompts users to 'Take our Quiz' to 'Get a Custom Routine with Clean Essentials' and features a prominent 'TAKE THE QUIZ' call-to-action button. This functions as a lead-in to a guided selling tool.
Component Name: Lifestyle Image Banner
Position: 10
Details: A full-width editorial-style lifestyle image showing a person using a product. This serves to build brand aesthetic and context.
Component Name: Informational Accordion
Position: 11
Details: A section titled 'Ways to Save, Earn & Enjoy' that uses an accordion interface to display information. The three expandable sections are: 'Subscribe & Save', 'Join the Sea Rewards Program', and 'Results You Can Sea®'.
Component Name: Footer
Position: 12
Details: A comprehensive footer section containing multiple elements grouped together: trust badges ('Clean Beauty Since 1996', 'Vegan & Cruelty-Free'), an email signup form ('Sign up and save 10%'), accordion-style navigation links ('SHOP', 'SUPPORT', 'COMPANY'), social media icons (Facebook, Pinterest, Instagram, TikTok), and legal information (Copyright, Privacy Policy, Terms of Use).

Layout Notes: The primary product listing is a two-column grid. The page makes strategic use of promotional content, placing an 'In-Grid Content Banner' as the very first item in the grid to capture immediate attention, and another larger banner below the grid to guide users towards a quiz. The PLP extends significantly below the product grid with various informational and branding modules before the footer.

merit-plp-mobile

Components:

Position: 1
Component Type: Collection Header & Description
Details: This section starts with a breadcrumb 'Home / All Products' followed by a large, stylized title 'Shop All'. It serves to orient the user and set the context for the page.
Position: 2
Component Type: Filter & Sort Controls
Details: A single row containing the total product count ('26 Products') on the left and a sort dropdown on the right, pre-set to 'Featured'. There is no visible 'Filter' button, indicating a simplified control set focused on sorting only.
Position: 3
Component Type: Product Card
Is Grouped: True
Section Name: Product Grid
Details: The main content area is a grid of 26 products arranged in a 2-column layout. Each product card has a consistent vertical structure:
Sub Components: [{'component_type': 'Product Badges', 'details': "Some products feature a circular red 'allure BEST OF BEAUTY' badge overlaid on the top left of the product image (e.g., 'Flush Balm', 'Brush No.1')."}, {'component_type': 'Product Name', 'details': "Product name and a short descriptor are displayed below the image (e.g., 'The Minimalist', 'PERFECTING COMPLEXION STICK')."}, {'component_type': 'Price', 'details': "The price is listed below the name. Some products show a sale price (e.g., '$156 $140'). Others show a price range (e.g., '$18-$38')."}, {'component_type': 'Color/Variant Swatches', 'details': 'For products with variants, a row of circular color swatches is displayed. Not all products have this.'}, {'component_type': 'Quick Add / Call-to-Action', 'details': "A simple '+' icon is positioned to the right of the color swatches, serving as a minimal 'add to cart' or 'quick add' function."}]
Position: 4
Component Type: In-Grid Content Banner
Details: Below the product grid, there is a horizontally-scrolling carousel of editorial-style images. The central image shows a 'shelfie' (products in a medicine cabinet), providing brand storytelling and inspiration. It includes left/right navigation arrows.
Position: 5
Component Type: Footer
Is Grouped: True
Section Name: Page Footer
Details: A standard page footer with a dark background, containing several distinct elements:
Sub Components: [{'component_type': 'Brand Logo', 'details': "The Merit 'M' logo."}, {'component_type': 'Newsletter Signup', 'details': "A 'LET'S CONNECT' call-to-action with an email input field and 'SUBMIT' button."}, {'component_type': 'Social Media Links', 'details': "Links to Instagram, TikTok, YouTube, and Pinterest under the handle '@MERIT'."}, {'component_type': 'Footer Navigation', 'details': "Three collapsible accordion menus for 'HELP', 'COMPANY', and 'SHOP'."}]

Layout Notes:

The page uses a clean, minimalist design with a consistent 2-column grid for products.
The layout is very structured and symmetrical, emphasizing product imagery.
There is no visible pagination or 'Load More' button. The product count ('26 Products') matches the number of items displayed, indicating all items for the collection are loaded at once.
The page effectively breaks up the product grid with a brand storytelling carousel before the footer, preventing endless scrolling and adding editorial value.

sofif.pavitt.face.plp

Components:

Position: 1
Component Name: Announcement Bar
Details: {"style": "Static text on a solid orange background. Used to promote a time-sensitive, threshold-based offer.", "text": "TODAY THROUGH 6/30, GET A FREE ACNE MASK WITH EVERY PURCHASE OVER $100! *Applies to cart automatically*", "variation": "Static text with a single offer."}
Position: 2
Component Name: Sticky Header & Navigation
Details: {"content": "Contains the brand name \u0027SOFIE PAVITT FACE\u0027 on the left and a \u0027MENU\u0027 link on the right that likely opens a navigation drawer.", "style": "Minimalist design with a horizontal line separator below. Does not visibly contain cart or search icons in the main bar.", "variation": "Logo on left, menu trigger on right."}
Position: 3
Component Name: Filter & Sort Controls
Details: {"filter_options": ["STEP #1: CLEANSE", "STEP #2: TREAT", "STEP #3: HYDRATE"], "other_controls": "A \u0027VIEW ALL\u0027 link is present below the main filter buttons, likely to reset or view the unfiltered collection.", "style": "Filters are presented as large, tappable, horizontal buttons or tabs, a common variation for primary sub-categories. No separate \u0027Sort\u0027 control is visible.", "variation": "Horizontal scrolling list of filter \u0027pills\u0027 or tabs."}
Position: 4
Component Name: Product Card
Section Group: Product Grid
Details: {"card_structure": "Each card is a distinct container with a border and follows a consistent vertical structure:", "card_sub_components": [{"order": 1, "type": "Product Image"}, {"notes": "Present on some products, appearing as a pill-shaped overlay near the image (e.g., \u0027Newest Launch\u0027, \u0027Bestseller\u0027, \u0027Award Winning\u0027).", "order": 2, "type": "Product Badges"}, {"notes": "Displayed below the image, showing star icons and the total review count in parentheses (e.g., \u0027(55)\u0027).", "order": 3, "type": "Star Ratings \u0026 Review Count"}, {"notes": "Displayed in all caps.", "order": 4, "type": "Product Name"}, {"notes": "A short, one or two-line description of the product\u0027s purpose.", "order": 5, "type": "Product Description"}, {"notes": "Some products show a sale price with a strike-through original price. The gift card shows a starting price (\u0027From $25.00\u0027).", "order": 6, "type": "Price"}, {"notes": "Most cards have an \u0027ADD TO CART\u0027 button. The gift card, which has variants, has a \u0027CHOOSE OPTIONS\u0027 button.", "order": 7, "type": "Quick Add / Call-to-Action"}], "layout": "A 2-column grid displaying 14 items total."}
Position: 5
Component Name: Site Footer
Details: {"content": "A comprehensive footer section beginning with a brand logo icon. It is organized into link groups: \u0027Explore\u0027 (e.g., Shop All, About), \u0027Help\u0027 (e.g., Order Support, FAQs), and a \u0027Get on the list\u0027 call to action. It concludes with a copyright line: \u0027\u00a9 2025, SOFIE PAVITT FACE\u0027."}

Layout Notes:

The page uses a highly structured, minimalist aesthetic with a consistent 2-column grid for products.
The filtering mechanism is integrated directly into the page as primary navigation tabs rather than being hidden behind a 'Filter' button/modal, simplifying product discovery for key categories ('Cleanse', 'Treat', 'Hydrate').
Social proof is heavily emphasized, with 'Star Ratings & Review Count' and various 'Product Badges' ('Bestseller', 'Award Winning') being prominent on almost every product card.

thenimetyou.plp.mobile

Components:

Component Name: Announcement Bar
Position: 1
Details: {"text": "FREE US SHIPPING ON ORDERS $30+", "variation": "Static text with a single offer, displayed in a prominent pink bar at the top of the page."}
Is Grouped: False
Component Name: Collection Header & Description
Position: 2
Details: {"description_present": false, "title": "SHOP ALL", "variation": "Simple title text only, with large, stylized, bold typography. No descriptive paragraph is included."}
Is Grouped: False
Component Name: Product Card
Position: 3
Details: {"notes": "The page displays a continuous vertical list of Product Cards in a single-column layout. There are no visible \u0027Filter \u0026 Sort Controls\u0027. Each card below is a separate item in this list.", "sub_components": [{"component_name": "Product Badges", "description": "Visual tags are placed on some product images. Variations include a red corner ribbon for \u0027NEW\u0027, circular stamp-like badges for \u0027AWARD WINNER\u0027, and circular orange badges indicating \u0027VALUE\u0027 (e.g., \u0027$77 VALUE\u0027)."}, {"component_name": "Star Ratings \u0026 Review Count", "description": "Located directly below the product image. Consists of 5 star icons followed by the total number of reviews (e.g., \u002778 Reviews\u0027, \u00272031 Reviews\u0027)."}, {"component_name": "Product Name", "description": "The name of the product in a bold, stylized font (e.g., \u0027LIVING CLEANSING BALM\u2122\u0027)."}, {"component_name": "Short Description", "description": "A brief, one-line tagline or description of the product\u0027s function (e.g., \u0027Sorbet-soft oil-based cleanser\u0027)."}, {"component_name": "Quick Add / Call-to-Action", "description": "The primary button on the card. Its text and function vary based on the product\u0027s availability and options: \u0027ADD TO BAG - $PRICE\u0027 for direct purchase, \u0027$PRICE-RANGE | X SIZES\u0027 for products with variants, \u0027SOLD OUT\u0027 for unavailable items, and \u0027SELECT SIZE\u0027 / \u0027SELECT AMOUNT\u0027 for items requiring a choice before adding to cart."}]}
Is Grouped: True
Component Name: Page Footer
Position: 4
Details: {"notes": "A distinct footer section with a blue background, containing navigation, newsletter signup, and legal information.", "sub_components": [{"description": "A two-column layout of informational links, including \u0027Help \u0026 FAQ\u0027, \u0027Our Story\u0027, \u0027Privacy Policy\u0027, \u0027Refund Policy\u0027, etc.", "name": "Footer Links"}, {"description": "A call-to-action section with the heading \u0027LET\u0027S KEEP IN TOUCH\u0027, an email input field, and a \u0027SIGN UP\u0027 button.", "name": "Newsletter Signup"}, {"description": "Icons linking to the brand\u0027s Instagram, Facebook, and TikTok profiles.", "name": "Social Media Links"}, {"description": "Copyright notice and rights reservation text.", "name": "Copyright Information"}]}
Is Grouped: True

Layout Notes: The most distinctive layout pattern is the use of a single-column product list instead of the more common two-column grid for mobile PLPs. This gives each product more vertical space. Another key observation is the complete absence of user-facing 'Filter & Sort Controls', simplifying the browsing experience on this 'SHOP ALL' page to a simple scroll. There is no visible pagination or 'Load More' button, suggesting an infinite scroll implementation.

the-ordinary-bestsellers-plp

Components:

Position: 1st
Component Type: Announcement Bar
Details: A black bar at the very top of the screen with white text stating a shipping offer: 'FREE SHIPPING ON ORDERS OVER 25 USD'. It includes left/right arrows, indicating it may be a carousel with multiple announcements.
Position: 2nd
Component Type: Sticky Header & Navigation
Details: The main site header featuring a hamburger menu icon on the left, the centered brand logo 'The Ordinary.', and utility icons for search and cart on the right. The cart icon displays an item count of '0'.
Position: 3rd
Component Type: Collection Header & Description
Details: A large header section for the 'Bestsellers' category. It contains a breadcrumb ('Home > Bestsellers'), a large title, a lifestyle product image, and a descriptive paragraph providing context for the collection.
Position: 4th
Component Type: Filter & Sort Controls
Details: Two distinct, horizontally-aligned buttons below the collection header. The left button is 'Filters' and the right is 'Sort By', both with dropdown icons, allowing users to refine and reorder the product list.
Position: 5th
Component Type: Result Count (Custom)
Details: A simple text element displaying the total number of products in the current view. The text reads '(12 Results)'.
Position: 6th
Is Group: True
Component Type: Product Card
Details: The start of the main product grid, arranged in a 2-column layout. The first block contains 4 product cards. Each card displays a product image, a wishlist icon, `Product Badges` ('Bestseller', 'Trending', award seals), product name, `Star Ratings & Review Count`, a short benefit description, price alongside a size/variant dropdown, and an 'Add To Cart' `Quick Add / Call-to-Action` button.
Position: 7th
Component Type: In-Grid Content Banner
Details: An educational/promotional banner that interrupts the product grid after the fourth product. It features a large image, a headline 'A Regimen for Every Concern', descriptive text, and an 'Explore The Guide' call-to-action button.
Position: 8th
Is Group: True
Component Type: Product Card
Details: The continuation of the 2-column product grid, appearing after the in-grid banner. This block contains the remaining 8 products (for a total of 12), each with the same detailed structure as the cards in the first block.
Position: 9th
Component Type: Content Callout (Custom)
Details: A dedicated section below the product grid to promote educational content. It has a headline 'Check Out Some of Our Back-to-Basics Resources from the O. Library' and a 'Read More Here' button.
Position: 10th
Component Type: Educational Content Block (Custom)
Details: A featured content section promoting a guide. It includes a large image, a category label ('Skincare Education'), and a main title ('How to Build a Regimen'). Below the main block is a list of three other related articles with thumbnails and titles.
Position: 11th
Component Type: Footer (Custom)
Details: A comprehensive page footer containing multiple elements: an email subscription form ('Be in the know.'), primary navigation links ('Contact Us', 'Track Order'), accordion-style menus for secondary links ('Gift Cards', 'Customer Care'), a location and language selector, social media icons, and legal/copyright information.

Layout Notes:

The primary layout for products is a 2-column grid.
A key layout pattern is the interruption of the product grid by a large, full-width `In-Grid Content Banner`, used for educational marketing.
The page displays all 12 results at once, using no pagination or 'Load More' functionality.
Product cards are information-rich, providing users with badges, social proof (reviews), and variant selection directly on the PLP, reducing the need to click through to the PDP for basic information.
The page has a strong emphasis on content and education, with multiple large content blocks placed below the product grid.

glossier.plp.mobile

Components:

Position: 1
Component Name: Announcement Bar
Details: A scrolling/carousel-style announcement bar with white background and blue text. It displays a promotional message ('Get 20% off sitewide or 25% off eligible orders...') with a clickable link. It includes carousel controls (left/right arrows and a pause button).
Position: 2
Component Name: Sticky Header & Navigation
Details: The main site header containing the 'Glossier.' logo on the left, and navigation items ('MENU', 'SEARCH', 'BAG (0)') on the right. The cart icon displays an item count of zero.
Position: 3
Component Name: Filter & Sort Controls
Details: This section consists of two parts. The first is a horizontally scrolling list of sub-category filter tabs ('All Skincare', 'Cleansers', 'Balms', etc.). Below this, a second row displays the total product count ('24 items') and provides main 'Filter (0)' and 'Sort (Featured)' controls.
Is Grouped Section: True
Position: 4
Component Name: In-Grid Content Banner
Details: A large, full-width promotional banner located at the top of the main content area. It features a graphic for the 'Friends of Glossier Sale' and has a text overlay with the headline 'HAPPENING NOW' and details about the tiered discount offer ('Enjoy 20% off sitewide or 25% off $100+ orders...').
Position: 5
Component Name: Product Card
Details: The start of the main product grid, which displays 21 items in total. Each card includes a product image, name, short description, and price. Sub-components are used extensively and vary per card:
Sub Components: [{'component_name': 'Product Badges', 'details': "Multiple badge types are used: a blue 'Up to 25% off' tag, a blue 'NEW' tag, and a blue 'Extra % off in cart' tag. Prices also show strikethrough sale pricing (e.g., '$30 $40')."}, {'component_name': 'Color/Variant Swatches', 'details': "Used for products with options. Examples include a row of color swatches for 'Balm Dotcom' and selectable buttons for sizes or gift card values."}, {'component_name': 'Quick Add / Call-to-Action', 'details': "CTA buttons vary based on product type and availability: 'Add to bag' for single-variant items, 'Choose set' for bundles, and 'Notify me' for out-of-stock items."}]
Position: 6
Component Name: In-Grid Content Banner
Details: A smaller, single-column banner placed within the product grid (after the 6th product card). It promotes a subscription offer with the headline 'Lock in 25% off.' and a 'Learn more' call-to-action, breaking the flow of product cards.
Position: 7
Component Name: Collection Header & Description
Details: Positioned at the very bottom of the PLP, after all products. It features a paragraph of brand and category-related text ('At Glossier, we make products inspired by real life...') on a light pink background.
Position: 8
Component Name: Site Footer
Details: The standard site footer containing several expandable accordion sections ('HOW CAN WE HELP?', 'ABOUT GLOSSIER', etc.), a store locator link, copyright information, legal links ('Privacy Policy', 'Terms of Use'), and brand iconography (smiley face, waving hand).

Layout Notes:

The page uses a standard top-down mobile layout, starting with global navigation and ending with a footer.
The primary layout pattern for products is a 2-column grid.
A key feature is the use of 'In-Grid Content Banners' to break up the product grid monotony. A large banner introduces the sale at the top, and a smaller, tactical banner is placed mid-grid to promote subscriptions.
The placement of the 'Collection Header & Description' at the bottom of the page is a notable choice, prioritizing product visibility over descriptive text.

dr.barbara.sturm.mobile.plp

Components:

Position: 1
Component Name: Announcement Bar
Details: {"style": "Static text on a solid black background.", "text": "SHOP SIGNATURE HYDRATION SET, FEATURING A LIMITED EDITION, SIGNED HYALURONIC SERUM."}
Position: 2
Component Name: Sticky Header & Navigation
Details: {"layout": "Three-part layout with a hamburger menu icon on the left, a centered brand logo (\u0027DR. BARBARA STURM\u0027), and utility icons (search, cart) on the right."}
Position: 3
Component Name: Collection Header & Description
Details: {"description": "The header consists only of a large, centered title. There is no additional descriptive text.", "title": "SHOP ALL"}
Position: 4
Component Name: Filter & Sort Controls
Details: {"controls": [{"label": "REFINE BY", "type": "Filter"}, {"label": "SORT BY: RELEVANCE", "type": "Sort"}], "layout": "Horizontally arranged controls below the collection header.", "variation": "Separate buttons for \u0027Filter\u0027 and \u0027Sort\u0027 that likely open drawers or modals."}
Position: 5
Component Name: Product Card
Details: {"card_structure": {"badges": {"component_name": "Product Badges", "description": "Some products feature a circular icon badge in the top-left corner of the image (e.g., the water drop icon on \u0027HYALURONIC SERUM\u0027). Not present on all cards."}, "call_to_action": {"component_name": "Quick Add / Call-to-Action", "label": "QUICK SHOP", "type": "Button", "variation": "This label suggests a \u0027Quick Shop\u0027 modal for selection, rather than a direct \u0027Add to Cart\u0027."}, "image_area": "Product image with a heart (wishlist) icon in the top-right corner.", "price": "Price displayed below the name. Some products show a price range with \u0027FROM\u0027 (e.g., \u0027FROM $110.00\u0027).", "product_name": "Product title in uppercase (e.g., \u0027CLEANSER\u0027)."}, "layout": "A 2-column grid containing 38 product cards.", "notes": "No star ratings, subscription offers, or color swatches are visible on the product cards."}
Position: 6
Component Name: Pagination Control
Details: {"content": "Shows page numbers \u00271\u0027, \u00272\u0027, \u00273\u0027, and a right arrow icon to navigate to the next page. \u00271\u0027 is highlighted as the current page.", "type": "Numeric Pagination"}
Position: 7
Component Name: Newsletter Signup Section
Details: {"description": "Contains a brief text description, an email input field with the placeholder \u0027Your email address\u0027, and a solid black \u0027SUBSCRIBE\u0027 button.", "title": "SUBSCRIBE TO OUR NEWSLETTER"}
Section Group: Footer Area
Position: 8
Component Name: Footer Links
Details: {"layout": "Two columns of text links under the headings \u0027CUSTOMER SERVICE\u0027 and \u0027INFORMATION\u0027."}
Section Group: Footer Area
Position: 9
Component Name: Social Media Links
Details: {"icons": "A row of five social media icons (Instagram, Facebook, YouTube, Twitter, TikTok).", "title": "SOCIAL"}
Section Group: Footer Area
Position: 10
Component Name: Copyright Notice
Details: {"text": "\u00a9 2025 Dr. Barbara Sturm"}
Section Group: Footer Area
Position: 11
Component Name: Cart Status Notification
Details: {"style": "A gray bar at the very bottom of the page, likely fixed to the viewport, providing real-time feedback on cart state.", "text": "Your complimentary gift was removed as your order no longer meets the required spend.", "type": "Dynamic Notification Bar"}

Layout Notes: The page uses a clean, minimalist design with a strict monochromatic color palette and ample white space. The primary layout pattern is a 2-column grid for product display. The page structure is very standard, starting with promotional and navigational headers, followed by filtering controls, the product grid, and concluding with a comprehensive footer area that includes newsletter signup and navigation links.

summerfridays.plp.mobile

Components:

Position: 1
Component Name: Announcement Bar
Details: A full-width, non-sticky bar at the very top of the page. It has a blue background and white text. It advertises 'FREE STANDARD SHIPPING ON US ORDERS $35+ Learn More' and includes back/forward arrows, indicating it is a carousel/slider.
Position: 2
Component Name: Sticky Header & Navigation
Details: The main site header containing a hamburger menu icon and a search icon on the left, a centered 'SUMMER FRIDAYS' brand logo, and a shopping bag icon on the right. It has a solid white background.
Position: 3
Component Name: Collection Header & Description
Details: Displays the page title 'Shop All' in a large, bold font. There is no accompanying descriptive text.
Position: 4
Component Name: Filter & Sort Controls
Details: A single row of controls positioned below the collection header. It features a black pill-shaped button on the left labeled 'Filter your search ↓' and a text link on the right labeled 'Sort By ⌄'.
Position: 5
Component Name: Product Card
Details: This component represents the entire product grid, which consists of multiple, repeating product cards. The cards contain a rich set of nested sub-components that vary per product.
Sub Components: [{'component_name': 'Product Badges', 'details': "Labels placed on the top left corner of the product image. Variations observed include text-based badges ('COMING 7/8', 'EXCLUSIVE', 'LIMITED EDITION', 'AWARD WINNER', '$16 OFF', '$33 OFF', etc.) and logo-based badges (e.g., 'allure Best of Beauty', 'Credo Clean Standard')."}, {'component_name': 'Color/Variant Swatches', 'details': "Appears below the product description for items with multiple shades. Consists of a row of small, circular color swatches followed by a '+' icon to indicate more options are available (e.g., 'Blush Butter Balm')."}, {'component_name': 'Quick Add / Call-to-Action', 'details': "The primary action button at the bottom of the card. This component shows significant variation: 'ADD TO BAG' for standard products, 'NOTIFY ME' for upcoming items, 'BUILD YOURS' for customizable sets, and a 'Select Size' dropdown for products with multiple sizes. The price or price range is displayed next to or as part of the CTA."}]
Position: 6
Component Name: Footer & Site Links
Details: The site footer with a blue background. It contains four expandable navigation sections (SHOP, ABOUT, INFORMATION, ACCOUNT), a brand script logo ('Été Éternel'), social media icons, copyright notice, and legal/policy links like 'Terms of use' and 'Privacy Policy'.

Layout Notes: The page follows a standard top-to-bottom mobile layout. The core of the PLP is a 2-column product grid. A key feature is the high information density on the product cards, which use a variety of badges, variant swatches, and context-aware CTAs ('Notify Me', 'Select Size', 'Add to Bag') to provide significant detail without requiring a click-through to the PDP. Notably, Star Ratings & Review Counts are absent from the product cards.

CROWN AFFAIR.Shop All

Components:

Position: 1
Component Type: Announcement Bar
Details: A static, non-interactive bar at the very top of the page with the text 'Flat rate of $5 for daily life...'.
Position: 2
Component Type: Sticky Header & Navigation
Details: Contains a hamburger menu icon on the left, a centered brand logo ('CROWN AFFAIR'), and search and cart icons on the right. The cart icon includes a '0' item counter.
Position: 3
Component Type: Collection Header & Description
Details: This section includes three parts: a main title ('Shop All'), a descriptive subtitle ('Haircare essentials for daily life.'), and a large, full-width lifestyle image directly below the text. This is a visually-driven header variation.
Position: 4
Component Type: Product Card
Details: The main body of the PLP consists of a grid of Product Cards. There are at least 37 products displayed. Each card generally contains: an image, product name, a short description, and a primary call-to-action. Not all cards have every sub-component. Key sub-components observed across the grid are: - **Product Badges**: Used to highlight bundles ('SAVE WITH BUNDLES') or special products (a red circular logo). - **Color/Variant Swatches**: Some products have clickable text-based buttons for variants (e.g., 'Standard', 'Travel') while others have circular color swatches. - **Quick Add / Call-to-Action**: Multiple variations exist: standard 'Add to Cart - $PRICE', 'Choose Option' for items requiring selection, and 'Sold Out' for unavailable items. Some CTAs on bundled items show a strikethrough price alongside the sale price (e.g., 'Add to Cart - $122 $97.60'). - **Notably Absent**: No Star Ratings & Review Count or Subscription Offers are visible on the product cards.
Position: 5
Component Type: Custom Component: Footer Section
Details: A dark-themed footer at the bottom of the page containing multiple elements: - **Email Signup**: A headline 'Sign up for the latest from Crown Affair' with descriptive text and likely an input field (not fully visible). - **Site Navigation**: Three columns of links under the headings 'Shop', 'Learn', and 'Information'. - **Social Media Links**: Icons for Instagram, Facebook, and TikTok.

Layout Notes:

Note: Two-Column Grid Layout
Description: The products are consistently arranged in a 2-column grid, which is a standard pattern for mobile PLPs, balancing image size with the number of products visible on screen.
Note: Absence of Filter & Sort Controls
Description: There are no visible 'Filter' or 'Sort' buttons or dropdowns below the collection header. This suggests users must browse the entire collection or use the main site search to find specific items.
Note: No Pagination or Load More
Description: The screenshot shows a very long list of products with no 'Load More' button or pagination controls at the end. This indicates that either all products are loaded on a single page or the page uses an infinite scroll mechanism that triggers on scroll.
Note: Visual Hierarchy in Header
Description: The page uses a large lifestyle image as a hero banner within the Collection Header, placing strong emphasis on brand aesthetic before presenting the products.

loopsbeauty-plp-mobile

Components:

Position: 1
Component Name: Announcement Bar
Details: A static, full-width black bar at the very top of the screen with the text 'Free Shipping Over $40'.
Position: 2
Component Name: Collection Header & Description
Details: A minimal header consisting only of breadcrumb navigation text: 'HOME / MASKS'. It serves to orient the user within the site structure.
Position: 3
Component Name: Filter & Sort Controls
Details: A single, prominent dropdown-style button with the text 'WHAT DOES YOUR FACE NEED?'. This appears to be the primary method for filtering products on the page, likely by concern or benefit.
Position: 4
Component Name: Product Card
Details: The main product listing, presented as a repeating grid of product cards. 14 individual product cards are shown in this section. Each card contains a consistent set of sub-components in the following vertical order: 1. Product Image (square aspect ratio). Some images feature a 'Product Badge'. 2. Product Name (e.g., 'Hyper Eyes'). 3. Short Product Description (e.g., 'Dark Circles Hydrogel Under Eye Mask'). 4. 'Star Ratings & Review Count' (e.g., '★★★★★ 58 Reviews'). 5. Price and/or Size/Quantity (e.g., '5 pairs | $25'). 6. 'Quick Add / Call-to-Action' button with the text 'ADD TO BAG'.
Position: 5
Component Name: Product Badges
Details: These are not a standalone component but are overlaid on the top-right corner of some Product Card images. Examples include 'BEST SELLER', 'AWARD-WINNING', and 'NEW'.
Position: 6
Component Name: In-Grid Content Banner
Details: A full-width promotional banner placed after the main product grid, breaking the two-column layout. It promotes a specific bundle ('The Total Loop: Hyper Smooth') and functions as a large, featured product card with its own image, name, description, reviews, price, and 'ADD TO BAG' button.
Position: 7
Component Name: Footer Section
Is Custom Component: True
Details: A multi-part site footer with a black background. It is not in the provided library but contains several distinct sections, ordered vertically: 1. Promotional Headline: 'FACE CARE, REIMAGINED @LOOPSBEAUTY'. 2. Email Signup Form: 'Wanna be in the loop?' with a text input field for email. 3. Student Discount Link. 4. Footer Navigation Links: Two columns for 'Shop' and 'About'. 5. Social Media Icons: Instagram, TikTok, Facebook, YouTube. 6. Legal & Policy Links: Privacy Policy, Terms & Conditions, Accessibility Statement. 7. Payment Method Icons: Amazon, Amex, Apple Pay, Discover, Mastercard, etc.

Layout Notes: The primary layout is a standard 2-column grid for the product cards. This grid is interrupted by a full-width 'In-Grid Content Banner' that highlights a specific bundle, serving as a pattern break to draw attention. The page uses a clean, high-contrast design with a white background for the main content and a black background for the announcement bar and footer.

rare.beauty.mobile.plp

Components:

Position: 1
Component Name: Announcement Bar
Details: A dismissible bar at the top of the page with the text 'FREE U.S. STANDARD SHIPPING W/ $50+.' and a 'SHOP NOW' link.
Is Grouped: False
Position: 2
Component Name: Sticky Header & Navigation
Details: The main site header featuring a hamburger menu icon (left), a centered 'Rare Beauty' logo, and utility icons for user account, search, and cart (right).
Is Grouped: False
Position: 3
Component Name: Collection Header & Description
Details: A large, serif-font title for the page that reads 'Our Best Selling Makeup Products'. There is no additional descriptive text.
Is Grouped: False
Position: 4
Component Name: Filter & Sort Controls
Details: This is a two-part filtering system. The first part is a horizontal list of category 'pills' under the label 'CATEGORIES', including 'All', 'Face', 'Lip', etc. The second part, located below the pills, consists of two separate controls: a 'Filters +' button (likely opens a modal/drawer) and a 'Sort' dropdown menu.
Is Grouped: False
Position: 5
Component Name: Product Card
Details: The product cards are arranged in a 2-column grid. 17 products are visible. Each card contains a consistent set of sub-components in the following order: Product Image, Product Name, Star Ratings & Review Count, Color/Variant Swatches, and a Call-to-Action button. Not all cards have all sub-components (e.g., some lack swatches).
Sub Components: [{'component_name': 'Product Badges', 'details': "Badges appear as overlays on the product image. Examples include 'Bestseller', 'Online Only', 'Limited Edition', '48 Shades', and an 'allure AWARD WINNER 2024' badge."}, {'component_name': 'Star Ratings & Review Count', 'details': "Displayed below the product name, showing a 5-star rating scale and the total number of reviews (e.g., '4497 REVIEWS'). The review count is a clickable link."}, {'component_name': 'Color/Variant Swatches', 'details': "For products with variants, a set of three scrollable, circular color swatches is shown. For products with many shades (like foundation), a 'FIND YOUR SHADE' link is displayed instead."}, {'component_name': 'Quick Add / Call-to-Action', 'details': "A rectangular button with text showing the action and price, such as 'ADD TO BAG • $25'. For out-of-stock items, the button is greyed out and reads 'OUT OF STOCK • $20'."}]
Is Grouped: True
Position: 6
Component Name: Newsletter & SMS Signup Form
Details: A full-width section prompting users to sign up for email and text message updates. It includes separate input fields for email and mobile number, along with legal disclaimers for consent.
Is Grouped: True
Position: 7
Component Name: Social Media Links
Details: A row of five circular icons linking to the brand's social media profiles: Instagram, Facebook, Twitter, YouTube, and Pinterest.
Is Grouped: True
Position: 8
Component Name: Footer Navigation
Details: A set of footer links organized into three columns with the headings: 'SHOP', 'CUSTOMER SERVICE', and 'COMPANY'.
Is Grouped: True
Position: 9
Component Name: Copyright & Legal Footer
Details: The final section of the page containing the copyright notice '© 2025 Rare Beauty all rights reserved', links to 'Privacy Policy', 'Terms of Service', etc., and a small brand logo icon.
Is Grouped: True

Layout Notes: The PLP follows a standard vertical flow for mobile. The product list is a 2-column grid, a highly common and effective pattern. A key feature is the combination of high-level category filter 'pills' for quick filtering and a more detailed 'Filters' button for advanced refinement. The product cards are data-rich, providing users with social proof (reviews), variant information (swatches), and status (badges) directly on the PLP to aid in quick decision-making. The page ends with a comprehensive footer section, starting with a prominent email/SMS capture form.

saie.plp

Components:

Position: 1
Component Type: Announcement Bar
Details: A scrolling/carousel-style announcement bar with multiple messages. The visible message is 'ZERO-WASTE ON DISPLAY | WATCH NOW | THE SAIE WAY: EPISODE 006'.
Position: 2
Component Type: Sticky Header & Navigation
Details: A sticky header with a back arrow (likely replacing the hamburger menu on a collection page) on the left, a centered 'saie' brand logo, and a 'BAG' icon on the right.
Position: 3
Component Type: Collection Header & Description
Details: A large, visually-driven header featuring a full-width lifestyle image. It has a text overlay announcing 'NEW! DEW BLUSH™ + GLOSSYBOUNCE™'.
Position: 4
Component Type: In-Grid Content Banner
Details: A promotional block with a headline 'MEET THE MONOCHROMES', descriptive text 'Three new juicy shades of Dew Blush™ and Glossybounce™', and a 'SHOP' call-to-action button.
Position: 5
Component Type: Custom: Editorial Product Showcase
Details: This section introduces the first shade pairing, 'WATERMELON', with a descriptive text. It then presents two products individually: 'DEW BLUSH™' in shade 'Flirty' and 'GLOSSYBOUNCE™' in shade 'Burst', each followed by a large swatch image. This is a highly stylized, non-standard product presentation.
Position: 6
Component Type: Custom: Editorial Product Showcase
Details: This section introduces the second shade pairing, 'PAPAYA', with descriptive text. It presents 'DEW BLUSH™' in shade 'Hottie' and 'GLOSSYBOUNCE™' in shade 'Splash', each with its own large swatch image.
Position: 7
Component Type: Custom: Editorial Product Showcase
Details: This section introduces the third shade pairing, 'NUDE MAUVE', with descriptive text. It presents 'DEW BLUSH™' in shade 'Lady' and 'GLOSSYBOUNCE™' in shade 'Bubble', each with its own large swatch image.
Position: 8
Component Type: In-Grid Content Banner
Details: A full-width lifestyle image featuring a model wearing the product.
Position: 9
Component Type: In-Grid Content Banner
Details: A full-width lifestyle image showing a flat lay of the products with other items (towel, sunglasses, etc.).
Position: 10
Component Type: In-Grid Content Banner
Details: A full-width abstract image showing a sparkly, shimmery texture.
Position: 11
Component Type: In-Grid Content Banner
Details: A promotional block titled 'MATCHING SHADE PAIRINGS'. It includes descriptive text and a 3x3 grid of clickable shade swatches for different products (Dew Blush, SuperSuede, Glossybounce). It concludes with a 'SHOP THE SUMMER BUNDLE' call-to-action button.
Position: 12
Component Type: In-Grid Content Banner
Details: A full-width lifestyle image featuring a model outdoors.
Position: 13
Component Type: In-Grid Content Banner
Details: A full-width lifestyle image featuring a product on a towel on a modern lounge chair by a pool.
Position: 14
Component Type: In-Grid Content Banner
Details: A promotional block titled 'THE SUMMER BUNDLE'. It contains educational text on how to layer the products and concludes with a 'SHOP THE BUNDLE' call-to-action button.
Position: 15
Component Type: In-Grid Content Banner
Details: A full-width video block showing a model applying the product, indicated by a pause icon overlay.
Position: 16
Component Type: Custom: Footer Signup Form
Details: A prominent signup form in the pre-footer area with a headline 'SIGN UP FOR TEXT UPDATES AND GET $10 OFF YOUR NEXT ORDER OVER $50'. It includes fields for Country, Phone Number, and Email Address, with a 'SUBSCRIBE' button.
Position: 17
Component Type: Custom: Page Footer
Details: The final page footer. Contains the brand logo, social media icons (Instagram, Facebook, YouTube, Pinterest, TikTok), multiple columns of navigation links (Shop, About, Help), a 'Commitments' section with logos, and final legal links (Terms, Privacy, etc.) and copyright information.

Layout Notes: This page functions more like a highly editorial landing page than a traditional PLP. It eschews a standard product grid in favor of a long-form, narrative scroll that blends large lifestyle imagery, video, product education, and bundle promotions. Key characteristics include: - Absence of standard PLP tools like 'Filter & Sort Controls'. - No traditional 'Product Cards' with price or review ratings. - Products are presented as part of shade stories or bundles. - Heavy use of 'In-Grid Content Banner' components to create a rich, magazine-like experience and drive users towards specific bundled purchases rather than individual item discovery.

rhode.mobile.plp

Components:

Position: 1
Component Type: Announcement Bar
Details: A static, single-message bar at the top of the page with the text 'FREE US SHIPPING ON ORDERS OVER $45'.
Position: 2
Component Type: Sticky Header & Navigation
Details: The main site header featuring a hamburger menu icon on the left, a centered 'rhode' brand logo, and search and cart utility icons on the right.
Position: 3
Component Type: Collection Header & Description
Details: A large, full-width lifestyle hero image with a prominent text overlay that reads 'One of EVERYTHING really GOOD.', serving as the primary visual header for the collection.
Position: 4
Component Type: Filter & Sort Controls
Details: A horizontal row of four filter 'pills' to refine the product list. The options are 'FEATURED', 'SKIN', 'LIP+CHEEK', 'SETS'. 'FEATURED' is the active filter.
Position: 5
Component Type: Product Card
Details: {"branding_element": "Large \u0027mist\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "BUY GLAZING MIST - $30.00"}, "product_badge": {"component_type": "Product Badges", "text": "new"}, "product_name": "GLAZING MIST", "star_ratings": "Not present"}
Position: 6
Component Type: In-Grid Content Banner
Details: A promotional banner for a specific product featuring an image, the text 'Instant GLAZED skin.', and a call-to-action button 'MEET GLAZING MIST'.
Position: 7
Component Type: Product Card
Details: {"branding_element": "Large \u0027glow\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "BUY THE SET - $65.00"}, "product_badge": {"component_type": "Product Badges", "text": "new"}, "product_name": "THE GLOW SET", "star_ratings": "Not present"}
Position: 8
Component Type: Product Card
Details: {"branding_element": "Large \u0027blush\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "BUY BLUSH - $24.00"}, "product_badge": {"component_type": "Product Badges", "text": "new"}, "product_name": "POCKET BLUSH", "star_ratings": {"component_type": "Star Ratings \u0026 Review Count", "count": "(4,979)", "rating": "5 stars"}}
Position: 9
Component Type: Product Card
Details: {"branding_element": "Large \u0027pink\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "JOIN THE WAITLIST - $62.00", "variation": "Notify Me for out-of-stock item"}, "product_badge": {"component_type": "Product Badges", "text": "new"}, "product_name": "THE PINK EDIT", "star_ratings": {"component_type": "Star Ratings \u0026 Review Count", "count": "(54)", "rating": "5 stars"}}
Position: 10
Component Type: Product Card
Details: {"branding_element": "Large \u0027prep\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "BUY GLAZING MILK - $32.00"}, "product_badge": {"component_type": "Product Badges", "text": "allure Best of Beauty award icon", "variation": "Award Winner"}, "product_name": "GLAZING MILK", "star_ratings": {"component_type": "Star Ratings \u0026 Review Count", "count": "(4,798)", "rating": "5 stars"}}
Position: 11
Component Type: Product Card
Details: {"branding_element": "Large \u0027blushes\u0027 wordmark", "cta": {"component_type": "Quick Add / Call-to-Action", "text": "BUY THE TRIO - $69.00"}, "product_badge": {"component_type": "Product Badges", "text": "new"}, "product_name": "THE POCKET BLUSH TRIO", "star_ratings": {"component_type": "Star Ratings \u0026 Review Count", "count": "(4,979)", "rating": "5 stars"}}
Position: 12
Component Type: Product Card
Details: Product 'BARRIER BUTTER' with 'seal' wordmark and star ratings. CTA is 'BUY BARRIER BUTTER - $36.00'.
Position: 13
Component Type: Product Card
Details: Product 'PEPTIDE LIP SHAPE' with 'shape' wordmark and star ratings. CTA is 'BUY LIP SHAPE - $24.00'.
Position: 14
Component Type: Product Card
Details: Product 'THE TRAVEL SET' with 'travel' wordmark, 'back in stock' badge, and star ratings. CTA is 'BUY THE SET - $86.00'.
Position: 15
Component Type: Product Card
Details: Product 'PEPTIDE LIP TINT' with 'tint' wordmark, 'new shade' badge, and star ratings. CTA is 'BUY LIP TINT - $18.00'.
Position: 16
Component Type: Product Card
Details: Product 'THE RHODE KIT' with 'the kit' wordmark and star ratings. CTA is 'BUY THE KIT - $117.00'.
Position: 17
Component Type: Product Card
Details: Product 'LIP CASE' with 'case' wordmark and star ratings. CTA is 'BUY LIP CASE - $38.00'.
Position: 18
Component Type: Product Card
Details: Product 'PEPTIDE LIP TREATMENT' with 'nourish' wordmark, an 'allure' award badge, and star ratings. CTA is 'BUY LIP TREATMENT - $18.00'.
Position: 19
Component Type: In-Grid Content Banner
Details: An editorial/brand-focused banner with text 'efficacious formulas. intentional ingredients.' and a call-to-action button 'BRAND PHILOSOPHY'.
Position: 20
Component Type: Product Card
Details: Product 'PINEAPPLE REFRESH' with 'cleanse' wordmark and star ratings. CTA is 'BUY CLEANSER - $30.00'.
Position: 21
Component Type: Product Card
Details: Product 'PEPTIDE GLAZING FLUID' with 'glaze' wordmark and star ratings. CTA is 'BUY GLAZE - $32.00'.
Position: 22
Component Type: Product Card
Details: Product 'BARRIER RESTORE CREAM' with 'comfort' wordmark and star ratings. CTA is 'BUY BRC - $32.00'.
Position: 23
Component Type: Product Card
Details: Product 'THE PEPTIDE LIP COMBOS' with 'shape + tint' wordmark and a 'new' badge. No star ratings visible. CTA is 'BUY LIP COMBO - $39.00'.
Position: 24
Component Type: Product Card
Details: Product 'RHODE MIRROR' with 'mirror' wordmark and star ratings. CTA is 'BUY MIRROR - $24.00'.
Position: 25
Component Type: Footer Section
Details: A grouped section containing multiple standard footer elements. It starts with an email signup form, followed by multi-column navigation links, support information, payment partner logo (Afterpay), a country/region selector, and the final copyright notice.

Layout Notes:

The page uses a single-column layout for the product grid, where each product card takes up the full width. This is a distinctive choice compared to the more common two-column grid.
The product grid is frequently interrupted by full-width 'In-Grid Content Banners' used for product promotion and brand storytelling.
A key design pattern is the use of a large, bold, stylized wordmark at the top of each product card (e.g., 'mist', 'glow', 'blush'), which acts as a visual title for the product and reinforces branding.
Product cards show a high level of detail, often including product badges, star ratings, and review counts directly on the PLP.