Skip to main content
All CollectionsData Tracking & Compliance
The Complete Guide to Unique Selector IDs
The Complete Guide to Unique Selector IDs
C
Written by Carina Munro
Updated over 2 weeks ago

Implementation, Benefits, and Best Practices

TL;DR: Why Unique Selector IDs Matter & How to Implement Them

Why Use Unique IDs:

  • Improves Tracking – Ensures precise analytics, heatmap and user behavior insights.

  • Boosts Performance – Speeds up JavaScript execution with direct element selection.

  • Improves Accessibility – Helps screen readers navigate accurately.

Where to Use Unique IDs:

High Priority: Product cards, navigation items, banners, sliders, buttons, forms, modals, checkout elements.

Medium Priority: Info sections, footers, social links, secondary navigation, testimonials.

Implementation Steps:

✅ Audit: Inspect elements, document missing or duplicate IDs.

✅ Plan: Set naming conventions, track IDs, align with site hierarchy.

✅ Update: Apply IDs at the template level, avoid duplicates, verify ARIA roles.

✅ Maintain: Establish an SOP, check IDs after updates, train your team.

Example:

html

 <div id="featured-product-carousel">
  <button id="add-to-cart-bestseller">Add to Cart</button>
 </div>
</div>

Need help? Contact Support@heatmap.com

Introduction

Website owners often overlook the significance of unique IDs in their site's structure, assuming that CSS classes and generic selectors are sufficient.

However, failing to implement unique and meaningful IDs across key website elements introduces serious issues that impact accessibility, performance, and conversion rates.

This comprehensive guide explains why unique selector IDs are essential for modern websites and provides a practical implementation process.

What Are Unique Selector IDs?

Unique Selector IDs are persistent, descriptive identifiers assigned to HTML elements on a website. Unlike generic class names, unique IDs ensure elements remain consistently identifiable even after site updates or layout changes.

Example of Unique Selector ID:

<div id="featured-product-carousel">
  <div id="product-card-bestseller">
    <button id="add-to-cart-bestseller">Add to Cart</button>
  </div>
</div>

Business Benefits

Accessibility & Legal Compliance

  • Avoid Costly Accessibility Lawsuits

  • Improved Screen Reader Navigation

  • Better Keyboard Navigation

Performance & Page Speed

  • Improved Accessibility for Page Crawlers

  • Faster JavaScript Execution

  • Prevent JavaScript Conflicts

Conversion Rate Optimization

  • Reliable A/B Testing

  • Critical Form & Button Identification

  • Personalization & Retargeting

Analytics & Heatmapping

  • Improved Heatmap & Click Tracking Accuracy

  • Historical Data Preservation

  • Accurate Recognition of Element Content Changes

Future-Proofing & Scalability

  • Sustainable Code Base for Future Optimizations

  • Well-Structured HTML

  • Supports SEO Best Practices

Implementation Guide

Best Practices for Naming Conventions

Do:

  • Use descriptive, structured names

  • Maintain consistency across similar elements

  • Include meaningful identifiers

  • Use kebab-case (hyphens) for readability

Good Examples:

html

<div id="bestseller-product-1">
<div id="summer-collection-slide">
<div id="featured-bike-trike">
<div id="newsletter-signup-form">

Don't:

  • Use randomly generated numbers

  • Create overly generic names

  • Duplicate IDs across elements

  • Use excessively long names

Poor Examples:

html

<div id="slide-template-72891">
<div id="section1">
<div id="product">
<div id="divprodct45">

Priority Elements for ID Implementation

These elements should always have unique, descriptive IDs:

High Priority:

  • Product tiles/cards

  • Collection slides

  • Navigation menu items

  • Featured sections/banners

  • Sliders & category elements

  • Call-to-action buttons

  • Forms and form fields

  • Modal dialogs

  • Tabs and accordions

  • Checkout process elements

Medium Priority:

  • Informational sections

  • Footer sections

  • Social media links

  • Secondary navigation elements

  • Testimonial blocks

Implementation Checklist

  1. Audit Current Setup
    ​

    • Use browser Developer Tools to inspect key elements

    • Document elements missing unique IDs

    • Note any duplicate or poorly named IDs
      ​
      ​

  2. Plan ID Structure
    ​

    • Define naming conventions for your site

    • Create a documentation system for tracking IDs

    • Consider site hierarchy in your naming scheme
      ​
      ​

  3. Update Code
    ​

    • Implement IDs at the template level (not individual pages)

    • Test to ensure no duplicate IDs exist

    • Verify ARIA relationships work properly
      ​
      ​

  4. Verify & Maintain
    ​

    • Create a Standard Operating Procedure (SOP) for maintaining IDs

    • Check IDs after any theme updates

    • Train team members on ID implementation guidelines

CMS-Specific Considerations

Different content management systems have varying approaches to ID implementation:

