Boost Mobile Sales by Adding Thumbnails in Brooklyn Theme

In the ever-evolving world of e-commerce, optimizing your Shopify store for mobile devices is crucial. One common challenge faced by store owners using the Brooklyn theme is displaying product thumbnails on mobile views. This guide will walk you through the process of adding product thumbnails to your mobile product pages, enhancing the user experience and potentially boosting your sales.

Understanding the Brooklyn Theme’s Mobile Layout

Default Mobile View

By default, the Brooklyn theme displays product images as a slideshow on mobile devices. While this can be visually appealing, it may not provide the best user experience for customers who want to quickly browse through all available product images.

The Importance of Thumbnails

Adding thumbnails to your mobile product pages can significantly improve the shopping experience. Thumbnails allow customers to:

1. Quickly scan all available product images
2. Easily navigate between different views of the product
3. Get a comprehensive overview of the product without excessive scrolling

Implementing Thumbnails on Mobile: Step-by-Step Guide

To add thumbnails to your mobile product pages in the Brooklyn theme, you’ll need to make some modifications to your theme files. Here’s a detailed guide on how to achieve this:

Step 1: Modify the Product Template

The first step involves editing the product template file to remove the class that hides thumbnails on small screens.

1. Navigate to your Shopify admin panel
2. Go to Online Store > Themes
3. Find your Brooklyn theme and click “Actions” > “Edit code”
4. Locate the sections/product-template.liquid file
5. Find the code for the thumbnail container (usually around line 85)
6. Remove the ‘small—hide’ class from the element

Your code should change from:

<ul class="product-single__thumbnails grid-uniform small--hide" id="ProductThumbs">

to:

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

Step 2: Adjust Thumbnail Layout

Next, you’ll need to modify the individual thumbnail containers to ensure they display correctly on small screens.

1. In the same product-template.liquid file
2. Locate the code for individual thumbnail containers (usually near line 88)
3. Add the ‘small—one-third’ class to the element

Your code should change from:

<li class="grid__item medium--one-quarter large--one-quarter">

to:

<li class="grid__item small--one-third medium--one-quarter large--one-quarter">

Step 3: Fine-tune Thumbnail Styling

Depending on your specific layout, you may need to adjust the spacing between the main product image and the thumbnail gallery.

1. Open your timber.scss.liquid file
2. Add the following CSS at the end of the file:

.product-single__thumbnails {
  margin-top: 15px;
}

You can adjust the margin-top value to suit your specific needs.

Troubleshooting Common Issues

Images Stacking Up

Some users have reported issues with images stacking up when clicking through different product images. If you encounter this problem:

1. Check your theme settings for product pages
2. Ensure that image stacking is turned off
3. Review your JavaScript settings, particularly those related to the image slider

Thumbnails Not Appearing

If thumbnails are still not appearing on mobile devices:

1. Double-check that you’ve removed the ‘small—hide’ class correctly
2. Verify that the ‘small—one-third’ class (or your chosen width class) is applied to the thumbnail containers
3. Clear your theme cache and refresh your store

Thumbnail Functionality

In some cases, clicking on thumbnails may not change the main product image. To address this:

1. Review the JavaScript responsible for thumbnail functionality
2. Ensure that event listeners are properly set up for mobile devices
3. Consider disabling the slideshow dots if they’re interfering with thumbnail functionality

Optimizing Your Mobile Product Pages

Improving Load Times

With the addition of thumbnails, it’s important to optimize your images to maintain fast load times:

1. Use appropriately sized images for thumbnails
2. Implement lazy loading for images further down the page
3. Consider using a content delivery network (CDN) for faster image delivery

Enhancing User Experience

Beyond thumbnails, consider these additional improvements for your mobile product pages:

1. Implement touch-friendly controls for image zooming
2. Use clear, concise product descriptions that are easy to read on small screens
3. Ensure your “Add to Cart” button is prominently displayed and easy to tap

Testing Across Devices

Always test your changes across various mobile devices and screen sizes:

1. Use browser developer tools to simulate different devices
2. Test on actual iOS and Android devices
3. Consider using a service like BrowserStack for comprehensive device testing

By following these steps and optimizations, you can significantly improve the mobile shopping experience on your Shopify store using the Brooklyn theme. Remember to always back up your theme before making changes, and don’t hesitate to seek professional help if you encounter persistent issues.

With these improvements, your mobile customers will have an easier time viewing and interacting with your product images, potentially leading to increased engagement and sales for your e-commerce business.