Skip to content
Try our solutions for free

Shopify Shoppable Hotspots Bundle

Shopify Shoppable Hotspots Bundle

Monthly subscription $65.0

Yearly subscription $625.0

SKU:

Empower shoppers to explore products directly from images with interactive dots, creating an engaging and inclusive shopping experience that meets WCAG 2.2 accessibility standards. With the Shoppable Hotspots (Shop Dots) Bundle, you have the flexibility to use carousel functionality with up to 5 dots per slide, or standard single-image displays with up to 25 dots per section.

Address Visual Discovery and Accessibility with Confidence

Interactive product discovery can significantly enhance customer engagement, but without proper accessibility controls, it can create barriers for customers using assistive technologies or keyboard navigation. The Zenyth Shop Dots Bundle provides comprehensive, accessible solutions that meet WCAG 2.2 requirements by ensuring full keyboard navigation, screen reader support, and proper ARIA implementation, while delivering intuitive visual shopping experiences across both carousel and single-image formats.

Seamless Integration for Shopify Stores

Developed specifically for Shopify, these accessibility-first components install easily into any theme and automatically integrate with your product catalog and collections. Choose the carousel format for multi-slide presentations with up to 5 dots per slide, or the standard format for single images with up to 25 dots. A clean, responsive interface allows customers to explore products directly from images with interactive dots that reveal detailed product information. The solutions work across devices and browsers, ensuring consistent behavior for all visitors.

Built-In Accessibility and Usability Standards

Zenyth's Shop Dots components include ARIA labels, keyboard focus management, and visible states for all controls, ensuring full compatibility with assistive technologies. The components are 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 enjoyable for every shopper.

Part of Zenyth's Accessibility Ecosystem

As part of Zenyth's family of accessible Shopify tools, the Shop Dots Bundle 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.

Features

  • Interactive product and collection discovery through animated beacon dots
  • Carousel option with up to 5 dots per slide for multi-image showcases
  • Standard option with up to 25 dots per section for comprehensive single-image displays
  • 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 no custom scripts required
  • 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 interactive product discovery and visual shopping experiences
  • Provides flexibility to choose between carousel (5 dots per slide) and standard (25 dots per section) formats based on your needs
  • 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 components, compatible with all Shopify themes and theme architectures
  • Design: Integrates with Shopify product and collection data, supporting carousel format with up to 5 product and collection dots per slide, or standard format with up to 25 product and collection dots per section, with configurable positioning set through the Shopify theme editor
  • Standards: Fully 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 Shopify Liquid sections with JavaScript and CSS assets, designed for seamless theme integration

Shop Dots Interactive Functionality

Carousel Format

  • Positions product and collection dots based on percentage-based coordinates that must be set in the Shopify theme editor panel
  • Supports multiple carousel slides, each with up to 5 product dots and collection dots per slide, with positions saved through Shopify's theme editor for persistent configuration
  • Provides a lightweight, simple, and effective solution for enhancing product discovery through interactive visual elements across multiple image slides
  • Includes optional animated beacon effect that automatically stops after 5 seconds when section is in viewport
  • Supports both product and collection linking, with products and collections selected manually in the Shopify theme editor panel

Standard Format

  • Positions product and collection dots based on percentage-based coordinates that must be set in the Shopify theme editor panel
  • Supports up to 25 product dots and collection dots per section, with positions saved through Shopify's theme editor for persistent configuration
  • Provides a lightweight, simple, and effective solution for enhancing product discovery through interactive visual elements
  • Includes optional animated beacon effect that automatically stops after 5 seconds when section is in viewport
  • Supports both product and collection linking, with products and collections selected manually in the Shopify theme editor panel
  • 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
  • Customizations include the ability to modify the appearance of dots and product cards to align with branding guidelines
  • Developers can override styles, ensuring it meets specific project requirements
  • The components enable developers to implement Shop Dots functionality with minimal customization while allowing for visual adjustments to match specific brand designs
  • Carousel format includes additional customization options for carousel navigation buttons, dots, and autoplay settings
  • Documentation Access: Includes a concise guide with step-by-step instructions for adding both components to a Shopify theme
  • Theme Integration: Easy installation through the Shopify theme editor panel for both carousel and standard formats

  • Optimized as lightweight components with minimal impact on page load times or performance
  • These Shopify-native Shop Dots components deliver straightforward solutions for adding interactive product discovery functionality, improving engagement and accessibility across multiple platforms with minimal setup
  • Dot limits (5 per carousel slide, 25 per standard section) are optimized for performance and align with Shopify's platform capabilities, ensuring smooth, responsive experiences across all devices
  • It is built for scalability, ensuring efficient performance across projects of all sizes

The annual subscription includes access to updates for both components. The Shop Dots Bundle components 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 components to handle emerging web standards, accessibility requirements, and Shopify platform changes while maintaining their lightweight and efficient performance.

View full details