Product Card Alpha


A classic, accessible, dynamic product card for e-commerce sites.

Product Card Alpha
Available for:
Buy Frames
Back to library


Product Card Alpha gives users a fully customizable product card with enhanced accessibility.

Designed to be used in a query loop, Product Card Alpha is plug-and-play. It will automatically pull in all relevant information, such as the product image, title, rating, price, etc.

Product Card Alpha uses a custom rating widget called Product Rating Alpha. This rating widget dynamically pulls the rating value from the product database and changes the star display based on the rating. This is an upgrade over the default rating widgets available in most builders, as it gives you far more options for customization.

Product Card Alpha also has a dynamic “on-sale” badge that will display if the product is marked as being on sale.

Lastly, the Add to Cart button is a separate dynamic frame called Add-to-Cart Alpha which dynamically controls button text and the add-to-cart functionality.

Accessibility Notes

Product cards differ from most cards because we need screen readers to announce more than just the product name. For this reason, you’ll see that we place the link on the body element of the card rather than on the heading. Additionally, the button falls outside of the primary clickable area as it has a separate action (adding to cart) from the body link (viewing the product).

Related Components

No related components.


    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.