Product Card Alpha

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.

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).