GraphQL Storefront - PDP Badging

[cassytaylor]

Design a badging system for the PDP.

• Low inventory
• Sold Out/Backordered
• Bestseller
• Sale

[cassytaylor]

Zeplin mocks: Web: https://zpl.io/bzMBLpz App: zpl://project?tags=badging&pid=5afc82f5e8d73e250ff9d855

There are three types of PDP badging/messaging, used in different placements: Inventory badges show up below option when variant and option have been selected. Sale/promotion badges are the only badges that show up on the variant Merchandising badges show only on the large variant or option images

Sale: A Sale variant is depicted with the Sale badge (also used on the PDP) over the variant thumbnail image. This makes Sale variants easy to identify, especially coming from the product grid, where the 'Sale' badge would be shown if only one variant is on sale.

Low inventory, out of stock, backordered messaging: These product statuses are conveyed through a message below the Variant option ("size" in the mocks), since these statuses generally happen at that level; ^ low inventory variant option

^ this depicts a variant that is completely sold out; sold out options are shown as disabled.

^ backordered messaging. a user can still add this item to their cart & check out.

Bestseller: This badge is shown over the main product image on the PDP. TBD if the "Bestseller" status is at the product, or variant level.

[rymorgan]

I think you have to talk about how it works from a "badge category" or a rolled up perspective like we talked about this morning. So, be clear about groupings -

• Inventory badges show up below option when variant and option have been selected.
• Sale/promotion badges are the only badges that show up on the variant
• Merchandising badges show only on the large variant or option images

Also, it just occurred to me that the variant isn't always going to be an image, so we need to see what would happen if it's a text variant or (and this is probably the least important since we haven't built this out yet) a swatch.