Try our solutions for free

Shopify Featured List

Shopify Featured List

Monthly subscription $100.0

Yearly subscription $1020.0

Empower merchants to create versatile, accessible content showcases with flexible layouts, comprehensive product card functionality, and full WCAG 2.2 compliance, creating engaging and inclusive shopping experiences.

Address Content Showcase and Accessibility with Confidence

Flexible content showcases can significantly enhance customer engagement and product discovery, but without proper accessibility controls and consistent product card functionality, they can create barriers for customers using assistive technologies or keyboard navigation. The Zenyth Featured List component provides a comprehensive, accessible solution that meets WCAG 2.2 requirements by ensuring full keyboard navigation, screen reader support, and proper ARIA implementation, while delivering rich product card functionality through the integrated zenyth-card-product.liquid snippet.

Seamless Integration for Shopify Stores

Developed specifically for Shopify, this accessibility-first component installs easily into any theme and automatically integrates with your product catalog, collections, blog posts, and pages. The component uses the zenyth-card-product.liquid snippet to provide rich product card functionality including variant selection, add to cart, quick view, and social sharing. A clean, responsive interface allows customers to explore products, collections, and content in flexible grid or carousel layouts. The solution works across devices and browsers, ensuring consistent behavior for all visitors.

Built-In Accessibility and Usability Standards

Zenyth's Featured List component includes ARIA labels, keyboard focus management, screen reader announcements, and visible states for all controls, ensuring full compatibility with assistive technologies. The component integrates seamlessly with the zenyth-card-product.liquid snippet, which provides comprehensive product card accessibility features including accessible color swatches, keyboard-navigable variant selectors, and proper form controls. The component is designed for easy customization, allowing developers to match brand styles while maintaining accessibility integrity. It is an effortless way to make your store more compliant, inclusive, and user-friendly.

Part of Zenyth's Accessibility Ecosystem

As part of Zenyth's family of accessible Shopify tools, the Featured List component helps your brand proactively align with WCAG 2.2, ADA, and AODA requirements. It's ideal for merchants seeking to enhance accessibility without adding technical overhead or redesigning their store, while providing rich product card functionality through the integrated product card snippet.

Features

  • Flexible content types: products, collections, blog posts, pages, and custom cards
  • Rich product card functionality via zenyth-card-product.liquid snippet
  • Grid or carousel display with responsive column controls
  • Optional main image with content overlay
  • Collection products block for displaying multiple products from a collection
  • Fully compliant with WCAG 2.2 Level AA standards
  • Integrated ARIA labels and keyboard-accessible controls
  • Responsive, theme-friendly design compatible with all Shopify templates
  • Lightweight installation with efficient rendering
  • Built and maintained by Zenyth's accessibility experts

Benefits for Developers and Organizations

  • Ensures compliance with accessibility regulations (WCAG 2.2, ADA, AODA)
  • Improves user engagement through flexible content showcases and rich product card functionality
  • Provides versatility to display products, collections, blog posts, pages, and custom content
  • Enhances product discovery with comprehensive product card features (variants, add to cart, quick view)
  • Enhances SEO and brand reputation through inclusive design practices
  • Minimizes remediation costs by resolving accessibility barriers at the source
  • Plug-and-play integration for quick adoption across existing Shopify themes
  • Ongoing updates from Zenyth to maintain compliance and performance

Learn more about Zenyth's end-to-end accessibility solutions.

  • Platform: Native Shopify section component, compatible with all Shopify themes and theme architectures
  • Design: Integrates with Shopify product, collection, blog post, and page data, with product cards rendered via Zenyth Product Card, supporting grid and carousel layouts with configurable styling set through the Shopify theme editor
  • Standards: Compliant with WCAG 2.2 Level AA accessibility standards, ensuring keyboard navigation, screen reader support, and proper ARIA implementation
  • Devices: Fully responsive, delivering consistent functionality across desktops, tablets, and mobile devices

Languages: Built as a Shopify Liquid section with JavaScript and CSS assets, designed for seamless theme integration

Featured List Interactive Functionality

  • Displays multiple content types (products, collections, blog posts, pages, custom cards) in flexible grid or carousel layouts
  • Uses Zenyth Product Card snippet for all product displays, providing rich product card functionality
  • Supports Collection Products blocks for displaying multiple products from a single collection
  • Provides optional main image positioning (left/right) with content overlay
  • Includes carousel functionality with navigation controls, dots, and autoplay
  • Supports responsive column layouts for desktop, tablet, and mobile
  • Provides extensive customization options for colors, typography, spacing, and card styling
  • Includes full accessibility features with keyboard navigation and screen reader support

Product Card Snippet Integration

  • Automatically renders product cards using Zenyth Product Card snippet
  • Provides access to all product card features: images, variants, add to cart, quick view, social sharing
  • Integrates section settings with product card functionality
  • Supports product carousel within cards
  • Handles variant selection and image switching
  • Provides color swatch selection
  • Includes add to cart and buy now functionality
  • Supports quick view dialogs
  • Includes social sharing buttons
  • Provides product description display with truncation
  • Supports custom star rating HTML
  • The code is modular, written in Liquid, JavaScript, and CSS, and designed for Shopify theme integration
  • Code follows best practices for lightweight and efficient scripting, ensuring compatibility with evolving web standards and Shopify platform updates
  • Includes proper semantic HTML structure
  • Customizations include the ability to modify card appearance, colors, typography, spacing, and layout to align with branding guidelines
  • Developers can override styles, ensuring it meets specific project requirements
  • Supports multiple layout options
  • Includes extensive carousel customization options
  • Documentation Access: Includes a concise guide with step-by-step instructions for adding the component to a Shopify theme
  • Theme Integration: Easy installation through the Shopify theme editor panel
  • Block Configuration: Add and configure blocks for different content types through the theme editor

Settings Configuration: Configure layout, styling, and functionality through the section schema

  • Optimized as a lightweight component with minimal impact on page load times or performance
  • Efficient block counting and card rendering
  • Lazy loading for images
  • Responsive image srcset support
  • This Shopify-native Featured List component delivers a straightforward solution for adding flexible content showcase functionality, improving engagement and accessibility across multiple platforms with minimal setup
  • It is built for scalability, ensuring efficient performance across projects of all sizes
  • Collection Products blocks efficiently render multiple products from collections

The annual subscription includes access to updates. The Featured List component will receive updates from Zenyth as new accessibility standards are published, browser compatibility requirements change, or new features are developed, ensuring continued compatibility and functionality across platforms.

Updates focus on adapting the component to handle emerging web standards, accessibility requirements, and Shopify platform changes while maintaining its lightweight and efficient performance.

Ver informações completas

Discover Products

View All