Showcasing products with <amp-carousel>
When it comes to e-commerce, amp-carousel
really shines. We saw amp-carousel
briefly in the last chapter, where we used it to build a horizontal navigation menu. This time, we'll make use of it to showcase products. For our examples, we'll have a products listing page, and a product detail page. Each product will have a name, a description, a price, and several images.
In our product listing page, we'll show just a thumbnail image, the product name, and the price. eBay was an AMP early-adopter, and we can look to its AMP implementation for inspiration. It contains several carousels promoting different categories of products; we'll build something similar. We can also take UX design cues from other e-commerce retailers, such as Amazon and AliExpress. Our product listing page will contain carousel lists of similar products. We'll then add a product page, and we'll see how various AMP media components can be used to present the product.
E-commerce...