Boost Conversions with People Viewing Feature on Shopify

In the competitive world of e-commerce, creating a sense of urgency and social proof can significantly boost your conversion rates. One effective way to achieve this is by displaying the number of people currently viewing a product on your Shopify store. This article will guide you through the process of implementing this feature, exploring both code-based solutions and app options.

Understanding the “People Viewing” Feature

What is the “People Viewing” Feature?

The “People Viewing” feature is a small piece of text or notification that appears on a product page, indicating how many people are currently looking at that item. For example, it might say “18 people are viewing this product right now.”

Why Use This Feature?

1. Creates urgency: When shoppers see that others are interested in a product, they’re more likely to make a purchase decision quickly.
2. Builds social proof: It shows that the product is popular, which can increase its perceived value.
3. Enhances user experience: It adds a dynamic element to your product pages, making them feel more alive and interactive.

Implementing the Feature with Code

The Custom JavaScript Solution

For those comfortable with coding, adding this feature can be done by inserting a custom JavaScript snippet into your Shopify theme. This method allows for more control over the appearance and behavior of the feature.

Step-by-Step Guide

1. Go to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Find your live theme and click “Actions” > “Edit code”
4. In the Assets folder, locate the theme.js.liquid file (or theme.js in some themes)
5. Add the following code at the end of the file:

document.addEventListener('DOMContentLoaded', function () {
  var minViews = 2;
  var maxViews = 20;
  var text = 'people are viewing this product right now.';
  var $viewCountElement = document.createElement('div');
  $viewCountElement.className = 'view-count shopify-payment-button';
  $viewCountElement.innerText = Math.floor(Math.random() * (maxViews - minViews) + minViews) + ' ' + text;
  var $form = document.querySelector('.template-product .ProductForm');
  var $pickupOptions = document.querySelector('.template-product .ProductMeta__StoreAvailabilityContainer');
  if ($pickupOptions) {
    $pickupOptions.parentElement.insertBefore($viewCountElement, $pickupOptions);
  } else {
    $form.appendChild($viewCountElement);
  }
});

This code creates a new element with a random number of viewers (between 2 and 20) and inserts it near the “Buy” button on your product pages.

Customizing the Appearance

To style the “People Viewing” text, you can add CSS to your theme. Here’s an example of how to customize its appearance:

div.view-count {
  color: var(--text-color-light);
  font-style: italic;
  font-size: 1.25em;
}

Add this CSS to your theme.scss.liquid file or within a “ tag in your theme’s HTML.

Considerations for Different Themes

It’s important to note that the exact implementation may vary depending on your Shopify theme. Some themes may require slight modifications to the code to target the correct elements. For example:

• In the Dawn theme, you might need to target product-info instead of .ProductForm
• For the Motion theme, you may need to add the code to theme.js instead of theme.js.liquid

Always test the implementation on a duplicate of your live theme before making changes to your active store.

Using Shopify Apps for “People Viewing” Features

Benefits of Using Apps

While the custom code solution offers flexibility, using a Shopify app can provide additional features and easier implementation, especially for those less comfortable with coding.

Popular Apps for Viewing Notifications

Several apps in the Shopify App Store offer this functionality, often as part of a broader set of features:

1. Sales Pop-ups
2. Urgency and Scarcity Apps
3. Social Proof Notifications

These apps typically allow you to:

• Display real-time or simulated viewer counts
• Show recent purchases or cart additions
• Customize the appearance of notifications
• Set display rules and frequency

Choosing the Right App

When selecting an app, consider:

1. Compatibility with your theme
2. Customization options
3. Impact on site performance
4. Additional features offered
5. Pricing and support

Always read reviews and try free trials when available to ensure the app meets your needs.

Best Practices for Implementation

Balancing Urgency and Authenticity

While displaying viewer counts can be effective, it’s crucial to maintain authenticity:

1. Use realistic numbers: Avoid inflating viewer counts artificially
2. Update regularly: If possible, use real-time data or frequent updates
3. Don’t overdo it: Too many urgency elements can overwhelm customers

Placement and Design

The placement and design of your “People Viewing” notification can significantly impact its effectiveness:

1. Position near the “Add to Cart” button for maximum visibility
2. Ensure the design complements your overall store aesthetic
3. Make it noticeable without being intrusive

Testing and Optimization

As with any new feature, it’s essential to test and optimize:

1. A/B test different variations (e.g., wording, numbers, placement)
2. Monitor the impact on conversion rates and average order value
3. Gather customer feedback to ensure the feature enhances rather than detracts from the shopping experience

Technical Considerations

Performance Impact

Adding features like this can potentially affect your store’s load times. To mitigate this:

1. Optimize your JavaScript code
2. Use lazy loading for the feature if possible
3. Monitor your store’s performance before and after implementation

Mobile Responsiveness

Ensure that the “People Viewing” feature displays correctly on mobile devices:

1. Test on various screen sizes and devices
2. Adjust font sizes and positioning for mobile views
3. Consider hiding the feature on very small screens if it impacts usability

By implementing a “People Viewing” feature on your Shopify store, you can create a sense of urgency and social proof that may lead to increased conversions. Whether you choose a custom code solution or opt for a Shopify app, remember to prioritize user experience and authenticity in your implementation.