How to Move Shopify Thumbnail Carousel to the Left

Are you looking to customize your Shopify store’s product page layout? One popular modification is moving the thumbnail carousel to the left side of the main product image. This can create a more visually appealing and user-friendly layout, especially for desktop users. In this comprehensive guide, we’ll walk you through the process of achieving this layout change using Shopify’s Dawn theme.

Understanding the Challenge

The Default Layout

By default, the Dawn theme places the thumbnail carousel below the main product image. While this works well for mobile devices, many store owners prefer a side-by-side layout for desktop views.

The Goal

Our objective is to move the thumbnail carousel to the left side of the main product image, but only for desktop views. We want to maintain the default mobile layout, as it’s already optimized for smaller screens.

The Solution

The most effective way to achieve this layout change is by adding custom CSS to your theme. This method allows you to maintain the theme’s core functionality while tailoring the visual presentation to your preferences.

Implementing the Solution

Step 1: Accessing Theme Files

To begin, you’ll need to access your theme’s code editor:

1. Log in to your Shopify admin panel.
2. Navigate to “Online Store” > “Themes”.
3. Find your active theme (Dawn) and click “Actions” > “Edit code”.

Step 2: Locating the CSS File

In the Dawn theme, we’ll be working with the base CSS file:

1. In the theme editor, look for the “Assets” folder.
2. Find and open the file named “base.css”.

Step 3: Adding Custom CSS

Now, we’ll add the custom CSS that will reposition the thumbnail carousel:

1. Scroll to the bottom of the “base.css” file.
2. Paste the following code:

@media (min-width: 1024px) {
  .product--thumbnail_slider {
    position: relative;
  }
  .product--thumbnail_slider media-gallery {
    display: flex;
    flex-direction: row-reverse;
  }
  .product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
    width: calc(100% - 100px);
  }
  .product--thumbnail_slider .thumbnail-slider {
    width: 100px;
    padding-right: 10px;
  }
  .product--thumbnail_slider .slider-button {
    display: none !important;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
    padding: 0;
    display: block;
  }
  .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    width: 100%;
  }
}

Step 4: Save and Test

After adding the CSS:

1. Click “Save” to apply the changes.
2. Visit your store’s product page on a desktop browser to see the new layout.

Understanding the CSS Changes

Media Query

The @media (min-width: 1024px) ensures that these styles only apply to screens wider than 1024 pixels, typically desktop views.

Flex Layout

Using display: flex and flex-direction: row-reverse on the media gallery container allows us to easily swap the position of the main image and thumbnails.

Width Adjustments

We set specific widths for the main image container and thumbnail slider to create the desired side-by-side layout.

Slider Modifications

The CSS also makes adjustments to the slider functionality, ensuring that the thumbnails display correctly in their new vertical orientation.

Troubleshooting Common Issues

Thumbnails Not Appearing

If the thumbnails don’t show up after applying the CSS, double-check that you’ve pasted the code at the very end of the “base.css” file. This ensures that your custom styles aren’t overridden by existing theme styles.

Layout Issues on Mobile

Remember, this modification is designed for desktop views only. If you notice any strange behavior on mobile devices, ensure that your media query is correctly set to (min-width: 1024px).

Slider Functionality

Some users have reported that the slider functionality for additional thumbnails may not work perfectly with this modification. If you have more than 3-4 product images, you might need to implement additional JavaScript to create a custom vertical slider.

Enhancing the Modified Layout

Adjusting Thumbnail Size

You can easily adjust the size of the thumbnails by modifying the width property of the .thumbnail-slider class in the custom CSS.

Adding Hover Effects

To improve user interaction, consider adding hover effects to the thumbnails. This can be achieved with additional CSS rules targeting the thumbnail images.

Optimizing for Different Screen Sizes

While the provided CSS works well for standard desktop sizes, you might want to create additional media queries for larger screens or tablets in landscape mode to ensure the layout remains optimal across all devices.

By following this guide, you should now have successfully moved your thumbnail carousel to the left side of the main product image on desktop views in your Shopify store using the Dawn theme. This simple yet effective modification can significantly enhance the visual appeal and usability of your product pages, potentially leading to improved customer engagement and sales.