WordPress:

  • Edit theme template files directly or through a child theme

  • For page builders like Elementor or Beaver Builder, use their custom ID fields

  • Consider a helper plugin to manage IDs across templates

  • WordPress Documentation

Webflow:

  • Use the built-in ID field in the Element Settings panel

  • Document your ID structure in the project notes

  • Create a component naming system that extends to IDs

  • Webflow Documentation

Squarespace:

  • Use developer mode to access and edit templates

  • Add custom code blocks where needed

  • Document additions for future maintenance

  • Squarespace Documentation

Shopify-Specific Implementation

Shopify presents unique challenges for ID implementation since its themes may not provide unique IDs by default, and theme updates can potentially overwrite customizations.

Using Standard ID Attributes

For full theme access (Shopify Plus or custom theme development):

  1. Identify Key Template Files
    ​

    • Product templates (product-template.liquid)

    • Collection templates (collection-template.liquid)

    • Cart templates (cart-template.liquid)

    • Navigation snippets (header.liquid)
      ​

  2. Add IDs to Key Elements

    liquid

<div id="product-{{ product.id }}-container" class="product-card">
  <h3 id="product-{{ product.id }}-title">{{ product.title }}</h3>
  <button id="add-to-cart-{{ product.id }}" class="add-to-cart-button">
    Add to Cart
  </button>
</div>

3. Document Implementation

  • Create a reference document listing all template files modified

  • Note the ID naming convention used

  • Store this document with other theme customization notes

Using data-heatmap-id Alternative

For stores with limited theme customization abilities or when using page builders:

  1. Add Custom Attributes

html

<div data-heatmap-id="bestseller-product-1">
<div data-heatmap-id="summer-collection-slide">
<div data-heatmap-id="featured-bike-trike">

2. Implementation in Liquid

liquid

<div data-heatmap-id="product-{{ product.id }}" class="product-card">
  <h3 data-heatmap-id="product-title-{{ product.id }}">{{ product.title }}</h3>
</div>

3. Through Custom HTML/Liquid Blocks
​

  • Add custom HTML blocks in sections where direct template editing isn't possible

  • Use data attributes as an alternative to ID attributes

Maintaining IDs Through Theme Updates

  1. Create a Theme Update SOP
    ​

    • Document all ID implementations before updates

    • Use a theme comparison tool to identify changes after updates

    • Re-implement IDs as needed after updates
      ​

  2. Use Theme Backup Tools
    ​

    • Always create a backup before theme updates

    • Consider tools like Theme Kit or Git for version control
      ​

  3. Consider a Dedicated App
    ​

    • Some Shopify apps can help maintain tracking through theme updates

    • Evaluate if this approach makes sense for your store

Troubleshooting & Common Issues

Issue

Cause

Solution

Data loss after updates

Auto-generated IDs change

Implement permanent, meaningful IDs

Inconsistent tracking

Missing Ids on key elements

Systematically apply unique IDs

Duplicate IDs

Copy-pasted elements

Use dynamic ID generation with unique variables

Theme installation

New themes override IDs

Maintain an ID documentation checklist

JavaScript errors

Conflicting selectors

Ensure IDs are truly unique across the site

Mixed tracking results

Inconsistent ID implementation

Standardize ID naming conventions

Technical Reference

HTML ID Implementation:

html

<!-- Standard ID attribute -->
<div id="featured-product-123">

<!-- Data attribute alternative -->
<div data-heatmap-id="featured-product-123">

<!-- ARIA relationships using IDs -->
<label id="email-label" for="email">Email Address</label>
<input id="email" aria-labelledby="email-label" aria-describedby="email-error">
<div id="email-error" role="alert"></div>

Liquid/Shopify Examples:

liquid

<!-- Dynamic product ID generation -->
<div id="product-{{ product.id }}">{{ product.title }}</div>

<!-- Collection item with nested elements -->
{% for product in collection.products %}
  <div id="collection-item-{{ forloop.index }}" class="collection-item">
    <h3 id="collection-item-{{ forloop.index }}-title">{{ product.title }}</h3>
    <button id="collection-item-{{ forloop.index }}-button" class="btn">
      View Product
    </button>
  </div>
{% endfor %}

JavaScript Selection Benefits:

javascript

// Inefficient selection without IDs
const button = document.querySelector('.product-container .product-actions .add-button');

// Efficient selection with IDs
const button = document.getElementById('add-to-cart-123');

By implementing unique selector IDs across your website, you're not just making a technical improvement — you're making a business decision that impacts accessibility, performance, analytics accuracy, and ultimately, your bottom line.

The effort required to implement proper IDs is minimal compared to the significant benefits they provide in data integrity, user experience, and long-term maintainability.

Need help? Contact our support team at Support@heatmap.com for implementation assistance or to answer any questions about unique selector IDs.

Did this answer your question?